"import { pick } from 'lodash';" 和 "import pick from 'lodash/pick';" 的区别是什么？

Question

什么是区别？

import { pick } from 'lodash';

并且

import pick from 'lodash/pick';

请注意第二个引用的是'lodash/pick'而不仅仅是'lodash'。

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

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

它们在比较速度方面如何？

- Patrickkx

---

请注意：虽然"When should I use curly braces for ES6 import?"与此相关，但请注意上面问题中的模块规范符号是'lodash'和'lodash/pick'。例如，从不同的位置导入。 - T.J. Crowder

第二个仅导入该函数，另一个导入库并提取pick。 - Joe Warner

有点忘记在我上面的评论中放链接了：https://dev59.com/jVoV5IYBdhLWcg3wCq8n - T.J. Crowder

@Patrickkx - 我冒昧地编辑了你询问哪个更好使用的部分，因为这需要观点，而这在SO上是不相关的。整个问题显然不仅仅是寻求意见，所以最好删除那一部分。如果这与您的意图相反，请纠正它。 - T.J. Crowder

Answer 1

lodash模块是一个“合并模块”，它从各个单独的模块中导入和重新导出，比如lodash/pick。

所以：

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

它们对捆绑包大小有何影响？

这取决于您的捆绑器能够进行多少程度的摇树优化。如果pick是您使用的lodash的唯一部分，并且您的捆绑器可以找出这一点，那么它们应该差不多。但是捆绑器在进行摇树优化的程度和质量上有所不同。

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

它们将相同的内容导入到您的模块中，但方式非常不同（见上文）。

它们在性能方面如何比较？

就运行时性能而言，它们应该大致相似，肯定没有什么可担心的。

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

如果你真的只需要pick，第二种形式应该对捆绑器来说更少工作量。

但就大小等方面而言，你应该根据你的具体设置和整体代码进行实验，找出哪种方式对你来说更好。

- T.J. Crowder

---

哈哈，我正准备发表一个答案，但你的回答更全面，涵盖了相同的要点。但从我的角度来看，我认为第二个会更快，这取决于你的打包程序是否意识到你只导入了 pick，或者它是否意识到不需要整个模块。但是我在这方面的领域知识不是最好的，所以你更有可能是正确的。 - Joe Warner

即使loadash将pick移动到tools/pick，import {pick} from 'loadash'仍然有效，因为loadsh保留了别名，并且路径可以更新。 - sabithpocker

@JoeWarner 我也是！我甚至发布了相同格式的帖子。看来我得删除我的帖子。 - Anand Undavia

@sabithpocker - 这是一个有趣的观点。真的有这样的危险吗？ - T.J. Crowder

除了重新散列导入路径以适应这样的升级之外，并没有真正的危险。对于已经稳定的库，不应该发生这种情况。 - sabithpocker

@JoeWarner 是啊！有TJ在Stack Overflow上和我们一起回答JS标签的问题，感觉就像是竞技编程一样。 - Anand Undavia