从“lib”导入 {fn1} 与从“lib”导入 fn1答案

【问题标题】：import {fn1} from 'lib' vs import fn1 from 'lib'从“lib”导入 {fn1} 与从“lib”导入 fn1
【发布时间】：2019-11-06 18:53:22
【问题描述】：

我正在从 lodash 导入一些函数，我的同事告诉我，单独导入每个函数比将它们作为一个组导入更好。

当前方法：

import {fn1, fn2, fn3} from 'lodash';

首选方法：

import fn1 from 'lodash/fn1';
import fn2 from 'lodash/fn2';
import fn3 from 'lodash/fn3';

她的理由是后者导入的代码更少，因为它不会导入整个 lodash 库。

是这样吗？

【问题讨论】：

我想你误会了：首选方法是import fn1 from 'lodash/fn1'; import fn2 from 'lodash/fn2'; import fn3 from 'lodash/fn3';
谢谢。更改了问题以反映您的评论。

【解决方案1】：

您想要的（以及首选的）称为tree shaking：

摇树是一个过程在捆绑过程中删除未使用的代码。

执行此操作并利用摇树的正确方法是：

import foo from 'lodash/foo' // <-- only import `foo`

这不会摇树：

import { foo } from 'lodash'

也不会，显然是这样的：

import _ from 'lodash'

在Lodash v4 中实现了对这种语法的支持。

您可以阅读more here

【讨论】：

【解决方案2】：

根据我能找到的来源，import x from y; 从y 导入默认导出，在您的文件中将其称为x。

所以您首选的方法是导入默认导出 3 次，使用 3 个不同的变量名...

首选方法在生产中有效吗？

来源：

【讨论】：

还有this post（带有点击诱饵标题）也详细介绍了每种方法和基准的优缺点。根据这篇文章中提供的证据，如果您对折衷感到满意（js 文件中的长导入块），则似乎可以通过逐个导入模块来获得大小/性能优势。跨度>

【解决方案3】：

我确实相信import {fn1, fn2, fn3} from 'lodash'; 是导入不同导出模块的正确方法，但是，我认为使用这种方式可能会更好

    import {
      fn1, 
      fn2, 
      fn3
    } from 'lodash';

因为如果不再需要，删除它们更容易

【讨论】：