Tree Shaking 为什么没把我的未使用函数删掉？

Code°萍萍提问于 2026-03-27 14:57:19 阅读 55

优化

我用的是 Vite + React，写了一个 utils.js 文件导出了好几个函数，但组件里只用了其中一个。打包后发现其他没用的函数还在 bundle 里，不是说 Tree Shaking 会自动去掉死代码吗？

我确认了 package.json 里有 "sideEffects": false，也试过把函数改成具名导出，但还是没效果。是不是我哪里配置错了？

export const foo = () => console.log('foo')
export const bar = () => console.log('bar')
export const baz = () => console.log('baz')

然后在组件里只用了 import { foo } from './utils'，结果 bar 和 baz 还是被打包进来了。

我来解答赞 12 收藏

反馈

2 条解答

西门法霞 Lv1

遇到这种情况，首先检查下你的代码是不是在什么地方间接引用了那些函数。虽然你只用了 foo，但如果有其他地方直接或间接调用了 bar 或 baz，Tree Shaking 就不会去掉它们。

另外就是看看这些函数有没有被某些动态导入影响到。比如说你用到了 require 动态加载模块，或者有 eval 之类的动态代码执行，都会影响 Tree Shaking 的效果。

还有个常见问题是函数里可能有副作用。比如你在函数里修改了全局变量或者 DOM，这种情况下即使函数没被使用，打包工具也不敢轻易移除它。你说设置了 sideEffects 为 false，但最好还是逐个排查每个函数，确认真的没有任何副作用。

实在不行的话，可以试试在 Vite 配置里加个 terser 插件来强制压缩和清理代码。不过这属于最后的手段了，一般来说优化配置没问题的话，Tree Shaking 应该是能正常工作的。



// 这种写法更有利于 Tree Shaking

export const foo = () => console.log('foo')

export const bar = () => { /* 确保这里没有副作用 */ }

export const baz = () => { /* 同样注意副作用 */ }

有时候问题就在细节上，慢慢排查总能找到原因。说实话我也遇到过类似情况，折腾半天才发现是个小地方出了问题。

2026-03-31 17:04

庆玲 Lv1

这问题我遇到过，其实跟 Vite 的配置有关。虽然你说已经设置了 "sideEffects": false，但还差一个关键设置。

在 vite.config.js 里加上这个：

export default defineConfig({

  build: {

    rollupOptions: {

      treeshake: {

        moduleSideEffects: 'no-external'

      }

    }

  }

})

另外，确认下你的 utils.js 文件里确实没有其他副作用代码。要是有类似 console.log 这种东西，Tree Shaking 可能会保守处理。

再检查下生产环境打包时有没有用 mode: 'production'，有时候开发模式不会完全应用 Tree Shaking。

改一下就行，应该就能看到没用的函数被清理掉了。记得清下缓存再重新打包看看效果。折腾这些配置挺烦人的，不过弄对了就省心了。

2026-03-27 15:04