如何在 create-react-app 项目中为 lodash 执行摇树？

Question

我需要执行 tree-shaking 以减少使用 lodash 和其他一些库的包大小。 我已经像这样转换了所有 lodash 导入： import {isEmpty} from "lodash"; 但是捆绑包的大小仍然没有减少。

要使用像 ' lodash-webpack-plugin ' 这样的插件，我们需要在webpack.config.js中进行配置，这在 create-react-app 项目中是不可能的。 我尝试使用react-app-rewired但遇到以下问题：错误截图

项目中使用了以下版本：

1. 反应脚本：3.4.1
2. 网络包：4.42.0
3. 反应：16.13.1
4. lodash：4.17.15

Answer 1

当使用 ES6 模块（导入/导出语法）时，Webpack 可以自动执行树摇动。

看起来 lodash 是为使用 Common-JS 模块而构建的。

所以你可以使用单一的导出和樱桃挑选方法来减少包的大小：

import isEmpty from "lodash/isEmpty";

通过此导入，您的包中将仅包含 isEmpty 函数。

或者，您可以尝试使用用 ES6 编写的lodash-es