Webpack 5 打包优化完整指南

1. 代码分割

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors"
        }
      }
    }
  }
};

2. Tree Shaking

// package.json
{
  "sideEffects": false
}

3. 压缩优化

const TerserPlugin = require("terser-webpack-plugin");

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true,
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ]
}

4. 缓存策略

module.exports = {
  cache: {
    type: "filesystem"
  }
};

5. 分析打包体积

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

plugins: [
  new BundleAnalyzerPlugin()
]

6. 按需加载

const Module = () => import("./Module");

性能对比

优化前：3.5MB → 优化后：800KB 构建时间：45s → 12s