构建性能分析工具

测量构建时间

# 安装时间测量工具
npm install --save-dev build-timer-plugin

const BuildTimer = require('build-timer-plugin')
const timer = new BuildTimer()

module.exports = timer.wrap({
  plugins: [ /* webpack配置 */ ]
})

分析包体积

const BundleInspector = require('bundle-inspector-webpack-plugin')

module.exports = {
  plugins: [
    new BundleInspector({ serverMode: true, autoOpen: true })
  ]
}

追踪构建进度

const { ProgressTracker } = require('webpack')

module.exports = {
  plugins: [
    new ProgressTracker({
      trackModules: true,
      trackEntries: true,
      trackDependencies: true
    })
  ]
}

优化编译过程

精确文件定位

module.exports = {
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')],
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@lib': path.resolve(__dirname, 'libraries'),
      'vue': path.resolve(__dirname, 'node_modules/vue')
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'source'),
        loader: 'babel-loader'
      }
    ]
  }
}

跳过预编译模块

module.exports = {
  module: {
    noParse: /react|vue|axios/,
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { 
          cacheDir: true,
          compact: false 
        }
      }
    ]
  }
}

缓存机制应用

文件系统缓存(Webpack 5)

module.exports = {
  cache: {
    type: 'filesystem',
    cacheLocation: path.resolve(__dirname, '.webpack_cache'),
    buildDependencies: { config: [__filename] }
  }
}

兼容性缓存方案

const CacheProvider = require('fast-cache-webpack-plugin')

module.exports = {
  plugins: [new CacheProvider()],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          { loader: 'cache-loader', options: { cacheDir: '.temp_cache' } },
          'babel-loader'
        ]
      }
    ]
  }
}

并行处理优化

多线程加载

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'parallel-loader',
            options: { workers: require('os').cpus().length - 1 }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

并行代码压缩

const JsMinimizer = require('js-minimizer-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [
      new JsMinimizer({ 
        parallel: true,
        compress: { removeConsole: true }
      })
    ]
  }
}

代码分割策略

动态模块加载

const UserProfile = () => 
  import(/* webpackChunk: "profile" */ './views/Profile.vue')

const Dashboard = () => 
  import(/* webpackChunk: "dashboard" */ './components/Dashboard.vue')

智能代码拆分

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      cacheGroups: {
        libs: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          priority: 20
        },
        shared: {
          minChunks: 2,
          name: 'common',
          reuseExistingChunk: true
        }
      }
    }
  }
}

开发环境调优

增量构建配置

module.exports = {
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    delay: 300,
    interval: 1000
  }
}

热更新增强

const VueHotReload = require('vue-hot-reload-webpack-plugin')

module.exports = {
  devServer: {
    hot: true,
    port: 8080,
    compress: true
  },
  plugins: [new VueHotReload()]
}

生产优化措施

资源压缩处理

const StyleMinifier = require('css-minimizer-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [
      new JsMinimizer(),
      new StyleMinifier(),
      new CompressionPlugin({ threshold: 10240 })
    ]
  }
}

高级优化技术

模块联邦应用

const ModuleFederation = require('webpack/lib/container/ModuleFederationPlugin')

module.exports = {
  plugins: [
    new ModuleFederation({
      name: 'appCore',
      filename: 'core-entry.js',
      exposes: { './Header': './src/Header.js' },
      shared: ['vue', 'vue-router']
    })
  ]
}