preinitModule
preinitModule
は、ESM モジュールを事前にフェッチして評価することができます。
preinitModule("https://example.com/module.js", {as: "script"});
リファレンス
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>
);
}