I have some ponents in my vue project. I don't like import loader from '@/ponents/someComponent1/someComponent1.vue'; because it's a lot to write and I have to repeat it for every ponent. So I wrote an index.jsfor the ponents folder:

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

This will allow me to import multiple ponents in one line:

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

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.

I have some ponents in my vue project. I don't like import loader from '@/ponents/someComponent1/someComponent1.vue'; because it's a lot to write and I have to repeat it for every ponent. So I wrote an index.jsfor the ponents folder:

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

This will allow me to import multiple ponents in one line:

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

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.

• javascript
• performance
• module
• es6-modules

• Given that imports are resolved exactly once at startup, their performance does hardly matter. – Bergi Commented Oct 26, 2017 at 17:41

1 Answer 1

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).

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.

On the contrary, I would consider it a good practise to use such an index.js file if it keeps your modules more maintainable.