lodash-es 按需引入后为什么打包体积还是很大？

Good“玉飞提问于 2026-03-05 12:19:19 阅读 4

优化

我用的是 Vite + Vue3，想通过 tree shaking 减小 lodash 的打包体积，就改用了 lodash-es，并只 import 了 debounce。但 build 完发现 vendor chunk 还是很大，好像整个 lodash 都被打进来了？

我试过这样写：

import { debounce } from 'lodash-es';

const debouncedFn = debounce(() => {
  console.log('resize');
}, 300);

也确认 vite.config.js 里没关掉 tree shaking，但分析 bundle 发现 lodash-es 占了快 70KB。是不是我哪里写错了？

我来解答赞 1 收藏

反馈

1 条解答

欧阳文华 Lv1

啊这个lodash的打包问题我也踩过坑。先检查一下你的package.json，是不是同时装了lodash和lodash-es？有时候两个共存会导致tree shaking失效。

如果确定只用lodash-es，试试这样改导入方式：

import debounce from 'lodash-es/debounce'

直接走具体模块路径而不是从主入口导入，这样webpack/vite会更明确地只打包这一个函数。

另外建议跑下npx vite-bundle-visualizer看看具体是哪些模块被打进来了，有时候你以为的"整个lodash"其实只是lodash的一些核心依赖。

还有种可能是你的debounce函数被多处引用导致看起来体积大，但其实是被压缩合并过的。70KB确实有点夸张，正常单函数应该在10KB以内。

最后终极方案：如果还不行，直接换lodash.debounce这个独立包吧，专治各种tree shaking不灵。

2026-03-05 13:02