“从'lodash'导入{pick};”之间的区别和“从'lodash/pick'导入选择；”答案

【问题标题】：Difference between "import { pick } from 'lodash';" and "import pick from 'lodash/pick';"“从'lodash'导入{pick};”之间的区别和“从'lodash/pick'导入选择；”
【发布时间】：2019-04-18 15:35:58
【问题描述】：

有什么区别

import { pick } from 'lodash';

和

import pick from 'lodash/pick';

（请注意，第二个是'lodash/pick'，而不仅仅是'lodash'。）

它们各自如何影响捆绑包的大小？

它们是否导入了与lodash 完全相同的部分？

他们比较快吗？

【问题讨论】：

请注意：“我什么时候应该使用花括号进行 ES6 导入？” 当然是相关的，但请注意 OP 中的模块说明符上面的问题是'lodash' 和'lodash/pick'。例如，从不同的地方进口。
第二个只导入那个函数，另一个导入lib并提取pick
有点忘了我上面评论的链接：stackoverflow.com/questions/36795819/…
@Patrickkx - 我冒昧地编辑了您询问哪个“更好”使用的位，因为它需要意见，这与 SO 无关。整个问题显然不仅仅是在寻找意见，所以最好只是删除那一点。显然，如果这与您的意图相反，请更正它。

标签： javascript webpack ecmascript-6 import lodash

【解决方案1】：

lodash 模块是一个汇总模块，它可以从其各个单独的模块（例如 lodash/pick）导入和重新导出。

所以：

import { pick } from 'lodash'; 加载完整的 lodash 模块，然后只导入其中的一个函数。
import pick from 'lodash/pick'; 仅加载 lodash/pick 模块并获取其默认导出 (pick)。

它们各自如何影响捆绑包的大小？

这取决于您的捆绑器可以在多大程度上进行 tree-shaking。如果 pick 是您使用的 lodash 的唯一部分，并且您的捆绑器可以解决这个问题，那么它应该大致相同。但是捆绑器在摇树的程度和质量方面各不相同。

它们是否导入完全相同的 lodash 部分？

将相同的东西导入到您的模块，但方式非常不同（见上文）。

他们比较快吗？

就运行时性能而言，它们应该大致相似，当然不用担心。

就捆绑时间而言，您的捆绑器要做的工作越多，所需的时间就越长；这包括弄清楚虽然你正在导入lodash，但你只使用pick。

如果您真的只需要pick，则第二种形式应该可以减少捆绑程序的工作量。

但就大小等而言，您可能应该尝试使用您的特定设置和整体代码，以确定哪个更适合您。

【讨论】：

大声笑即将发布答案，但您的答案更全面，涵盖了相同的点。但是从我的观点来看，我相信第二个会更快，这取决于您是捆绑商是否意识到您只是在导入pick，或者他是否意识到它不需要所有模块。但我在这方面的领域知识并不是最好的，所以你在这方面更有可能是正确的。
import {pick} from 'loadash' 将保持有效，即使 loadash 决定将 pick 移动到 tools/pick，因为 loadsh 会保留别名并且可以更新路径。
@JoeWarner 这里也一样！我什至用相同的格式发布了它。看来我得删帖了。
@sabithpocker - 这是一个有趣的观点。有什么真正的危险吗？
@JoeWarner 是的！有了 TJ 和我们一起做 SO，回答 JS 标签感觉就像是有竞争力的编码哈哈。