ES6 Modules: Exporting and importing performance differences

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';

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.

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.