Webpack 的 Tree Shaking 为什么没生效？

FSD-松静提问于 2026-03-17 19:16:18 阅读 34

优化

我用 Webpack 5 打了个包，明明写了按需导入的代码，但打包后发现没被摇掉，体积还是很大。是不是配置有问题？

我试过把 mode 设成 production，也确认用了 ES6 模块语法，比如 import { debounce } from 'lodash-es'，但 lodash 整个库还是被打进去了。

我的 webpack 配置里 optimization 这块是这样的：

optimization: {
  usedExports: true,
  sideEffects: false
}

我来解答赞 13 收藏

反馈

1 条解答

Code°曌煜 Lv1

这个问题挺经典的，lodash-es 没摇掉通常有几个坑。

先检查一下 lodash-es 的 package.json 有没有 sideEffects 字段。如果没有，Webpack 5 可能把它当成有副作用的整个打进来了。你可以在项目的 package.json 里强制声明：

"sideEffects": false

如果还不行，很可能是 Webpack 5 对 node_modules 的 tree shaking 策略变了。试试在 optimization 里加个配置：

optimization: {

  usedExports: true,

  sideEffects: false,

  sideEffectsFreeModules: true  // 这个很重要

}

另一个更直接的办法是用 babel-plugin-lodash，不管你用的是 lodash 还是 lodash-es，装上这个插件：

npm install babel-plugin-lodash --save-dev

然后 babel 配置里加上：

plugins: ['lodash']

这样即使 Webpack 的 tree shaking 搞不定，babel 也能帮你做按需引入，最后打包结果会小很多。

还有一种情况是你用的 Webpack 版本太旧或者有缓存，清一下 node_modules 和 dist 目录再重新打包试试，有时候是缓存搞的鬼。

2026-03-17 21:08