<link rel="modulepreload">

modulepreload キーワードを <link> 要素の rel 属性に指定すると、モジュールスクリプトとその依存関係を先取りして取得し、後で実行するために文書のモジュールマップに保存するための宣言的な方法を提供します。

事前読み込みされたモジュールとその依存関係を早期にダウンロードすることができ、全体のダウンロードと処理時間を大幅に縮小することができます。 これは、各モジュールが処理され、依存関係が発見されたときに、ページがモジュールを並列に取得することを可能にするからです。 しかし、すべてを事前読み込みさせることはできないことに注意してください。 事前読み込みされたものは、使い勝手に悪影響を与えるかもしれない他の処理とのバランスを取る必要があります。

rel="modulepreload" を持つリンクは rel="preload" を持つリンクと似ています。 主な違いは、 preload はファイルをダウンロードしてキャッシュに格納するだけですが、 modulepreload はモジュールを取得し、解釈してコンパイルし、その結果をモジュールマップに格納して実行できるようにします。

modulepreload を使用する場合、フェッチリクエストモードは常に cors であり、 crossorigin プロパティを使用してリクエストの資格情報モードを決定します。 crossorigin が anonymous または "" (既定) に設定されていた場合、資格情報モードは same-origin となり、Cookie や認証のようなユーザー資格情報は same-origin のリクエストに対してのみ送信されます。 crossorigin が use-credentials に設定されている場合、資格情報モードは include となり、オリジン内・オリジン間の両方のリクエストに対してユーザー資格情報が送信されます。

as 属性は rel="modulepreload" のリンクではオプションで、 "script" が既定です。 "script" または "audioworklet"、"paintworklet"、"serviceworker"、"sharedworker"、"worker" などのスクリプトに似た出力先に設定することができます。 他の出力先が使用された場合、 "error" という名前の Event が要素に発生します。

ブラウザーはさらに、モジュールリソースの依存関係を自動的に取得することを選ぶ可能性があります。 しかし、これはブラウザー独自の最適化であることに注意してください。すべてのブラウザーでモジュールの依存関係を確実に事前読み込みさせる唯一の手法は、個別に指定することです！ さらに、load または error という名前のイベントが、指定されたリソースの読み込みに成功または失敗した直後に発生します。 依存関係が自動的に取得される場合、メインスレッドでは追加のイベントは発生しません （サービスワーカーやサーバーで追加のリクエストを監視することはできます）。