rel=modulepreload

基線 2023

新可用

自從 2023 年 9 月，此功能適用於最新裝置和瀏覽器版本。此功能可能不適用於舊裝置或瀏覽器。

modulepreload 關鍵字用於 rel 屬性，該屬性屬於 <link> 元素，它提供了一種宣告式方法來預先獲取 模組指令碼，解析和編譯它，並將它儲存在文件的模組對映中，以便以後執行。

預載入允許模組及其依賴項提前下載，並且還可以顯著減少總體下載和處理時間。這是因為它允許頁面並行獲取模組，而不是按順序獲取，因為每個模組都在處理和發現其依賴項。但是請注意，您不能只預載入所有內容！您選擇預載入的內容必須與其他操作保持平衡，否則這些操作可能會被餓死，從而對使用者體驗產生負面影響。

帶有rel="modulepreload"的連結類似於帶有rel="preload"的連結。主要區別在於，preload只是下載檔案並將其儲存在快取中，而modulepreload會獲取模組、解析和編譯它，並將結果放入模組對映中，以便可以執行它。

使用modulepreload時，獲取請求模式始終為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的事件在成功或失敗載入指定資源後立即觸發。如果自動獲取依賴項，則不會在主執行緒中觸發其他事件（儘管您可以在服務工作者或伺服器中監控其他請求）。

示例

考慮basic-modules示例（即時版本），在JavaScript 模組指南中介紹。

這具有如下所示的檔案結構，包括頂層模組main.js，它使用import語句靜態匯入兩個依賴模組modules/canvas.js和modules/square.js。

index.html
main.js
modules/
    canvas.js
    square.js

下面示例的 HTML 顯示瞭如何在<script>元素中獲取main.js。只有在main.js載入後，瀏覽器才會發現並獲取這兩個依賴模組。

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

下面的 HTML 更新了示例，以便對主檔案和每個依賴模組使用帶有rel="modulepreload"的<link>元素。這快得多，因為三個模組都在它們需要之前非同步並行開始下載。當main.js解析完並且它的依賴項已知時，它們已經獲取並下載完畢。

html
<!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" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>

    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

規範

規範
HTML 標準
# link-type-modulepreload

瀏覽器相容性

BCD 表只在瀏覽器中載入

另請參閱