为什么用了 lodash-es 还是没法 tree shaking 掉没用的函数？
我项目里只用了 lodash-es 的 debounce，按理说其他函数应该被 tree shaking 掉，但打包后体积还是很大。我用的是 Vite + Vue3，默认配置应该支持 ES module 吧？也确认了导入方式是 import { debounce } from 'lodash-es'，不是整个库引入。
是不是还需要额外配置？或者我的构建工具根本没生效？下面是我试的一个简单样式，跟问题无关，但页面里确实只引用了这一个工具函数：
.btn {
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
}
.btn:hover {
opacity: 0.9;
}2 条解答
import { debounce } from 'lodash-es'应该是可以 tree shaking 的。不过有时候构建工具的配置或者某些插件的影响会导致 tree shaking 失效。首先，确保你的 Vite 配置中没有禁用 tree shaking。默认情况下，Vite 是支持 tree shaking 的，但有时候自定义的 rollup 插件可能会干扰这个过程。
其次，检查一下你的生产环境构建命令是否正确。通常你需要运行
npm run build或者yarn build来触发生产环境的构建，而不是开发环境的serve命令。最后，可以尝试清理一下项目的缓存和 node_modules，然后重新安装依赖，有时候缓存的问题也会导致构建结果不符合预期。
如果以上步骤都没有解决问题，可能需要进一步检查 Vite 的具体配置，看看有没有其他地方影响了 tree shaking。有时候查看一下生成的构建报告也能提供一些线索。
顺便确认下你的package.json里lodash-es版本是不是>=4.17.21，老版本tree shaking有问题。