ES6 Есть ли проблемы при импорте одного и того же компонента несколько раз через SPA?

Question

Справочная информация - я новичок в работе с ES6 и SPA (одностраничными приложениями) и ранее работал в основном с приложениями на основе PHP.

Создание SPA на основе Vue, в котором мы создаем повторно используемые компоненты и импортируем их, где это необходимо. Пару раз я написал код, который import (s) включает несколько компонентов, и один из этих компонентов, в свою очередь, импортирует компонент, который используется первым. Теперь проигнорируйте последнюю строку, и я попытаюсь объяснить это псевдокодом -

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

Теперь, когда основной компонент загружен, api-component-a.vue импортируется дважды (по крайней мере, я так думаю). Таким образом, путаница.

Об этом нужно беспокоиться?

Answer 1

Это работает, потому что он основан на nodejs require и это то, что вы можете сделать только потому, что вы компилируете свой js. Во время компиляции каждый модуль / компонент получает свой собственный IIFE, и import означает, что компоненты просто внедряются в другие модули / компоненты. Если вы используете vue cli или webpack, проблем с производительностью не будет, поскольку каждый модуль будет включен только один раз в окончательный скомпилированный код.

Answer 2

Повторное использование одного и того же общего модуля в нескольких местах - вот и весь смысл модулей.Независимо от того, как часто вы импортируете модуль, он загружается и оценивается только один раз.

Не о чем беспокоиться.