Tree Shaking 为什么没生效？打包体积还是很大

Designer°春依提问于 2026-03-11 21:20:22 阅读 37

优化

我用 Vue 3 + Vite 搭的项目，明明只用了 lodash 的 debounce 方法，但打包后 vendor chunk 还是特别大。我查了文档说要开启 Tree Shaking，Vite 默认应该是开的啊？是不是我写法有问题？

我是这么引入的：

<script setup>
import { debounce } from 'lodash'
// 或者试过 import debounce from 'lodash/debounce'，但提示模块找不到
</script>

结果 build 完发现整个 lodash 都被打包进来了，这 Tree Shaking 到底咋才能生效？

我来解答赞 7 收藏

反馈

1 条解答

开发者毅蒙 Lv1

问题在于你用的是原生 lodash，那玩意的 CommonJS 写法根本没法做 Tree Shaking，Vite 再厉害也摇不掉它。

解决方案：换成 lodash-es

先卸载 lodash，然后装 lodash-es：

npm uninstall lodash

npm install lodash-es

然后改你的引入方式：

import { debounce } from 'lodash-es'

这样打包完就只会包含 debounce 那点代码了，整个 vendor chunk 会小很多。

为什么原来不行

lodash 默认导出的是 CommonJS 模块，Tree Shaking 需要 ES Module 格式才能分析你用了哪些导出。lodash-es 就是官方出的 ES 模块版本，Vite 摇起来毫无压力。

另外如果你用的是一些 UI 组件库（比如 Element Plus、Ant Design Vue 这些），也建议检查下有没有全量引入的问题，很多人是把整个库 import 进来然后抱怨体积大，这种时候要么按需引入，要么用 unplugin-vue-components 这种自动按需导入的插件。

基本上就酱，改成 lodash-es 就能解决。

2026-03-11 21:25