Modulepreloadタグジェネレーターとは
ModulepreloadはESモジュールスクリプト専用のプリロードです。標準のpreloadとは異なり、modulepreloadはモジュールの依存関係グラフを理解します。ViteやAstroの出力でよく使用されます。クロスオリジンモジュールには正しいcrossorigin属性が必要です。
クイックアンサー
Modulepreloadを使用して、ESモジュールの依存関係を必要になる前に投機的に取得、解析、コンパイルします。preloadと同様に機能しますが、JavaScriptモジュールスクリプト専用に設計されています。
Last updated: 2026-05-25
制限事項
- modulepreloadはESモジュールスクリプト（type='module'）にのみ有効です。クラシックスクリプトには適用できません。
- ブラウザサポートは標準のpreloadより遅れています。Firefoxは115以上、Safariは17.2以上でサポートされました。
- modulepreloadはモジュールを取得しますが、実行はしません。実行はモジュールスクリプトタグが検出されたときに行われます。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- モジュールスクリプトのパスまたはURLを入力します。
- モジュールが同一オリジンかクロスオリジンかを選択します。
- ツールが選択したオリジンタイプに応じて正しいcrossorigin属性を追加します。
- タグを他のモジュールスクリプトより前にページのheadにコピーします。
主な用途
- ViteでビルドされたJavaScriptエントリモジュールにmodulepreloadを追加する。
- ページ遷移を高速化するために共有ESモジュールチャンクをプリロードする。
- AstroやSvelteKitで構築された静的サイトのモジュール読み込みを最適化する。