Babel配置影响Tree Shaking吗？为什么我的Vue组件没被摇掉？

Code°美荣提问于 2026-03-26 16:55:21 阅读 23

优化

我用 Vue 3 + Vite 搭的项目，发现打包后一些没用的组件还是被打进去了。我明明没引用它们，按理说 Tree Shaking 应该能干掉才对。是不是 Babel 配置有问题？

我试过把 @babel/preset-env 的 modules 设成 false，但好像没起作用。下面是我一个没被使用的组件：

<template>
  <div>Unused Component</div>
</template>

<script>
export default {
  name: 'UnusedComponent'
}
</script>

这个组件在 main.js 里根本没 import，但 dist 里还能搜到它的代码。Babel 到底该怎么配才能让 Tree Shaking 正常工作？

Babel配置

我来解答赞 2 收藏

反馈

1 条解答

夏侯春艳 Lv1

Babel配置确实会影响Tree Shaking，但Vite本身用的是ESBuild，问题可能出在你没用对Vite的build配置。试试在vite.config.js里加个treeshake选项，设置成true。

export default defineConfig({

  build: {

    rollupOptions: {

      treeshake: true

    }

  }

})

另外检查下你的package.json，确保sideEffects设对了，不然Tree Shaking可能会被禁用。应该是"sideEffects": false才对。这事儿真能让人抓狂，但调对了就爽了。

2026-03-26 17:11