如果使用多个导入而不是一个命名导入，是否会产生性能成本答案

【问题标题】：Is there a performance cost if use multiple imports instead one named import如果使用多个导入而不是一个命名导入，是否会产生性能成本
【发布时间】：2020-06-19 09:38:04
【问题描述】：

我想知道如果我们进行多次导入是否会产生性能成本，如下所示：

import { wrapper } from './components/wrapper';
import { error } from './components/error';
import { products } from './components/products';

在每个组件文件夹中，我都有一个 index.js 并将其导出为命名，如下所示：

export { default as wrapper } from '.wrapper';

相比：

将所有文件作为命名导入从同一来源导入，如下所示：

import {
   wrapper,
   error,
   products,
 } from './components';

在components 文件夹中，我有一个索引，用于收集和导出所有文件，如下所示：

export { wrapper } from '...';
export { error } from '...';
export { products } from '...';

【问题讨论】：

我不了解性能，但当我最终不得不对多个文件重复常见导入时，我会这样做。更容易改变一个地方而不是 10+
这取决于你是否捆绑。例如。 Webpack 等，或者您正在使用浏览器的import？，如果您使用浏览器import，那么使用另一个名为./components 的文件将是对服务器的另一个获取，因此理论上可能会更慢。我说的是理论，因为使用 http2/spdy 实际上也可以抵消这种影响。
你为什么还要关心性能？
@JonasWilms 每个人都应该关心性能。但我不确定这就是你的意思，而是“不要预先优化”。

标签： javascript reactjs ecmascript-6

【解决方案1】：

根据 ES262 规范，import 和 export 语句仅提供有关模块之间对引擎的依赖关系的信息。如何模块最终被实际加载是由引擎决定的（尽管有一些限制）。因此，从源导入与导入再导出之间是否真的存在差异取决于环境。

任何差异都可能无关紧要。选择最适合您的。

【讨论】：

【解决方案2】：

我很喜欢这种方法。我喜欢将一些组件拆分到文件夹中，并且只将我想要的内容暴露给我的应用程序的其余部分。我真的不认为这会影响开发人员的性能。（显然，prod 完全没有区别，因为整个项目都打包在一个文件中）

【讨论】：

不一定正确，减小包大小可以提高性能，如下所述：twitter.com/iamakulov/status/1331551351214645251?lang=en
正如很多人在他的推文上评论的那样，这应该没有什么区别，因为没有理由不能摇动树。但主要问题是多个导入与单个导入的区别，我相信这完全没有区别。