lodash - 如何在 vite 中配置 lodash tree-shaking

Question

现在，我正在使用 Vite2.x 使用“rollup-plugin-visualizer”构建我的项目，我发现它构建了整个 lodash 包

那么，如何配置 vite2.x 以减小 lodash 包大小

标签： lodashtree-shakingvite

Answer 1

我发现这个问题是因为我遇到了类似的问题，也许这可以帮助将来遇到类似问题的人。

最简单的解决方法是使用如下导入：

import uniqueId from "lodash/uniqueId";

这可确保您在使用 lodash 函数时为生产包添加最小的占用空间。

另一种方法是使用lodash-es可正确摇树的 lib，然后您可以使用：

import { uniqueId } from "lodash-es";

通过使用lodash-eslib，您可以安全地导入函数，并且您的项目不会在生产构建中使用整个 lodash 源代码。

有什么不同？

为什么你可以安全地导入 uniqueIdlodash-es而不是 from lodash？

如果您比较uniqueId源代码，您会注意到lodash-es使用 ES 模块，而普通lodash使用 CommonJS 模块。

由于 Vite 与 EcmaScript 模块一起工作，我认为只有那些是可摇树的（在他们的文档中找不到任何东西），CommonJS 模块通常更难摇树，你通常需要做一些变通方法来摇树。

有关 tree-shaking的更多信息。