Babel配置会影响Tree Shaking效果吗？

长孙淑宁提问于 2026-02-24 20:58:23 阅读 64

优化

我最近在优化项目打包体积，发现即使用了ES Module，Webpack的Tree Shaking好像也没生效。我怀疑是不是Babel的配置有问题，因为看到有人说Babel会把import/export转成CommonJS，导致Tree Shaking失效。

我现在的Babel配置里用了@babel/preset-env，但没特别设置modules选项。比如下面这段代码，明明只用了add，但打包后subtract也被包含进去了：

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// index.js
import { add } from './utils';
console.log(add(1, 2));

是不是要加什么配置才能让Babel保留ES Module语法，不破坏Tree Shaking？

我来解答赞 4 收藏

反馈

2 条解答

IT人玉鑫 Lv1

哎呀这个问题我前段时间也遇到过！确实是因为Babel默认会把ES Module转成CommonJS，导致Webpack的Tree Shaking失效了。

可以试试这样改Babel配置，在@babel/preset-env里加上modules: false：

{

  presets: [

    ['@babel/preset-env', {

      modules: false

    }]

  ]

}

这个配置告诉Babel不要转换import/export语法，让Webpack能正确识别ES Module。我上周刚用这招给项目减了30%体积，效果立竿见影！

另外记得确认你的Webpack配置：
1. mode设为production（开发模式默认不摇树）
2. 确保sideEffects配置正确
3. 用最新版Webpack（老版本可能有问题）

如果还不行的话，可能是其他插件干扰了，可以逐个排查。我之前就被一个polyfill插件坑过，它偷偷把所有代码都标记为有副作用...

2026-03-08 20:18

程序员丹丹 Lv1

你猜得没错，Babel的配置确实会影响Tree Shaking效果，问题就出在 @babel/preset-env 默认把ES Module转成了CommonJS，Webpack就无法做静态分析了。

默认情况下，modules 选项是 "auto"，在Webpack环境下它会自动转成CommonJS，这就把import/export全换成require了，Tree Shaking自然就失效了。

解决办法很简单，在Babel配置里显式关掉模块转换：

{

  "presets": [

    ["@babel/preset-env", {

      "modules": false

    }]

  ]

}

或者如果你用的是 .babelrc.js 或 babel.config.js，写法类似：

module.exports = {

  presets: [

    ['@babel/preset-env', { modules: false }]

  ]

};

这样Babel就不会动你的import/export了，Webpack就能正常做Tree Shaking。

不过要注意，关掉modules转换后，Babel就不会处理模块语法了，但其他特性（比如async/await、class属性等）还是会正常转译，只要你的targets配置合理就行。

另外提醒一句，Webpack 4默认开启Tree Shaking的前提是 mode 设为 production，或者手动配置 optimization.usedExports = true，确认下你的Webpack配置里没漏掉这个。

更好的写法是把Babel和Webpack的配置都统一管理，避免这种隐式坑，比如用 babel-loader 时加上 presets: [['@babel/preset-env', { modules: false }]]，这样一目了然，也不容易忘。

2026-02-24 21:11