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

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

优化

我用的是 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 还是被打包进来了。

我来解答赞 4 收藏

反馈

1 条解答

庆玲 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