2つのインポート間でメモリとパフォーマンスに違いがあるかどうか疑問に思いました。
ノードモジュールにlodashがある場合、インポートに関係なく、とにかくすべてのファイルをコンパイルしますか？
理論的にはimport、の仕様に基づいて、はい、違いがあるはずです。
この仕様ではindexOf()、lodashモジュールがES2015モジュールとして記述されている場合、提供に必要なもののみをロードするために、名前付きインポートの静的分析を使用する準拠した最適化が可能です。
ES2015モジュールで静的分析を実行するときに解決する方法への参照を保持するImportEntryレコードを作成しimport、関連するもののみexportが評価されるようにします。
実際には、これはそれほど単純ではなく、現在ネイティブ実装がないため、BabelのようなトランスパイラーはES2015import構文をCommonJSの同等の機能に変換します。
残念ながら、この機能的に同等の方法では、モジュール全体を評価する必要があります。これは、完全に評価されるまでそのエクスポートがわからないためです。
ES2015仕様が必要とする理由であるimportとexport静的解析をするためのコードを評価する際に、ファイルの部分は安全に省略することができるかを決定することによって最適化するJavaScriptエンジンを可能にするように、最上位レベルの範囲内にあることをexport。
一方、RollupやWebpackのような非ネイティブのバンドラーは、ツリーシェイクを実行importし、バンドル内のモジュールに参照されていないデッドコードのセクションを削除するために静的分析を実行します。この最適化はimport/の使用とは無関係ですが、グロブスターの代わりにexport名前付きを使用するとimports、これらのバンドラー内でより簡単で最適な静的分析を実行でき、最終的には将来リリースされるネイティブ実装を使用できます。
理論的には違いはありますが、実際には、ネイティブ実装がimport/exportで利用可能になるまで、または実際の構文と仕様に関係なく静的分析とツリーシェーキングを実行するバンドラーを使用しない限り、違いはありません。
いずれの場合も、名前付きインポートを使用することをお勧めします。これにより、使用している環境に関係なく、可能な最適化を実行できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加