ES6モジュール：パフォーマンスの差異のエクスポートとインポート

Question

私のvueプロジェクトにはいくつかのコンポーネントがあります。私はimport loader from '@/components/someComponent1/someComponent1.vue';が好きではありません。なぜなら、書くのが大変で、すべてのコンポーネントでそれを繰り返さなければならないからです。だから私はcomponentsフォルダのindex.jsを書いた：

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

これは私が1行に複数のコンポーネントをインポートできるようになります：

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

私の質問：それはindex.js -ish-方法があることは可能です通常の輸入よりも遅い（そしておそらく悪い習慣）？上記の例のようにすると、エクスポートされたオブジェクト全体が「読み込まれ」、そのオブジェクトが破棄されるため、「通常の」インポートではそうではありません。

Answer 1

いいえ、それほど遅くはありません（あまり多くのファイルをロードする必要はなく、余分な時間をIOに費やすことになります）。

インポート常には、モジュール全体をロードし、エクスポートされたすべての値を作成し、インポートされたバインディングを解決します。 1つまたはすべてのエクスポートされたバインディングのみが使用されるかどうかは関係ありません。インポート宣言がどの構文を使用しているかは関係ありません。解像度が追加のindex.jsファイルを通過するかどうかは関係なく、実行時に使用される参照はまったく同じです。

逆に、このようなindex.jsファイルを使用すると、モジュールをより保守性のあるものにするとよいでしょう。