【こーどぶんかつ】
コード分割 とは？
最終更新:
💡 コードを小分けにして、読み込み方を調整する
JavaScriptなどのコードを複数のチャンクに分け、必要に応じた読み込みや並列の読み込みを可能にする手法。最初に読み込むコードを減らす用途などに使う。分割の方法や読み込みの時期は、ビルドツールや構成によって異なる。
📌 このページのポイント
- 大きなバンドルを複数のチャンクへ分ける
- dynamic importなどで、必要になったコードを読み込む
- 共通の依存コードを別チャンクへ分ける方法もある
- 初期表示と追加読み込みの待ち時間を確認する
ひよこ なぜコード分割が必要なの？
ペンギン先生 全画面のコードを最初にまとめて読み込むと、今は使わない機能まで読み込むことがあるよ。画面や重い機能のコードを分け、必要になるまで待てるようにすると、最初の読み込みを減らせる場合があるんだ。
ひよこ どうやって分割するの？
ペンギン先生 webpackには複数の入口、共通依存の分離、dynamic importによる分割があるよ。例えばチャートを使うときにimport()で読み込む。コードを分けることと、後から読み込むことは関連するけれど、全ての分割が遅延読み込みになるわけではないんだ。
ひよこ Reactではどう使うの？
ペンギン先生 ひよこ 細かく分けるほど速くなる？
ペンギン先生 一律には言えないよ。初期のコードは減っても、後で必要なコードの取得を待つことがある。どこで読み込み、共通コードをどう扱うかを決め、生成されたチャンクと実際の表示を確認しよう。分割しただけで固定の速度や最小サイズを保証するものではないんだ。
ひよこ Tree Shakingとは違うの？
ペンギン先生 Tree Shakingは、使わないコードを除くための最適化。コード分割は、残るコードの分け方と読み込み方を調整するものだよ。両方を組み合わせられるけれど、除去できる範囲はモジュールの形式や副作用、設定などにもよるんだ。
まとめ：ざっくりこれだけ覚えればOK！
「コード分割」って出てきたら「コードを小分けにして、読み込み方を調整する」と思えばだいたいOK！
📖 おまけ：英語の意味
「Code Splitting」 ＝ コードの分割
💬 splitは「分ける」という意味だよ。コードを複数のチャンクに分けて、必要時や並列で読み込めるようにするんだ。