preloadModule

preloadModule("https://example.com/module.js", {as: "script"});

• 參考
  • preloadModule(href, options)
• 用法
  • 渲染時預載
  • 在事件處理函式中預載

參考

preloadModule(href, options)

要預載 ESM 模組，請從 react-dom 呼叫 preloadModule 函式。

import { preloadModule } from 'react-dom';

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

請參閱以下更多範例。

preloadModule 函式會向瀏覽器提示它應該開始下載指定的模組，這可以節省時間。

參數

• href：字串。您要下載的模組網址。
• options：物件。它包含以下屬性：
  • as：必要的字串。它必須是 'script'。
  • crossOrigin：字串。要使用的 CORS 政策。可能的值為 anonymous 和 use-credentials。
  • integrity：字串。模組的加密雜湊值，用於 驗證其真實性。
  • nonce：字串。加密的 nonce，在使用嚴格的內容安全策略時允許模組。

回傳值

preloadModule 不會回傳任何值。

注意事項

• 多次使用相同的 href 呼叫 preloadModule，效果與單次呼叫相同。
• 在瀏覽器中，您可以在任何情況下呼叫 preloadModule：渲染組件時、在 Effect 中、在事件處理程序中等等。
• 在伺服器端渲染或渲染伺服器組件時，preloadModule 僅在您於渲染組件時或源自渲染組件的非同步環境中呼叫它時才有效。任何其他呼叫都將被忽略。

用法

渲染時預載

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

import { preloadModule } from 'react-dom';

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

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

在事件處理程序中預載

在轉換到需要模組的頁面或狀態之前，在事件處理程序中呼叫 preloadModule。這比在渲染新頁面或狀態期間呼叫它更早開始程序。

import { preloadModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preloadModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}