<link rel="modulepreload">
link rel="modulepreload" は ES モジュールとその依存関係を事前にダウンロード・パースし、モジュール読み込みのパフォーマンスを向上させます。
概要
link rel="modulepreload" は ES モジュールとその依存関係を事前にダウンロード・パースし、モジュール読み込みのパフォーマンスを向上させます。
対応ブラウザ
デスクトップ
Chrome 66+
Edge 79+
Safari 17+
Firefox 115+
モバイル
Chrome Android 66+
Safari iOS 17+
Firefox Android 115+
基本構文
HTML
<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/utils.js">
<script type="module" src="/js/app.js"></script>実務での使いどころ
-
<link rel="modulepreload"> の活用
modulepreload。ESモジュールを事前読み込みするリソースヒント。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。