如何在 vite 中配置 Lodash Tree Shaking

Question

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

那么，如何配置 vite2.x 来减少 lodash 包的大小

Answer 1

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

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

import uniqueId from "lodash/uniqueId";

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

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

import { uniqueId } from "lodash-es";

通过使用该lodash-es库，您可以安全地导入函数，并且您的项目最终不会在生产版本中包含整个 lodash 源代码。

有什么不同？

为什么可以安全地导入来自lodash-es但不能安全地导入 uniqueId lodash？

如果你比较uniqueId源代码，你会发现它lodash-es使用 ES 模块，而 plainlodash使用 CommonJS 模块。

由于 Vite 使用 EcmaScript 模块，我认为只有那些模块是可进行 tree-shakeable 的（在其文档中找不到任何内容），CommonJS 模块一般来说更难进行 tree-shake，你通常需要做一些解决方法来对它们进行 treeshake。

有关 tree-shaking 的更多信息。