Babel 配置会影响 Tree Shaking 吗？

♫致远提问于 2026-03-11 19:51:19 阅读 17

优化

我最近在优化项目打包体积，发现即使没用的代码还是被打包进去了。明明用了 Webpack 5 的 Tree Shaking，但好像没生效。

我怀疑是不是 Babel 的配置有问题？比如我用了 @babel/preset-env，会不会把 ES6 模块转成 CommonJS，导致 Tree Shaking 失效？

我的 .babelrc 是这样配的：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 1%, not dead"
    }]
  ]
}

是不是得加个 "modules": false？试过加了之后打包体积确实小了点，但不确定是不是这个原因……

我来解答赞 6 收藏

反馈

1 条解答

迷人的琳贺 Lv1

是的，你判断对了，Babel 配置确实会影响 Tree Shaking。

@babel/preset-env 默认会把 ES6 的 import/export 转成 CommonJS 的 require/module.exports，这样 Webpack 在静态分析时就无法判断哪些导出被使用了，Tree Shaking 自然就失效了。

你加的 "modules": false 是正确的做法，它会让 Babel 不转换模块语法，把模块转换交给 Webpack 处理。

完整配置大概是这样：

{
"presets": [
["@babel/preset-env", {
"targets": "> 1%, not dead",
"modules": false
}]
]
}

或者更规范的做法是通过 Webpack 的配置来控制，而不是依赖 Babel。现在 Webpack 5 已经能很好地处理 ES6 模块了，Babel 这边关掉模块转换是更合理的做法。

另外提醒一下，如果你的项目里用了 dynamic import 或者某些插件，可能会影响 Tree Shaking。还有确保 package.json 里 type 字段不要写成 commonjs，ES Module 环境下 Tree Shaking 效果更好。

2026-03-11 20:01