lazy() と Suspense によるコンポーネントの遅延読み込み、React Router でのルート分割、loading="lazy" での画像の遅延、メイン画像を遅くしない方法をデモ付きで解説します。
React の遅延読み込みとは、コードや画像を必要になったときにだけ取得することです。動的インポートを lazy() で包み、フォールバック付きの Suspense 境界の中でコンポーネントをレンダリングすると、React は初回レンダリング時にそれをダウンロードします。画像では HTML 属性 loading="lazy" が同じ役割を果たしますが、ファーストビューのメイン画像には決して使わないでください。
どの遅延読み込みの手段がどの用途に合うか
アプリのバンドルが大きいと、設定タブのグラフや管理ページなど、使うかどうか分からないコードのために訪問者全員が待たされます。遅延読み込みは、そのコードをブラウザーが必要に応じて取得する別ファイルに分割します。下のデモを試してから、コンポーネント、ルート、画像、スクロールで表示するコンテンツのパターンをコピーしてください。
レンダリングできるコンポーネントです。その読み込み関数は、default プロパティが有効な React コンポーネントであるオブジェクトに解決される Promise を返す必要があります。default export を動的 import() で読み込めばそうなります。
いいえ。react.dev によると、返された Promise とその解決値の両方がキャッシュされるため、React が読み込み関数を複数回呼ぶことはありません。このページのデモでは、2回目に開いたときに即座に表示されることが確認できます。
lazy() は default export を前提としています。名前付きエクスポートの場合は、読み込み関数の中で対応付けます：lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart })))。
はい、画面上で最も大きな画像の場合です。web.dev の調査では、ファーストビューの画像を遅延読み込みすると Largest Contentful Paint が遅くなる傾向があり、ファーストビューより下の画像だけを遅延読み込みすれば、その代償なしにデータ削減の効果を得られることが分かりました。
React はレンダリング中に拒否の理由をスローし、最も近いエラーバウンダリがそれを捕捉します。エラーバウンダリがない場合、react.dev によると React はデフォルトでアプリの UI を画面から削除します。
標準的なパターンです。ファイルの先頭に lazy の宣言を1つ置き、レンダリングする場所を Suspense 境界で囲みます。
showChart が初めて true になるまで、グラフのファイルは取得されません。
React Router のルートオブジェクトは、ルートのプロパティを返す lazy 関数を受け取るため、各ページを独立したファイルにできます。
レポートページとそのローダーは、誰かが /reports にアクセスしたときにだけダウンロードされます。
ブラウザーは画像の遅延読み込みをネイティブに処理します。ファーストビューより下の画像を lazy にし、メイン画像には高い取得優先度を付けましょう。
幅と高さで領域を確保しておけば、画像が読み込まれても何もずれません。
地図やレビューウィジェットなど画像以外のコンテンツには、その領域が画面に入ったことを知らせる小さなフックを使います。
rootMargin を200px にすると、領域が見える少し前に読み込みが始まります。一度表示されると、オブザーバーは切断されます。
このボタンは lazy() で作ったコンポーネントをレンダリングします。初回のダウンロードには、擬似的に2秒かかるようにしています。
売上グラフを表示
売上グラフを非表示
グラフのファイルを読み込み中...
グラフのファイルを読み込みました。非表示にしてからもう一度表示してみてください。React が初回の読み込みをキャッシュしているので、すぐに表示されます。
月別の売上
無料で始める · クレジットカード不要