React Academy · レッスン

Bundle分析とCode Splitting戦略

rollup-plugin-visualizerでbundle sizeを分析し、routeごとのcode splitting戦略を設定します。

「Bundle分析とCode Splitting戦略」はCoddyKit上の無料React Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

バンドルサイズが重要な理由

大きな JavaScript バンドルは Time To Interactive を遅らせます。ページが操作可能になる前に、JavaScript のすべての KB をダウンロード、解析、実行する必要があります。特に低速なモバイルネットワークでは影響が大きくなります。

rollup-plugin-visualizer で分析する

Vite プロジェクトでは visualizer プラグインを使って、バンドル内のどのモジュールが最も多くの容量を占めているかを示すツリーマップを生成します。

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({ open: true, gzipSize: true, brotliSize: true })
  ],
});

// After build, open the generated HTML file to explore the treemap

Next.js Bundle Analyzer

@next/bundle-analyzerを使って、Next.js のサーバーバンドルとクライアントバンドルを分析します。

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

// Run:
// ANALYZE=true npm run build

ルートベースのコード分割

最も効果的な分割方法は、ユーザーが移動したときに各ルートのコードだけを読み込むことです。React Router のlazy()と Next.js App Router では、これが自動的に行われます。

// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

<Routes>
  <Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} />
  <Route path="/settings" element={<Suspense fallback={<Loading />}><Settings /></Suspense>} />
</Routes>

コンポーネント単位のコード分割

地図、グラフ、エディターなどの負荷が高いコンポーネントは、必要になるまでlazy()を使って読み込みを遅延させます。

const MonacoEditor = lazy(() => import('@monaco-editor/react'));
const MapView = lazy(() => import('./MapView'));

function ProductEditor({ showMap }) {
  return (
    <>
      <Suspense fallback={<EditorSkeleton />}><MonacoEditor /></Suspense>
      {showMap && <Suspense fallback={<MapSkeleton />}><MapView /></Suspense>}
    </>
  );
}

条件付き機能の動的インポート

大きなライブラリは機能が有効化されたときだけインポートし、すべてのユーザーに読み込ませることを避けます。

async function exportToPDF() {
  const { default: jsPDF } = await import('jspdf'); // ~300KB — loaded on demand
  const doc = new jsPDF();
  doc.text('Hello', 10, 10);
  doc.save('export.pdf');
}

ツリーシェイキング

最新のバンドラーは、使われていないエクスポート（デッドコード）を削除します。ツリーシェイキングが機能するよう、依存関係が ESM（CJS ではない）をサポートしていることを確認し、1つの関数しか使わない場合はライブラリ全体をインポートしないようにします。

// Bad — imports entire lodash (~70KB):
import _ from 'lodash';
const result = _.debounce(fn, 300);

// Good — imports only debounce (<2KB):
import debounce from 'lodash/debounce';
// or with tree-shaking-friendly lodash-es:
import { debounce } from 'lodash-es';

重要なチャンクのプリロード

<link rel='modulepreload'>または Webpack のマジックコメントを使って、ユーザーが現在のページにいる間に次のページのチャンクをプリロードします。

// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));

サードパーティの影響を分析する

bundlephobia.com または Import Cost VS Code 拡張機能を使って、npm パッケージをインストールする前に gzip 圧縮後のサイズを確認します。

バンドル予算の設定

Webpack または Vite の設定で、ルートごとのサイズ上限を設定します。チャンクが予算を超えるとビルドが失敗するため、CI で意図しないサイズ増加を検出できます。

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor-react': ['react', 'react-dom'],
        'vendor-router': ['react-router-dom'],
      },
    },
  },
  chunkSizeWarningLimit: 200, // warn at 200KB
},

確認問題

多くのページを持つ React SPA で、最も効果的なコード分割戦略は何ですか？

まとめ

rollup-plugin-visualizer または @next/bundle-analyzer でバンドルを分析します。ルート単位とコンポーネント単位のlazy()分割を使います。使用するものだけをインポートしてツリーシェイキングを適用します。CI でサイズ予算を設定し、次に移動する可能性が高いルートには prefetch／preload ヒントを使います。

よくある質問

「Bundle分析とCode Splitting戦略」レッスンは無料ですか？

はい。「Bundle分析とCode Splitting戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Bundle分析とCode Splitting戦略」で何を学びますか？

rollup-plugin-visualizerでbundle sizeを分析し、routeごとのcode splitting戦略を設定します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Bundle分析とCode Splitting戦略」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る