本頁面由 Cloud Translation API 翻譯而成。

預先載入模組

Sérgio Gomes

模組式開發在可快取性方面帶來一些實際優勢有助於減少您要運送給使用者的位元組數。程式碼越精細，也有助於載入故事以便優先處理應用程式中的重要程式碼

然而，模組依附元件會造成載入問題，因為瀏覽器需要等模組載入後才發現其依附元件為何。單程您只要預先載入依附元件，瀏覽器就能知道並保持連線忙碌狀態。

`<link rel="preload">`

<link rel="preload">敬上可讓您透過宣告式要求資源以便瀏覽器需要這些圖片

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

瀏覽器支援

資料來源

這個方式特別適合用在經常隱藏的字型等資源上但有時有幾個層級會很深在這種情況下，瀏覽器我們就必須等多次往返行程在可能利用該時間開始下載時，擷取大型字型檔案並善用完整的連線頻寬。

<link rel="preload"> 及其對應的 HTTP 標頭都提供簡單的宣告式可讓瀏覽器立即瞭解需要的重要檔案只要在目前導覽中就能查看這些元件當瀏覽器看到預先載入網頁時，會先優先下載資源，到了實際需要時或部分參數但不適用於模組。

為什麼 `<link rel="preload">` 不適用於模組？

這一切都變得不容易您可以運用多種憑證模式但為了在快取中找到成功擷取資源兩次不用說，重複擷取是糟糕的做法，因為浪費使用者的頻寬並讓他們因無理由地等候。

針對 <script> 和 <link> 標記，您可以使用 crossorigin 設定憑證模式屬性。然而，結果發現 <script type="module"> 沒有 crossorigin 屬性表示 omit 的憑證模式，但不存在 <link rel="preload">。這代表你必須將 <script> 和 <link> 中的 crossorigin 屬性變更為一而且如果只是為了執行嘗試預先載入是其他模組的依附元件。

此外，擷取檔案只是實際執行程式碼的第一步。首先，瀏覽器必須剖析及編譯。理想情況下這應該也會提前執行，這樣在需要模組時，程式碼就會是準備執行不過，V8 (Chrome 的 JavaScript 引擎) 會剖析並編譯模組與其他 JavaScript 不同<link rel="preload"> 並未能以任何方式指出載入的檔案是模組，因此所有瀏覽器就是載入檔案並將其放到快取中使用 <script type="module"> 標記 (或由其他模組載入)，瀏覽器會剖析並將程式碼編譯為 JavaScript 模組。

現在，`<link rel="modulepreload">` 只有模組的 `<link rel="preload">` 嗎？

簡單來說，沒錯。只要讓預先載入模組專用的 link 類型，編寫簡單的 HTML 程式碼，不必擔心所使用的憑證模式。維持預設運作狀態

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

由於瀏覽器現在知道您要預先載入的內容是模組，因此可以聰明擷取完畢後，盡快剖析及編譯並編譯，不必等待直到解碼器執行為止

瀏覽器支援

資料來源

但關於「模組」依附元件？

你應該問個真好！真正的確是這篇文章無法涵蓋的事情：週期性。

<link rel="modulepreload"> 規格實際上允許選擇性載入要求的模組，但所有依附元件樹狀結構。瀏覽器但他們可以

那麼，哪一個跨瀏覽器解決方案最適合預先載入模組及其相關資訊因為您需要完整的依附元件樹狀結構才能執行應用程式？

選擇以遞迴方式預先載入依附元件的瀏覽器應具備強大的簡化功能因此一般而言，最佳做法是宣告模組和平面清單並信任瀏覽器不要重複擷取相同的模組。

<head>
  <!-- dog.js imports dog-head.js, which in turn imports
       dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
  <link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
  <link rel="modulepreload" href="dog-head-mouth.mjs">
  <link rel="modulepreload" href="dog-head.mjs">
  <link rel="modulepreload" href="dog.mjs">
</head>