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

Question

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

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

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

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

我的问题：index.js-ish-way 是否可能比通常的导入慢（甚至可能是不好的做法）？我想知道，因为在上面的示例中这样做会“加载”整个导出的对象并对其进行解构，而“正常”导入的情况并非如此。

Answer 1

不，它并不慢（不会慢很多，当然它必须再加载一个文件，而 IO 会占用大部分额外的时间）。

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

相反，我认为使用这样的index.js 文件是一种很好的做法，如果它可以使您的模块更易于维护。