“rel=modulepreload”｜“rel”属性｜“link”要素:外部リソースと関連付ける｜HTML－havin' a coffee break

＃

“rel="modulepreload"”

リンクの種類	外部リソースへのリンク
“body-ok”	Yes

“rel="modulepreload"”が指定された“link”要素は先行して読み込むべきモジュールスクリプトを示します。

“rel="preload"”でも先行して読み込むべきリソースを示すことができますが、“rel="preload"”では読み込まれたリソースがキャッシュに保存されるのに対して“rel="modulepreload"”では読み込まれたモジュールスクリプトはモジュールマップに追加されるなど、ブラウザにモジュールスクリプトにより適した読み込み動作を求めます。

ブラウザは指定されたモジュールスクリプトと依存関係にあるスクリプトをすべて読み込むことができます。ただし、これは必須ではないのですべてのスクリプトをそれぞれ“link”要素で事前読み込みするよう指定しておくことが推奨されます。

この値は“body-ok”であり、“rel”属性の値に他に“body-ok”でない値が含まれない場合は“link”要素は“body”要素の中にも配置できます。

サンプルコード



<link rel="modulepreload" href="sample-module.js">

<link rel="modulepreload" href="sample-script-1.js">

<link rel="modulepreload" href="sample-script-2.js">

<link rel="modulepreload" href="sample-script-3.js">

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
rel=""	文書と外部リソースの関係	modulepreload	リンク先のモジュールスクリプトを先行して読み込む
rel=""	文書と外部リソースの関係	リンクタイプ	文書と外部リソースの関係
href=""	文書と関連付ける外部リソース	URL	先行して読み込むべきモジュールスクリプトのURL
任意属性
グローバル属性
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media=""	外部リソースが対象とするメディア	メディアクエリ	外部リソースが対象とするメディア条件
integrity=""	外部リソースの整合性を確認	ハッシュ値	BASE64でエンコードした外部リソースのハッシュ値
hreflang=""	外部リソースが記述されている言語	言語コード	外部リソースが記述されている言語
type=""	外部リソースのデータの種類	MIMEタイプ	外部リソースのMIMEタイプ
referrerpolicy=""	リファラーポリシーを指定	リファラーポリシー	リファラーポリシーを指定
fetchpriority=""	外部リソースの読み込み時の優先度を指定する	high	同じ種類の外部リソースと比較して取得の優先度が高いことを示す
		low	同じ種類の外部リソースと比較して取得の優先度が低いことを示す
		auto	同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す
title=""	外部リソースに補足情報を付ける	テキスト	補足情報