rel="modulepreload"
modulepreload 關鍵字，用於 <link> 元素的 rel 屬性，提供了一種宣告式的方式來預取（preemptively fetch）一個模組指令碼，對其進行解析和編譯，並將其儲存在文件的模組對映表中以供後續執行。
預載入（Preloading）允許模組及其依賴項提前下載，並且可以顯著減少整體下載和處理時間。這是因為它可以讓頁面並行獲取模組，而不是像每個模組被處理並發現其依賴項那樣順序獲取。但請注意，你不能只是預載入所有內容！你選擇預載入的內容必須與其他可能被餓死的（starved）操作相平衡，以免對使用者體驗產生不利影響。
帶有 rel="modulepreload" 的連結與帶有 rel="preload" 的連結類似。主要區別在於，preload 只是下載檔案並將其儲存在快取中，而 modulepreload 會獲取模組，對其進行解析和編譯，並將結果放入模組對映表中，使其準備好執行。
使用 modulepreload 時，fetch 請求模式始終為 cors，並且 crossorigin 屬性用於確定請求的憑證模式。如果 crossorigin 設定為 anonymous 或 ""（預設值），則憑證模式為 same-origin，使用者憑證（如 cookie 和身份驗證）僅隨 same-origin 請求傳送。如果 crossorigin 設定為 use-credentials，則憑證模式為 include，並且會隨同對同源和跨域請求傳送使用者憑證。
對於帶有 rel="modulepreload" 的連結，as 屬性是可選的，預設為 "script"。它可以設定為 "script" 或任何類似指令碼的目的地，例如 "audioworklet"、"paintworklet"、"serviceworker"、"sharedworker" 或 "worker"。如果使用了其他目的地，則會在元素上觸發一個名為 "error" 的 Event。
瀏覽器可能還會選擇自動獲取模組資源的任何依賴項。但請注意，這是瀏覽器特有的最佳化——確保所有瀏覽器都嘗試預載入模組依賴項的唯一方法是單獨指定它們！此外，名為 load 或 error 的事件會在指定資源載入成功或失敗後立即觸發。如果依賴項是自動獲取的，主執行緒不會觸發額外的事件（儘管你可能可以在 service worker 或伺服器上監控額外的請求）。
示例
請考慮 basic-modules 示例（即時版本），該示例在 JavaScript 模組指南中已介紹。
它具有如下所示的檔案結構，由頂層模組 main.js 組成，該模組使用 import 語句靜態匯入了兩個依賴模組 modules/canvas.js 和 modules/square.js。
index.html
main.js
modules/
canvas.js
square.js
下面的示例 HTML 顯示了 main.js 如何在一個 <script> 元素中獲取。只有在 main.js 載入完成後，瀏覽器才會發現並獲取兩個依賴模組。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Basic JavaScript module example</title>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
下面的 HTML 更新了示例，為主要檔案和每個依賴模組使用了帶有 rel="modulepreload" 的 <link> 元素。這要快得多，因為三個模組都在它們被需要之前非同步且並行地開始下載。當 main.js 被解析並且其依賴項已知時，它們已經完成獲取和下載。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Basic JavaScript module example</title>
<link rel="modulepreload" href="main.js" />
<link rel="modulepreload" href="modules/canvas.js" />
<link rel="modulepreload" href="modules/square.js" />
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
規範
| 規範 |
|---|
| HTML # link-type-modulepreload |
瀏覽器相容性
載入中…
另見
- 推測性載入（Speculative loading），用於比較
<link rel="modulepreload">和其他類似的效能改進功能。 - 在 web.dev 上預載入模組