javascript - "import { pick } from ' lodash' ;"and "import pick from 'lodash/pick' 之间的区别；"

Question

有什么区别

import { pick } from 'lodash';

和

import pick from 'lodash/pick';

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

它们各自如何影响 bundle 的大小？

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

它们比较快吗？

Answer 1

lodash 模块是一个roll-up 模块，它从其各种单独的模块(如 lodash/pick)导入和重新导出。

所以:

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

How does do they each affect the bundle size?

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

Do they import exactly the same parts of lodash?

将相同的东西导入到您的模块，但方式截然不同(见上文)。

Are they comparatively fast?

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

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

如果您真的只需要pick，第二种形式应该可以减少打包器的工作量。

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