Webpack性能优化深度解析

多进程优化方案

1. thread-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1,
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

2. HappyPack (Webpack4及以下推荐)

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
}

代码分割最佳实践

1. 动态导入

// 使用动态import语法
const LazyComponent = () => import(/* webpackChunkName: "lazy-component" */ './LazyComponent');

2. SplitChunksPlugin配置

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

摇树优化(Tree Shaking)实施

1. 基础配置

module.exports = {
  mode: 'production', // 必须为production
  optimization: {
    usedExports: true,
    minimize: true
  }
}

2. 确保ES模块语法

// package.json
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "@babel/polyfill"
  ]
}

综合优化方案

1. 缓存策略

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
}

2. 性能分析工具

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false
    })
  ]
}

实践建议

1. 多进程优化适用场景：

   • 适用于大型项目，小型项目可能得不偿失
   • 推荐在Babel/Typescript转译和复杂loader处理时使用

2. 代码分割策略：

   • 路由级分割：每个路由对应一个chunk
   • 组件级分割：大型组件单独拆分
   • 第三方库分割：将稳定不常更新的库单独打包

3. 摇树优化注意事项：

   • 确保使用ES6模块语法(import/export)
   • 避免副作用代码影响优化效果
   • 第三方库需要支持ES模块才能被正确摇树

4. 监控与持续优化：

   • 使用webpack-stats-analyzer定期分析构建结果
   • 设置性能预算(performance budgets)
   • 对比优化前后的构建时间和包大小变化

通过合理组合这些优化技术，通常可以将构建时间减少30%-70%，打包体积缩小20%-50%，具体效果取决于项目结构和配置细节。