API Reference
API

preloadModule

補足

React ベースのフレームワークは、多くの場合リソースの読み込みを自動で処理してくれるため、この API を直接呼び出す必要はないかもしれません。詳細はフレームワークのドキュメントを参照してください。

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: オブジェクト。以下のプロパティを含みます。

返り値

preloadModule は何も返しません。

注意点

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