Webpack 的 usedExports 配置为啥没生效？

素香 Dev 提问于 2026-03-15 09:23:19 阅读 33

优化

我按文档开启了 optimization.usedExports: true，但打包后发现没用的函数还是被打包进去了，根本没被 tree-shaking 掉，这是为啥？

我的模块是 ES6 语法写的，也确认用了 import/export，而且 mode 是 production。试过把函数标记为 /*#__PURE__*/ 也没用。

// utils.js
export const add = (a, b) => a + b;
export const unusedFn = () => console.log('never used');

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

我来解答赞 8 收藏

反馈

1 条解答

程序猿怡冉 Lv1

你这种情况大概率是 package.json 里的 sideEffects 配置搞的鬼。

检查一下你的 package.json 是否有：

{

  "sideEffects": false

}

如果加了 sideEffects: false，webpack 会认为所有模块都是"纯"的，可以随便删。但有时候这个配置会导致 usedExports 判断失效。

解决方法：删掉 sideEffects 或者改成 sideEffects: true，或者在 webpack 配置里明确覆盖：

module.exports = {

  mode: 'production',

  optimization: {

    usedExports: true,

    sideEffects: true  // 加这个覆盖掉 package.json 的配置

  }

}

另外确认一下 webpack 版本，太老的版本 usedExports 有 bug。v4+ 应该都没问题。

还有一点：你的 unusedFn 是没有被 import，但如果这个模块被其他地方以 namespace 方式 import 了（import * as utils from './utils.js'），那 webpack 就不敢删了，因为可能会用到。

先试试把 sideEffects 改成 true 看看。

2026-03-16 14:34