Handling paths to imported modules using webpack?

Question

JavaScript

Hello.
Suppose we have a directory structure like this:

components
    component1
        Component1.vue
    component2
        Component2.vue
    component3
        Component3.vue
    index.js
app.js

./components/index.js says something like this:

export { default as Component1 } from './component1/Component1.vue';
export { default as Component2 } from './component2/Component2.vue';
export { default as Component3 } from './component3/Component3.vue';

In other words, index.js is like a single entry point where all components are simply re-exported.

Suppose I need Component1 in Component2.
I import it directly with a relative path relative to Component2.

// File ./components/component2/Component2.vue

import Component1 from '../component1/Component1.vue';

And in ./app.js, let's say I need both Component1 and Component2.
But I will import them through our ./components/index.js.

// File ./app.js

import { Component1, Component2 } from './components/index.js';

How many times will Component1 be loaded as a result?
We import it twice and in different ways.
Or is webpack smart enough to handle cases like this?

UPDATE

I checked the variant using only index.js, and in dev and in pro builds, the final build size does not change. From which I conclude that webpack is still smart enough.
But is there any difference at all? Maybe the option from the example is not recommended for some reason, or something else?

Thank you.

Answer 1

If the assembly has not increased, it means that there are no problems at the machine level. Although it is necessary to look at the performance in the dev tools in more detail. Webpack is pretty smart stuff. And the developers of webpack are also pretty bossy uncles. Not for nothing webpack uses Vue-cli.

check 'by hand'

Попробуйте собрать минимальную, почти пустую, сборку с импортом объектов и намутить что-то с импортами. А потом посмотреть на собранный файл в дев моде. Сразу станет понятно, что там да как.

But there is another level. Almost more important than the machine. Namely, human.
It is important that the programmer who will be looking at your code for the first time (it could be you in a week :D ) doesn't get confused. So that one glance is enough to understand what is happening, and I didn’t have to climb index.js for ten minutes and look for whether such and such a module is available to me from here or not.