ES6模块：导出和导入性能差异

Question

我的vue项目中有一些组件。我不喜欢， import loader from '@/components/someComponent1/someComponent1.vue';因为要写很多东西，我必须对每个组件都重复一遍。所以我index.js为components文件夹写了一个：

export { default as someComponent1 } from './someComponent1/someComponent1.vue';
export { default as someComponent2 } from './someComponent2/someComponent2.vue';
...

这将允许我在一行中导入多个组件：

import { someComponent1, someComponent2 } from '@/components';

我的问题：index.js-ish方式是否可能比通常的进口方式慢（甚至是不良做法）？我想知道是因为上面的示例中的操作“加载”了整个导出的对象并对其进行了解构，而“普通”导入却不是这种情况。

Answer 1

不，它并不慢（当然不多，它必须再加载一个文件，而IO将花费大部分额外时间）。

导入始终会加载整个模块，创建所有导出的值，并解析导入的绑定。只使用一个还是所有导出的绑定都没关系。导入声明使用什么语法都没有关系。分辨率是否遍历附加index.js文件都没有关系，最后在运行时使用的引用完全相同。

相反，index.js如果这样的文件可以使您的模块更易于维护，我认为这是一个好习惯。