モジュールベース開発には、キャッシュ保存の面、 ユーザーへの配信に必要なバイト数を削減できます。 コードをより細かく設定することで、 アプリの重要なコードを優先します
しかし、モジュールの依存関係があると読み込みの問題が生じます。たとえば、ブラウザで モジュールが依存関係を認識する前に、モジュールが読み込まれるのを待つ。片道 依存関係をプリロードしてブラウザがすべての情報を 接続をビジー状態に保つことができます。
<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>
モジュールをプリロードするとパフォーマンスが向上しますか?
プリロードでは、ブラウザに何を伝えるかを伝えることで、帯域幅の使用量を最大化できます。 長い往復で何もせずにつながれることがないように、フェッチする必要があります。 モジュールをテストして、パフォーマンスの問題の原因が プリロードのフラットリストを作成すると便利です。
ただし、モジュールのパフォーマンスはまだ改善中ですので、 デベロッパー ツールを使用して、アプリで何が起こっているのか詳しく調べることができます。 その間に、アプリケーションをいくつかのチャンクにバンドルすることを検討してください。生成 AI には、 現在進行中のモジュール作業は Chrome で進められています。 よくやった休息はやっぱりね!