Reactでコンポーネントを必要になるまで読み込まない遅延読み込みを実装する正しい組み合わせは？

解説

正解はReact.lazy()とSuspenseです。React.lazy()は、コンポーネントを動的インポートして遅延読み込みするためのReact APIです。たとえば、const SettingsPage = React.lazy(() => import("./SettingsPage"));のように定義すると、SettingsPageのコードはアプリケーションの初期表示時ではなく、そのコンポーネントが画面上で描画される必要が生じた時点で読み込まれます。ただし、読み込み中は対象コンポーネントをすぐに表示できません。そのため、遅延読み込みするコンポーネントはSuspenseで囲み、fallbackにローディング表示などを指定します。読み込み中...}>のように記述します。import()自体はJavaScriptの動的インポート構文ですが、単独ではReactコンポーネントの読み込み待ち状態を画面に反映できません。React.lazy()が動的インポートをReactコンポーネントとして扱える形にし、Suspenseが読み込み中の代替UIを表示する役割を担当します。画面単位や重い機能単位で適用すると、初期バンドルのサイズを抑え、初回表示の負荷を減らせます。