ES6模块：导出和导入性能差异 [英] ES6 Modules: Exporting and importing performance differences
问题描述
我的vue项目中有一些组件。我不喜欢从'@ / components / someComponent1 / someComponent1.vue'导入加载器; 因为它要编写很多东西，我必须为每个组件重复它。所以我为组件文件夹写了 index.js ：
I have some components in my vue project. I don't like import loader from '@/components/someComponent1/someComponent1.vue'; because it's a lot to write and I have to repeat it for every component. So I wrote an index.jsfor the components folder:
export { default as someComponent1 } from './someComponent1/someComponent1.vue';
export { default as someComponent2 } from './someComponent2/someComponent2.vue';
...
这将允许我在一行中导入多个组件：
This will allow me to import multiple components in one line:
import { someComponent1, someComponent2 } from '@/components';
我的问题：是否有可能 index.js -ish-way比通常的进口更慢（甚至可能是不好的做法）？我想知道，因为在上面的示例中执行'加载'整个导出的对象并对其进行解构，而不是正常导入的情况。
My question: Is it possible that the index.js-ish-way is slower (and even maybe bad practice) than usual imports? I wonder because doing as in the example above 'loads' the whole exported object and destructures it, which isn't the case with 'normal' imports.
推荐答案
不，它不慢（不是很多，当然它必须再加载一个文件，而IO将占用大部分额外的时间）。
No, it's not slower (not by much, of course it has to load one more file, and the IO will take most of the extra time).
导入始终加载整个模块，创建所有导出的值，并解析导入的绑定。是否仅使用一个或所有导出的绑定并不重要。导入声明使用的语法无关紧要。分辨率是否通过附加的 index.js 文件甚至无关紧要，最后在运行时使用的引用完全相同。
An import always loads the whole module, creates all the exported values, and resolves the imported bindings. It doesn't matter whether only one or all the exported bindings are used. It doesn't matter what syntax the import declaration is using. It doesn't even matter whether the resolution goes through the additional index.js file or not, in the end the reference that is used at runtime is exactly the same.
相反，如果保留模块，我认为使用这样的 index.js 文件是一个好习惯。更易于维护。
On the contrary, I would consider it a good practise to use such an index.js file if it keeps your modules more maintainable.
这篇关于ES6模块：导出和导入性能差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
