Angular18以降のバンドルサイズを分析・可視化する

始めに

Angularで作られたプロジェクトを少しでも初期表示を軽くしようとしていました。lazyloadできる余地がどこにあるのかを調べるためバンドルサイズを分析・可視化しようとしたのですが、Angular18以降では過去に使用していた分析・可視化コマンドがうまく使えなかったのでブログにします。

環境

• Angular
  • 19.0.5

実装

次のコマンドでビルドした結果をもとにバンドルサイズを可視化できます。

ng build --stats-json
npx esbuild-visualizer --metadata dist/front/stats.json --open

過去の分析が使えなくなった理由

正確にいえば使えなくなったわけではないです。Angular16ではwebpackでバンドルしていましたが、Angular18からesbuildでバンドルすることが標準となりました。ですので、過去はwebpackに合わせた分析ツールを使用していましたが、Angularをアップデートした際に使用できなくなっています。

もちろん、webpackのままであれば過去の分析ツールを使えるでしょうが、基本的には現在使用しているAngularのバージョンに合わせたものをしようするべきです。

npx webpack-bundle-analyzer ./dist/front/stats.json

ソースコード

なし。

終わりに

分析できるようになった結果いろいろと課題感は見えてきましたが、簡単に影響のあるものを適用することは難しそうでした。結局、初期表示はバックエンドの速度に影響されている箇所が大きいので、まずはプロダクトの改善はそちらから行っていく予定です。