107. バンドルの中身を調べる — 何が重いかを可視化する

バンドルを軽くするには、まず「何が重いのか」を知る必要があります。ng build を実行すると出力ファイルの一覧とサイズが表示され、Initial total が初期バンドルの合計、Lazy chunk files が遅延読み込みで分割された部分です。この数字を読めるだけで、分割が効いているかを毎回確認できます。

内訳を深掘りするには source-map-explorer が定番です。ソースマップ付きでビルドして実行すると、バンドルの中身が面積図で表示され、「このライブラリだけで200kB」といった事実が一目でわかります。感覚ではなく面積で犯人を特定してから、削るか・遅延させるか・置き換えるかを選びます。

よくある犯人は、巨大ライブラリの全部読み込みです。lodash をまるごと import すると使う関数が1つでも全体が入ります。lodash-es から関数単位で import する、日付処理を標準の Intl で済ませるなど、部分 import と軽量代替が基本です。ただし数kBの削減のために可読性を壊すのはやりすぎです。