ES 2020でダイナミックな輸入を使う方法

私のための最もエキサイティングな新機能の一つは、ES2020で動的にファイルをインポートする機能です.これは、ファイルの上部にあるすべての潜在的に必要なファイルをインポートするのではなく、必要に応じてファイルをインポートすることができます.

輸入
インポートはES 2015で導入されました、それから、我々は我々のコードで我々のモジュールをネイティブにロードすることができました.モジュールを管理クラスに整理するエクスポートクラスや関数に分割できます.しかし、JavaScriptエンジンは、コードを実行する前に最初にすべてのインポートを解決する必要がありました.

なぜダイナミックインポートを使うのか?
開発者として、我々は常に可能な限りの負荷時間を減らすことを目指している必要があります.必要ないかもしれませんが、コードを最適化することは常に良い感じです.動的なインポートを使用して、我々は高速アプリを燃やすようになる大きな束をインポートを避けることができます.動的インポートも、コンポーネントが最初に読み込まれたときにインポートするモジュールが存在しない状況をナビゲートできます.この方法では、コードをいくつかの行だけでファイルをロードするロジックを設定できます.

どうやって使うの?
以下はES 2015で導入された古いシステムの例です.余分なバンドルツールがなければ、型属性を特にモジュールに設定する必要があります.

<script type="module">
  import add from './add.js';

  add(7, 4); // returns 11
</script>

ES 2020では、関数としてimportキーワードを使用することができます.import ()がスクリプトから動作するため、現在型を設定する必要はありません.

<!-- No need to typeset -->
<script>
  import('./add.js')
    .then(module => module.default(3, 7)) //returns 10
    .catch(error => // log error here);
</script>

本当に一般的なユースケースのシナリオは、モジュールをインポートする必要がない場合があります.例えば、ボタンプレスに基づいた超柔軟読み込みページモジュールを可能にします.

document.getElementById("button")
.addEventListener("click", async () => {
    const { nextPage } = await import("./NextPage.js");
    nextPage();
});

今、ユーザーエクスペリエンスだけでいくつかの簡単なリファクタとスナップロードの負荷で改善されます.ES 2020とダイナミックなインポートについてもっと読みたいならば、MDN docsをチェックしてください.
もともとhttps://www.josephc.how/dynamic-imports-es2020/