リソースヒント modulepreload
ESモジュールを先読みしてJavaScriptの起動を高速化します
「リソースヒント modulepreload」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
modulepreloadが存在する理由
ESモジュールは依存関係グラフを形成します。エントリーモジュールが別のモジュールをimportし、そのモジュールがさらに別のモジュールをimportします。何も対策をしないと、ツリーの各レベルは前のレベルの解析が終わってから初めて発見されるため、読み込みパフォーマンスを大きく損なう直列のウォーターフォールが発生します。
modulepreloadの動作
<link rel="modulepreload" href="/app.js">は、モジュールと、そのモジュールが推移的にimportするモジュールをすぐに並列で取得するようブラウザーに指示します。<script type="module">が実行される頃には、グラフ全体がすでにキャッシュされています。
preloadとの比較
preloadもファイルを並列で取得しますが、import文は認識しません。モジュールファイルをpreloadしても、その依存関係まではpreloadされません。modulepreloadはimportを自動的にたどるため、そこが本来の目的です。
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>配置場所
<head>内のできるだけ早い位置に配置してください。ブラウザーはすぐにpreloadリクエストを開始し、HTMLの解析を続けます。後でドキュメント内に対応する<script type="module">が現れる頃には、ファイルはすでにメモリ上にあります。
発見とグラフの探索
ブラウザーはpreloadされたモジュールを解析してimport文を探し、importされた各URLを再帰的に並列取得します。ユーザーはレベルごとに1回のラウンドトリップのコストを負担しますが、各レベル内では並列性を得られるため、クリティカルパスが大幅に短縮されます。
バンドラーとの併用
最新のバンドラー（Vite、Rollup、Webpack 5以降）は、コード分割されたチャンク用のmodulepreloadタグを自動的に出力します。手作業で構築するアプリケーションでは、モジュールの追加や削除に応じてリストが正確に保たれるよう、ビルド時にimportグラフから生成してください。
CrossOriginに関する考慮事項
クロスオリジンのモジュールをpreloadする場合は、crossorigin="anonymous"を含めてください。これにより、<script type="module">のデフォルトのfetchモードと一致し、CORSヘッダーなしで再取得されるのではなく、preload済みのコピーが再利用されます。
ブラウザーの対応状況
modulepreloadはChrome/Edge/Safariと、最近のFirefoxでサポートされています。古いFirefoxでは静かに無視されますが、モジュール自体は動作し、preloadのメリットだけが得られません。ポリフィルは不要です。最悪の場合でも、古いブラウザーで読み込みが少し遅くなるだけです。
グラフのサイズを制限する
何百ものモジュールをpreloadすると、ユーザーが実行しない可能性のあるコードに帯域幅を浪費します。深い階層で遅延読み込みされるモジュールではなく、ルートレベルのエントリーチャンクだけをpreloadしてください。使用頻度の低いコードパスにはprefetch（またはオンデマンドのimport）を利用してください。
他のヒントとの組み合わせ
同じhead内の画像やフォントには、自由に組み合わせて使用できます。サードパーティーCDNにはpreconnect、重要なフォントにはpreload、エントリーモジュールにはmodulepreload、次のページのアセットにはprefetchを使用してください。これらのヒントが互いに干渉することはありません。
検証
Networkパネルを確認してください。modulepreloadを使用すると、2番目のレベルのimportがエントリーとほぼ同時に開始される並列リクエストとして表示されます。使用しない場合は、親の解析が終わってから各リクエストが開始されるため、段階的に表示されます。
理解度チェック
同じモジュールファイルを通常のpreloadで読み込む場合と比べて、modulepreloadは何を行うのでしょうか。
まとめ
modulepreloadは、実行前にエントリーモジュールとそのimportを並列取得することで、ESモジュールのウォーターフォールを解消します。<head>内の早い位置に配置し、ビルドグラフから生成し、クロスオリジンのモジュールにはcrossoriginを設定してください。また、帯域幅の浪費を避けるため、対象をルートのエントリーポイントに限定してください。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「リソースヒント modulepreload」レッスンは無料ですか？
はい。「リソースヒント modulepreload」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「リソースヒント modulepreload」で何を学びますか？
ESモジュールを先読みしてJavaScriptの起動を高速化します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「リソースヒント modulepreload」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- async属性とdefer属性
- Preload、Prefetch、Preconnect
- 画像の遅延読み込み loading=lazy
- リソースヒント modulepreload