Tree Shaking 没生效，Bundle Analyzer 显示没用的代码还在？

ლ青燕提问于 2026-03-29 14:20:15 阅读 6

优化

我用 Webpack + Babel 搭了个 React 项目，明明只 import 了 lodash 的一个函数，但 Bundle Analyzer 显示整个 lodash 都被打包进来了，Tree Shaking 好像没起作用？

我试过把 mode 设成 production，也确认用了 ES Module 语法：import debounce from 'lodash/debounce'，但分析结果还是不对。

这是我的 webpack 配置片段：

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { modules: false }]]
          }
        }
      }
    ]
  }
};

我来解答赞 2 收藏

反馈

1 条解答

晓萌 Lv1

问题在于 sideEffects: false 这个配置不对，你不能直接全局禁用 sideEffects。你需要在 package.json 里单独为 lodash 配置：

{

  "name": "your-project",

  "version": "1.0.0",

  "sideEffects": [

    "node_modules/lodash"

  ]

}

然后把 webpack 配置里的 sideEffects: false 去掉。记得清理缓存重打包试试。这坑我也踩过，真让人抓狂。

2026-03-29 14:23