このページは Cloud Translation API によって翻訳されました。

モジュールをプリロードする

Sérgio Gomes

モジュールベース開発には、キャッシュ保存の面、ユーザーへの配信に必要なバイト数を削減できます。コードをより細かく設定することで、アプリの重要なコードを優先します

しかし、モジュールの依存関係があると読み込みの問題が生じます。たとえば、ブラウザでモジュールが依存関係を認識する前に、モジュールが読み込まれるのを待つ。片道依存関係をプリロードしてブラウザがすべての情報を接続をビジー状態に保つことができます。

`<link rel="preload">`

<link rel="preload"> 事前に宣言的にリソースをリクエストする方法ですが、ブラウザが必要とする前に行われます。

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

これは、非表示になりがちなフォントなどのリソースで特に効果を発揮します。複数階層ある場合もありますこの場合、ブラウザは何度か往復を待たなければ大きなフォントファイルを取得する（その時間を利用してダウンロードを開始できた可能性があるとき）接続帯域幅を最大限に活用できます

<link rel="preload"> とそれに対応する HTTP ヘッダーは、必要になる重要なファイルをブラウザに直接通知する方法現在のナビゲーションの一部として日付として表示されますブラウザでプリロードが確認されると、そのリソースで優先ダウンロードされるようにするため、実際に必要になるまでに、一部が取得されている場合もありますただし、モジュールでは動作しません。

`<link rel="preload">` がモジュールで動作しないのはなぜですか？

ここで問題が生じます。Google Cloud には、いくつかの認証情報モードがキャッシュヒットを得るには、一致していないとリソースを 2 回取得する必要があります。言うまでもなく、二重取得は不適切です。その理由は、ユーザーの帯域幅が浪費され、正当な理由もなくユーザーが待機する時間が長くなる。

<script> タグと <link> タグの場合は、crossorigin で認証情報モードを設定できます。属性です。ただし、値のない <script type="module"> が crossorigin 属性は、存在しない omit の認証情報モードを示しています（<link rel="preload">）つまり <script> と <link> の両方の crossorigin 属性を 1 つに変更します簡単には取得できないかもしれませんが他のモジュールに依存します。

また、ファイルの取得は、実際にコードを実行するための最初のステップにすぎません。まず、ブラウザがデータを解析してコンパイルする必要があります。次のことが理想的です。これも事前に実行しておかなければなりません。これにより、モジュールが必要になったときにコードが実行する準備が整いましたただし、V8（Chrome の JavaScript エンジン）はモジュールの解析とコンパイルを行います。他の JavaScript とは異なります。<link rel="preload"> は次のことをしない: 読み込まれるファイルがモジュールであることを示す方法を示すため、ファイルを読み込んでキャッシュに保存しますモジュールを使用してスクリプトが読み込まれたら、 <script type="module"> タグ（または別のモジュールによって読み込まれる場合）を指定すると、ブラウザはコードを JavaScript モジュールとしてコンパイルします。

では、`<link rel="modulepreload">` はモジュールの `<link rel="preload">` だけですか？

はい、あります。モジュールをプリロードするために特定の link タイプを使用すると、次のようになります。使用する認証情報モードを気にせずにシンプルな HTML を記述できます「機能します。

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

プリロードする対象がモジュールであることをブラウザが認識できるようになったため、取得が完了したらすぐにモジュールを解析し、実行されたままになります。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

では、モジュールとどうでしょうか。

おもしろいことね！確かにこの記事では取り上げられていない部分があります。それは再帰です。

<link rel="modulepreload"> の仕様では、実際には依存関係ツリーも参照できます。ブラウザはできます。

モジュールとそのモジュールをプリロードする最適なクロスブラウザソリューションは、次のうちどれですか。依存関係ツリーを作成します。アプリを実行するには完全な依存関係ツリーが必要になるからです。

依存関係を再帰的にプリロードすることを選択したブラウザには、堅牢な重複排除機能が備わっている必要があるそのため一般的には、モジュールとフラットなリストを宣言し、同じモジュールを 2 回取得しないようブラウザを信頼します。

<head>
  <!-- dog.js imports dog-head.js, which in turn imports
       dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
  <link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
  <link rel="modulepreload" href="dog-head-mouth.mjs">
  <link rel="modulepreload" href="dog-head.mjs">
  <link rel="modulepreload" href="dog.mjs">
</head>