Code Splitting / Lazy Loading

一度にすべてをロードするのは効率的ではありません。ユーザーが必要とした瞬間に必要な分だけを届けるのが、中級者のアプローチです。

Code Splitting (コード分割)

ビルドツール（Webpack, Viteなど）が、1つの大きなファイル（bundle.js）を、複数の小さなファイルに分割する仕組みです。

• ルートベース分割: ページごとにコードを分け、遷移時のみ必要なコードを作成。
• コンポーネントベース分割: 重いライブラリ（Chartsなど）を使うコンポーネントだけを分離。

Lazy Loading (遅延読み込み)

コンポーネントの遅延分割

Reactでは React.lazy と Suspense を使用します。

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

画像の遅延読み込み

ブラウザ標準の属性を使うのが最も簡単で軽量です。 <img src="image.jpg" loading="lazy" />

適切な分割を行うことで、初期表示（FCP/LCP）の速度を劇的に改善できます。