preinitModule

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

• リファレンス
  • preinitModule(href, options)
• 使用法
  • レンダリング時のプリロード
  • イベントハンドラでのプリロード

リファレンス

preinitModule(href, options)

ESMモジュールをプリロードするには、react-domからpreinitModule関数を呼び出します。

import { preinitModule } from 'react-dom';

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

以下の例をさらに参照してください。

preinitModule関数は、ブラウザに指定されたモジュールのダウンロードと実行を開始するように指示するヒントを提供し、時間を節約できます。preinitしたモジュールは、ダウンロードが完了すると実行されます。

パラメータ

• href: 文字列。ダウンロードして実行するモジュールのURL。
• options: オブジェクト。次のプロパティが含まれています。
  • as: 必須の文字列。'script'である必要があります。
  • crossOrigin: 文字列。使用するCORSポリシー。可能な値は、anonymous と use-credentialsです。
  • integrity: 文字列。モジュールの暗号化ハッシュ。その信頼性を検証します。
  • nonce: 文字列。厳密なコンテンツセキュリティポリシーを使用する場合に、モジュールを許可する暗号化nonce。

戻り値

preinitModule は何も返しません。

注意点

• 同じ href で preinitModule を複数回呼び出すことは、1 回の呼び出しと同じ効果があります。
• ブラウザでは、コンポーネントのレンダリング中、Effect 内、イベントハンドラ内など、どのような状況でも preinitModule を呼び出すことができます。
• サーバーサイドレンダリングまたは Server Components のレンダリング時、preinitModule はコンポーネントのレンダリング中、またはコンポーネントのレンダリングから発生した非同期コンテキストで呼び出した場合にのみ効果があります。それ以外の呼び出しは無視されます。

使用法

レンダリング時のプリロード

コンポーネントまたはその子コンポーネントが特定のモジュールを使用することがわかっていて、そのモジュールが評価され、ダウンロードされるとすぐに有効になることに問題がない場合は、コンポーネントのレンダリング時に preinitModule を呼び出します。

import { preinitModule } from 'react-dom';

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

ブラウザにモジュールをダウンロードさせたいが、すぐに実行させたくない場合は、代わりに preloadModule を使用します。ESMモジュールではないスクリプトをプリイニットしたい場合は、preinit を使用します。

イベントハンドラでのプリロード

モジュールが必要になるページまたは状態に遷移する前に、イベントハンドラで preinitModule を呼び出します。これにより、新しいページまたは状態のレンダリング中に呼び出すよりも早くプロセスを開始できます。

import { preinitModule } from 'react-dom';

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