ES6-Module: Exportieren und Importieren von Leistungsunterschieden

Question

Ich habe einige Komponenten in meinem vue-Projekt. Ich mag nicht import loader from '@/components/someComponent1/someComponent1.vue';, weil es viel zu schreiben ist und ich es für jede Komponente wiederholen muss. Also schrieb ich ein index.js für die components Ordner:

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

Dies ermöglicht es mir mehrere Komponenten in einer Zeile zu importieren:

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

Meine Frage: Ist es möglich, dass der index.js -ish-Weg langsamer (und vielleicht sogar schlechte Praxis) als normale Importe? Ich frage mich, ob das Ausführen des gesamten exportierten Objekts wie im obigen Beispiel "geladen" wird und es zerstört, was bei "normalen" Importen nicht der Fall ist.

Answer 1

Nein, es ist nicht langsamer (nicht viel, es muss natürlich eine weitere Datei laden, und die IO wird den größten Teil der zusätzlichen Zeit nehmen).

Ein Import immer lädt das gesamte Modul, erstellt alle exportierten Werte und löst die importierten Bindungen auf. Es spielt keine Rolle, ob nur eine oder alle exportierten Bindungen verwendet werden. Es spielt keine Rolle, welche Syntax die Importdeklaration verwendet. Es spielt keine Rolle, ob die Auflösung die zusätzliche Datei index.js durchläuft oder nicht, am Ende ist die Referenz, die zur Laufzeit verwendet wird, genau die gleiche.

Im Gegenteil, ich würde es als eine gute Praxis betrachten, eine solche index.js Datei zu verwenden, wenn es Ihre Module aufrechterhaltbar hält.