Tree Shaking 为什么没把没用的 export 函数删掉？

设计师自娴提问于 2026-03-12 11:15:19 阅读 72

优化

我用 Webpack + Babel 打包项目，明明只 import 了一个函数，但打包后其他没用的 export 函数还在 bundle 里，这是为啥？

我试过把 Babel 的 modules 设成 false，也确认 mode 是 production，但还是不行。比如我这样写：

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

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

结果 subtract 也被打包进去了，根本没被 Tree Shaking 掉，是不是哪里配置错了？

我来解答赞 7 收藏

反馈

2 条解答

a'ゞ康帅 Lv1

Tree Shaking 没删掉没用的 export 函数，通常是由于代码没有被正确识别为 ES6 模块。你已经把 Babel 的 modules 设置成了 false，这是正确的，但还需要确保 Webpack 的配置也支持 Tree Shaking。

首先，检查一下 Webpack 的配置文件，确保你使用的是生产模式，并且开启了 optimization.splitChunks 和 optimization.usedExports。这些选项有助于 Webpack 做更好的优化和 Tree Shaking。

然后，确保你的代码确实是 ES6 模块语法，不要混用 CommonJS 或 AMD 的语法。Webpack 在处理 ES6 模块时才能更好地进行 Tree Shaking。

最后，有时候浏览器兼容性问题也会导致 Tree Shaking 失效。如果你的项目需要支持一些比较旧的浏览器，可能需要调整 Babel 的配置，确保没有引入不必要的 polyfills。

试试以上这些步骤，应该能解决 Tree Shaking 没生效的问题。如果还不行，可以检查一下是否有其他插件或配置干扰了 Tree Shaking 的过程。

2026-03-24 15:06

新霞 ☘︎ Lv1

这个问题太经典了，Tree Shaking 不生效一般就这几个原因：

首先检查一下你的 package.json，看看有没有写 "sideEffects": true，如果有的话直接改成 "sideEffects": false 或者删掉这行。这个配置会让 Webpack 认为所有文件都有副作用，Tree Shaking 直接失效，很多人都是栽在这个上面。

然后确认一下 Babel 配置。你说把 modules 设成了 false，但要注意babel-loader里也要传这个参数，光在 .babelrc 里设有时候不顶用。建议在 webpack.config.js 里这样配：

{

  test: /.js$/,

  exclude: /node_modules/,

  use: {

    loader: 'babel-loader',

    options: {

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

    }

  }

}

或者在 babel.config.js 里确认 modules 确实是 false，别写成 auto 或者其他值。

还有一点，你的 utils.js 必须是纯 ES Module 导出，不能是 CommonJS（就是不能用 module.exports）。如果项目里其他地方用了 require() 或者 module.exports，那 Tree Shaking 也会失效。

最后在 Webpack 配置里明确加上这个保险一点：

optimization: {

  usedExports: true,

  sideEffects: false

}

改完以后重新 build 一遍，应该就能看到 subtract 被打掉了。

2026-03-12 11:19