Webpack における bundle size の変化を継続的に監視する

main ブランチとこのPRでどれだけ bundle size が変化したか比較したり、増加量がある閾値を超えていたら CI を fail させる、みたいなソリューションは結構紹介されているけど、bundle size の変化を継続的に監視する方法はあまり紹介されていないようだったので紹介します。

やり方

1. webpack --mode production --json でビルド情報を JSON で取得
2. JSON から chunk ごとの size に関する情報を抜き出す
3. 好きなメトリクス監視サービスに2で手に入れたメトリクスを投げる

で、それを実装したのがこのPR。見れば分かるので見てください。

github.com

30行程度で実装できて簡単ですね。