6

我是 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 查看包时，我看到了对的引用，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 处理导入的最佳方式？

4

1 回答 1

0

两件事情：

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

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

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

import assign from 'lodash-es/assign'
于 2020-12-09T06:48:38.043 回答