preloadModuleを使用すると、使用することが予想されるESMモジュールを事前にフェッチできます。
preloadModule("https://example.com/module.js", {as: "script"});リファレンス
preloadModule(href, options)
ESMモジュールをプリロードするには、react-domからpreloadModule関数を呼び出します。
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
// ...
}preloadModule関数は、ブラウザに指定されたモジュールのダウンロードを開始するようにヒントを提供し、時間を節約できます。
パラメータ
href：文字列。ダウンロードするモジュールのURL。options：オブジェクト。次のプロパティが含まれます。as：必須の文字列。'script'である必要があります。crossOrigin：文字列。使用するCORSポリシー。可能な値はanonymousとuse-credentialsです。integrity：文字列。モジュールの暗号化ハッシュ。その真正性を検証するため。nonce：文字列。厳格なコンテンツセキュリティポリシーを使用する場合にモジュールを許可するための暗号化nonce。
戻り値
preloadModuleは何も返しません。
注意事項
- 同じ
hrefでブラウザでは、コンポーネントのレンダリング中、Effect 内、イベントハンドラ内など、あらゆる状況でpreloadModuleを呼び出すことができます。 - サーバーサイドレンダリングや Server Components のレンダリング時、
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>
);
}