ES6 Do importing same component multiple times across an SPA have performance issues?

Question

Background - Am new to working with ES6 & SPAs (Single Page Applications) and have previously worked mainly on PHP based applications.

Creating a Vue based SPA and in it we create re-usable components and import them wherever needed. A couple of times now, I've written code that import(s) a few components and one of those components in-turn imports a component that is used by the first one. Now ignore the last line and I'll try to explain this with pseudocode -

****
File name: main-component.vue
****

...
import compA from sub-component-a.vue
import compB from sub-component-b.vue
import apiCompA from api-component-a.vue
...

****
File name: sub-component-a.vue
****

...
import compC from sub-component-c.vue
import apiCompA from api-component-a.vue
...

Now when the main component is loaded api-component-a.vue is imported twice (atleast that's what I think). Thus the confusion.

Is this something to be concerned about?

Answer 1

This is working because it is based on nodejs require and is something you can do just because you are compiling your js. During compilation every module/component will get it's own IIFE and import means components are simply injected into other modules/components. There won't be any performance issues if you use vue cli or webpack, since every module will only be included one time in the final compiled code.

Answer 2

Reusing the same shared module in multiple places is the whole point of modules. No matter how often you import a module, it is only loaded and evaluated once.

There is nothing to be concerned about.