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

Question

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

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

1. import assign from 'lodash/assign';
2. import {assign} from 'lodash-es';

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

所以我安装了 lodash-es 库，从我的 package.json 中删除了 lodash，更新了所有的导入，然后运行了一个干净的构建。但是，当我使用 source-map-explorer 查看包时，即使我的 package.json 中没有列出 lodash，我也会看到对lodash-esas 的引用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 处理导入的最佳方式？

Answer 1

两件事情：

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

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

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

import assign from 'lodash-es/assign'