Webpack打包体积压缩

Webpack打包体积压缩踩坑记录

最近项目上线后发现页面加载慢得让人发指，经过分析发现是Webpack打包体积过大导致的。分享几个实际踩过的坑和有效的优化方案。

问题现象

打包后的bundle.js达到了2.3MB，首屏加载时间超过5秒，用户抱怨声一片。

实践方案

1. Tree Shaking配置问题 最初以为开启了sideEffects: false就万事大吉了，结果发现lodash等库还是被打包进去了。正确做法是：

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    sideEffects: false
  }
}

同时在package.json中明确标注无副作用的模块：

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

2. SplitChunks配置陷阱 默认配置下vendor包太大，需要精细化配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/](node_modules)[\\/]_/,
        name: 'vendors',
        priority: 10,
        chunks: 'all'
      }
    }
  }
}

3. 压缩插件选择 使用webpack-bundle-analyzer分析后发现，gzip压缩效果不佳。换成terser-webpack-plugin后提升明显：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    ]
  }
}

最终效果

优化后bundle从2.3MB降至800KB，首屏加载时间从5秒降到1.2秒，用户满意度直线上升。

经验总结： 每次优化都要用webpack-bundle-analyzer做可视化分析，避免盲目优化。