コード分割とは何ですか？

JavaScriptバンドルを複数のチャンクに分割し、必要な時に必要な部分だけ読み込む最適化手法。

コード分割のポイントは？

初期ロードのJavaScriptサイズを削減してページ表示を高速化。dynamic import()で画面遷移時やユーザー操作時に追加コードを読み込む。webpack、Vite、esbuildがコード分割をサポート。React.lazy()やNext.jsのdynamic()で簡単に実装可能

【こーどぶんかつ】

コード分割とは？

💡 巨大なJSファイルを「小分け」にする

📌 このページのポイント

初期ロードのJavaScriptサイズを削減してページ表示を高速化
dynamic import()で画面遷移時やユーザー操作時に追加コードを読み込む
webpack、Vite、esbuildがコード分割をサポート
React.lazy()やNext.jsのdynamic()で簡単に実装可能

コード分割のイメージ

ひよこ

なぜコード分割が必要なの？

ペンギン先生

SPAは全画面のコードを1つのJSファイルにバンドルすることがある。管理画面のコードを含めて2MBのJSを最初にダウンロードさせると、ログインページの表示に5秒かかるかも。コード分割で「ログインページのコードだけ」を先に読み込めば数百KBで済むんだよ

ひよこ

どうやって分割するの？

ペンギン先生

①ルートベース分割（ページごとに分割）：React Routerの各ページをReact.lazy()で読み込む。②コンポーネントベース分割：重いモーダルやチャートをdynamic importする。③ベンダー分割：node_modulesを別チャンクにする。Viteやwebpackは設定次第で自動的にチャンク分割してくれるよ

ひよこ

分割しすぎるとダメ？

ペンギン先生

分割しすぎるとHTTPリクエスト数が増えてオーバーヘッドが生じる。HTTP/2以降はリクエストの多重化ができるから影響は小さいけど、数百チャンクに分割するのはやりすぎ。ページ単位の分割＋大きなライブラリの分割くらいがバランスが良いよ。バンドルアナライザーで実際のサイズを見ながら判断しようね

ひよこ

Tree Shakingとの違いは？

ペンギン先生

コード分割は「必要な時に読み込む（遅延）」、Tree Shakingは「不要なコードを削除する（除去）」。complementary（補完的）な関係。まずTree Shakingで使われていないコードを除去して、残ったコードをCode Splittingで小分けにする。両方合わせて使うことでバンドルサイズを最小化できるんだ

まとめ：ざっくりこれだけ覚えればOK！

「コード分割」って出てきたら「JSバンドルを小分けにして必要な時に読み込む技術」と思えればだいたいOK！

📖 おまけ：英語の意味

「Code Splitting」＝コード分割

💬 Split（分割する）。1つの巨大ファイルを複数のチャンク（塊）に分けるよ

← 用語集にもどる

コード分割 とは？

コード分割とは？