注意事項

基於 React 的框架通常會為您處理資源加載，因此您可能不必自行調用此 API。詳情請參閱您框架的文件。開始新的 React 專案

preload 允許您預先擷取預期將使用的資源，例如樣式表、字體或外部腳本。

preload("https://example.com/font.woff2", {as: "font"});

參考

preload(href, options)

要預載資源，請從 react-dom 調用 preload 函式。

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

請參閱以下更多範例。

preload 函式向瀏覽器提示它應該開始下載指定的資源，這可以節省時間。

參數

  • href：一個字串。您要下載的資源的 URL。
  • options：一個物件。它包含以下屬性
    • as：一個必要的字串。資源類型。其可能的值為 audio、document、embed、fetch、font、image、object、script、style、track、video、worker。
    • crossOrigin: 一個字串。要使用的 CORS 政策。可能的值為 anonymous 和 use-credentials。當 as 設定為 "fetch" 時，這是必需的。
    • referrerPolicy：一個字串。擷取資源時要傳送的 Referrer 標頭。可能的值為 no-referrer-when-downgrade（預設值）、no-referrer、origin、origin-when-cross-origin 和 unsafe-url。
    • integrity：一個字串。資源的加密雜湊值，用於 驗證其真實性。
    • type：一個字串。資源的 MIME 類型。
    • nonce：一個字串。一個加密的 nonce 值，在使用嚴格的內容安全策略時允許資源。
    • fetchPriority：一個字串。建議擷取資源的相對優先順序。可能的值為 auto（預設值）、high 和 low。
    • imageSrcSet：一個字串。僅適用於 as: "image"。指定 圖片的來源集。
    • imageSizes：一個字串。僅適用於 as: "image"。指定 圖片的大小。

回傳值

preload 不會回傳任何值。

注意事項

  • 多次等效呼叫 preload 的效果與單次呼叫相同。根據以下規則，preload 的呼叫被視為等效
    • 如果兩個呼叫具有相同的 href，則它們是等效的，除非
    • 如果 as 設定為 image，如果兩個呼叫具有相同的 href、imageSrcSet 和 imageSizes，則它們是等效的。
  • 在瀏覽器中，您可以在任何情況下呼叫 preload：渲染組件時、在 Effect 中、在事件處理程序中等等。
  • 在伺服器端渲染或渲染伺服器組件時，preload 只有在渲染組件時或在源自渲染組件的非同步上下文中呼叫它時才有效。任何其他呼叫都將被忽略。

用法

預先載入資源

如果您知道組件或其子組件將使用特定資源，請在渲染組件時呼叫 preload。

預先載入資源範例

外部腳本預先載入範例 1之 4:
預先載入外部腳本 

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/script.js", {as: "script"});
  return ...;
}

如果您希望瀏覽器立即開始執行腳本（而不是僅下載），請改用 preinit。如果您要載入 ESM 模組，請使用 preloadModule。

在事件處理器中預載入

在轉換到需要外部資源的頁面或狀態之前，在事件處理器中呼叫 preload。這比在新頁面或狀態的渲染期間呼叫它更早開始這個過程。

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
...(保留原文 HTML 程式碼，因過長省略) ...