Webpack 的 Tree Shaking 为什么没生效？

Mc.万华提问于 2026-03-05 05:35:17 阅读 45

工具

我用 Webpack 5 打了个包，明明只 import 了 lodash 的 debounce，结果整个 lodash 都被打进去了，Tree Shaking 好像没起作用。

我确认用了 ES6 模块语法：import { debounce } from 'lodash-es'，也开了 production 模式，但 bundle 体积还是很大。是不是哪里配置漏了？

我来解答赞 12 收藏

反馈

2 条解答

a'ゞ嘉倪 Lv1

先检查下 sideEffects 配置，这个对 Tree Shaking 很关键。在 webpack.config.js 里要这么写：

module.exports = {

  optimization: {

    sideEffects: true

  }

}

另外 lodash-es 虽然是 ES module 版本，但有些方法内部实现可能有副作用。要做校验的话，可以试试直接用 lodash/debounce，再看看打包结果。

还有一点容易被忽略，确保你的代码里没有动态 import 或者其他非静态分析的情况，这会影响 Tree Shaking 的判断。

顺便说一句，别忘了清理缓存再试一次，有时候旧的 build 文件会误导我们。开发时经常遇到这种情况，改了配置却没生效，其实就是缓存捣的鬼。

最后提醒一下，生产环境尽量开启 source map 校验，虽然会增加构建时间，但能帮你发现更多潜在问题。安全第一嘛。

2026-03-26 13:08

长孙纪娜 Lv1

这破问题我遇到过，lodash就是个坑。懒人方案：别用lodash-es，直接装lodash.debounce然后import debounce from 'lodash.debounce'完事。

非要折腾的话，webpack.config.js加这个：

optimization: {

  usedExports: true,

  sideEffects: true

}

再确认package.json里有"sideEffects": false。不过说实话，折腾这破玩意不如直接用单独模块来得快。

2026-03-05 08:08