React.lazyとSuspenseでコード分割！初期表示を高速化する方法

Reactアプリケーションが大規模化するにつれて、JavaScriptバンドルのサイズが大きくなり、初期表示が遅くなるという問題に直面することがあります。
これを解決するのが、コード分割（Code Splitting）です。

この記事では、React標準のReact.lazyとSuspenseを使って、必要なコンポーネントだけを遅延読み込みする方法を解説します。

コード分割とは？

コード分割とは、アプリケーション全体のJavaScriptコードを複数のチャンク（分割ファイル）に分けて読み込む手法です。
これにより、ユーザーが最初にアクセスしたときに必要最低限のコードだけを読み込むことができます。

React.lazyとは？

React.lazyは、コンポーネントを動的にインポート（遅延読み込み）するための関数です。
React 16.6 以降で標準サポートされています。

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

Suspenseとは？

Suspenseは、React.lazyで読み込み中の間、フォールバックUI（ローディング表示）を出すために使います。

<Suspense fallback={<div>Loading...</div>}>
  <SomeComponent />
</Suspense>

従来の全コンポーネント一括読み込み

例えば以下のように、すべてのコンポーネントを通常のimportで読み込むと、初期バンドルが肥大化します。

import Header from './Header';
import Sidebar from './Sidebar';
import Dashboard from './Dashboard';

function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <Dashboard />
    </div>
  );
}

React.lazyとSuspenseを使った改善例

以下のようにReact.lazyで遅延読み込みし、SuspenseでフォールバックUIを表示することで、初期読み込みを軽量化できます。

import React, { Suspense } from 'react';

const Header = React.lazy(() => import('./Header'));
const Sidebar = React.lazy(() => import('./Sidebar'));
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>読み込み中...</div>}>
        <Header />
        <Sidebar />
        <Dashboard />
      </Suspense>
    </div>
  );
}

主な改善点

・初期表示の高速化：最小限のコードだけでページを表示でき、初期ロード時間が短縮される
・読み込み待機の制御：SuspenseによってローディングUIが明示できる
・簡単な導入：importをReact.lazyに置き換えるだけで導入可能

補足：ルーティングとの組み合わせ

React Routerなどのルーティングライブラリと組み合わせることで、ページ単位でのコード分割も可能になります。

import { BrowserRouter, Route, Routes } from 'react-router-dom';
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>読み込み中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

まとめ

React.lazyとSuspenseは、以下のようなユースケースで特に効果を発揮します：
・コンポーネント単位で読み込みタイミングを遅らせたいUI構成
・初期表示を高速化し、UXを向上させたい中〜大規模なアプリケーション
・ルーティングによってページごとにコードを分割したい場面
React 16.6以降を使用しているアプリケーションでは、「必要なときに必要なコードだけ読み込む」という理想的なコード分割を、React.lazyとSuspenseで簡単に実現できます。