Webpack tree-shaking 不生效怎么排查？sideEffects 怎么配置？

Question

仓乃文 · Accepted Answer

Tree-shaking 不生效最常见的三个原因：mode 不是 production、模块有副作用、ES Module 导出方式不对。排查时按顺序检查这三项，90% 的问题都能解决。

排查步骤：
```bash
# 第 1 步：确认 mode 为 production
npx webpack --mode=production

# 第 2 步：确认使用 ES Module 导出
# 错误写法（CommonJS，无法 tree-shake）：
module.exports = { foo, bar }
# 正确写法（ES Module）：
export function foo() {}
export function bar() {}

# 第 3 步：检查 package.json 的 sideEffects
```

sideEffects 配置：
```json
{
  "sideEffects": false
}
// 告诉 Webpack：这个包的所有模块都没有副作用，可以安全地 tree-shake

// 如果有副作用的文件，用数组列出：
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js",
    "./src/global-setup.js"
  ]
}
```

验证 tree-shaking 是否生效：
```javascript
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  mode: "production",
  optimization: {
    usedExports: true,
    minimize: true,
    concatenateModules: true,
  },
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};
```

常见坑：
```
1. @babel/preset-env 会把 ESM 编译成 CJS
   → 设置 modules: false 保留 ESM

2. 第三方库不支持 tree-shaking
   → 检查库的 package.json 是否有 sideEffects 字段
   → 试试 lodash-es 替代 lodash

3. 动态导入无法 tree-shake
   → import() 是运行时加载，无法静态分析
   → 尽量使用静态 import
```