使用 'lodash-es' 和 create-react-app 减少捆绑包中的 Lodash

Posted 2023-02-21

【中文标题】使用 \'lodash-es\' 和 create-react-app 减少捆绑包中的 Lodash

【英文标题】：Reduce Lodash in bundle using 'lodash-es' and create-react-app使用 'lodash-es' 和 create-react-app 减少捆绑包中的 Lodash

【发布时间】：2020-01-21 16:36:13

【问题描述】：

我是 webpack 的新手，在构建处理方面我一直依赖于 create-react-app 等工具的开箱即用功能。但是，我现在才刚刚开始“尝试”并更深入地了解事物 - 所以请原谅我的新手理解。

我们在整个应用程序中都使用 Lodash，并努力确保只导入我们需要的内容。据我所知，有两种导入方式：

import assign from 'lodash/assign'; import assign from 'lodash-es';

我个人更喜欢第二个选项，因为如果您使用多个 Lodash 函数，您可以将所有导入合并到一行中。

所以我安装了 lodash-es 库，从我的 package.json 中删除了 lodash，更新了所有导入，然后运行了一个干净的构建。但是，当我使用 source-map-explorer 查看包时，我看到对 lodash-es 和 lodash 的引用，即使我的 package.json 中没有列出 lodash。我认为这是因为它是在 create-react-app 中的某个地方发布的。请参阅下面的源图...

使用 import assign from 'lodash-es' 约定的示例 Sourcemap

我认为这是一件坏事，并认为我可能正在“双重导入”已经在 create-react-app 中使用/导入的 lodash 函数。所以我尝试使用选项 1. 进行导入。然而，令我惊讶的是，应用程序的总大小实际上似乎更大，并且 lodash 导入的大小实际上比使用选项 2 时多约 3k！

使用 import assign from 'lodash/assign' 约定的示例 Sourcemap

所以我的问题是 - 我是否正确解释了 lodash-es 中的源映射实际上是一种更有效的导入方式，而“双重导入”实际上并不是一种风险。还是选项 1 约定是使用 lodash 处理导入的最佳方式？

【参考方案1】：

两件事：

您可以通过在 webpack 配置中将 lodash 别名为 lodash-es 来移除双重导入：

module.exports = 
  resolve: 
    alias: 
      'lodash-es': 'lodash',
    ,
  ,
;

其次，为了更明确地仅从 lodash-es 导入您需要的内容，您可能希望通过以下方式导入 lodash 函数：

import assign from 'lodash-es/assign'