为什么我的模块未使用代码无法被Tree Shaking清除？

令狐梓豪提问于 2026-01-27 05:39:24 阅读 49

优化

我在用Webpack打包项目时启用了Tree Shaking，但发现即使某些模块的方法没有被调用，打包后的文件里还是包含了它们。比如我定义了一个工具类：

export function useA() { /* ... */ }
export function unusedB() { /* ... */ }

然后只在入口文件里导入了useA：

import { useA } from './utils';

可最终bundle里还是能看到unusedB的代码，这正常吗？

我试过把Webpack配置里的mode设为production，也确认用了ES6模块语法，但问题依旧。难道Tree Shaking对函数导出不生效？或者需要额外配置什么插件？

模块优化

我来解答赞 11 收藏

反馈

2 条解答

小俊熙 Lv1

这不正常，但也不是 Webpack 的锅。Tree Shaking 对未使用导出函数的清理效果，关键在于你这些导出函数是否真的“未被使用”，或者是否是“副作用”函数。

你现在的写法是具名导出（named export），如果只导入了 useA，但 unusedB 没有被任何地方引用，理论上会被 Tree Shaking 干掉。但 Webpack 默认不会假设你的函数没有副作用，除非你明确告诉它：“这些函数是纯函数”。

### 原因总结：
1. Webpack 默认保守处理，除非你明确标注哪些导出是“纯”的；
2. 如果你用了 Babel，默认会把 ES6 模块转成 CommonJS（破坏 Tree Shaking）；
3. 某些工具库导出方式不标准，也会干扰 Tree Shaking。

### 解决建议：
- 确认你用的是 mode: 'production'，并确认 Webpack 没把模块转成 CommonJS；
- 使用 /*#__PURE__*/ 注释标记函数是纯函数，帮助 Webpack 判断；
- 把工具函数写成默认导出或按需拆成独立模块；
- 使用 sideEffects: false 在 package.json 中标记这个模块无副作用。

比如你可以这样写：

export function useA() { /* ... */ }

/*#__PURE__*/ export function unusedB() { /* ... */ }

或者更彻底的做法是按需拆模块：

utils/useA.js：

export default function useA() {}

utils/unusedB.js：

export default function unusedB() {}

然后只导入你需要的：

import useA from './utils/useA';

这样 Tree Shaking 才能真正起作用。别偷懒写一堆函数在一个文件里，按需拆分才是王道。

2026-02-03 18:04

司徒春彦 Lv1

这个问题挺常见的，Webpack的Tree Shaking确实有时候会让人觉得不太靠谱，但其实大多数情况是你的代码或者配置有点小问题。

首先看看你提到的工具类文件，如果unusedB真的没被用到，按道理说应该会被摇掉。但是有几种常见原因会导致它残留：

1. **默认导出的影响**：如果你的模块里有任何export default，Webpack可能会认为这个模块整体都有可能被用到，从而保留所有内容。
2. **副作用标记**：Webpack需要明确知道某个模块没有副作用（side effects）。如果你的package.json里没有设置"sideEffects": false，或者某些文件有副作用，那Tree Shaking就会失效。
3. **间接引用**：即使你表面上只用了useA，但如果其他地方通过动态导入（比如require或字符串形式的import()）引用了整个模块，unusedB也会被保留。

解决方法很简单：
- 确保你的package.json里加了"sideEffects": false，如果有些文件确实有副作用，可以用数组形式排除它们。
- 检查项目里有没有动态导入整个模块的情况，这种会破坏Tree Shaking。
- 如果你还用了一些插件（比如Babel），确保Babel配置里没有把ES6模块转成CommonJS，可以用@babel/preset-env并设置modules: false来保留原生ESM。

最后给个简单的配置示例：

{

  "sideEffects": false

}

如果还是不行，可以贴一下具体的Webpack配置和代码，我们再具体分析。反正调试Tree Shaking这事儿，很多时候就是各种细节在搞鬼。

2026-01-28 21:00