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 関数は、指定されたモジュールのダウンロードと実行を開始するようブラウザに対してヒントを与えます。これにより時間を節約できる可能性があります。事前初期化されたスクリプトは、ダウンロードが完了すると実行されます。

引数

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

返り値

preinitModule は何も返しません。

注意点

• 同じ href で preinitModule を複数回呼び出した場合の効果は、一度のみ呼び出した場合と同様です。
• ブラウザからは、コンポーネントのレンダー中、エフェクト内、イベントハンドラ内も含むどんな状況においても preinitModule の呼び出しが可能です。
• サーバサイドレンダリングやサーバコンポーネントのレンダー時には、コンポーネントのレンダー中やレンダーから派生した非同期処理の中で 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>
  );
}