Angular v8=>v10でビルド時間とファイルサイズがどのくらい変わったか見てみる
はじめに
先日、ng-japan OnAir で Angular 8→9→10→11でビルド時間がどれくらい早くなっているかみてみよう!という記事が紹介されていた。ちょうど去年末に仕事であるプロダクトのAngularバージョンをを v8.0.3 から v10.1.6 に上げたので、ビルド時間とファイルサイズに変化があるか比較してみた。
前提
- Angular v8.0.3からv10.1.6へのバージョンアップ
- Angularバージョンアップ以外の変更も入っているので完全に純粋な比較にはならない
ファイル数、ステップ数の比較
ひとまず、どのくらいの規模のコードかを確認する。
ファイル数やコード数差分はあるが、大きな差はないと言って良いと思う。
AngularCLI: v8.0.3のブランチ
$ cloc src 1317 text files. 1307 unique files. 28 files ignored. github.com/AlDanial/cloc v 1.88 T=1.32 s (985.4 files/s, 47881.5 lines/s) ------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- TypeScript 1053 5578 3772 42158 HTML 144 246 98 5767 JSON 27 1 0 3867 Sass 74 275 75 1542 Markdown 3 7 0 17 CSS 1 0 0 4 SVG 3 0 0 3 ------------------------------------------------------------------------------- SUM: 1305 6107 3945 53358 -------------------------------------------------------------------------------
AngularCLI: v10.1.6のブランチ
cloc src 1312 text files. 1302 unique files. 27 files ignored. github.com/AlDanial/cloc v 1.88 T=1.50 s (866.0 files/s, 41973.0 lines/s) ------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- TypeScript 1049 5510 3913 41724 HTML 144 246 98 5776 JSON 27 0 0 3866 Sass 74 275 75 1541 Markdown 3 7 0 17 CSS 1 0 0 4 SVG 3 0 0 3 ------------------------------------------------------------------------------- SUM: 1301 6038 4086 52931 -------------------------------------------------------------------------------
npm run start(ng serve)の比較
まず、ng serveの比較を行ってみる。
FYI: ng serve
- Angular CLI のコマンド
- アプリをビルドして提供し、ファイルの変更時に再構築する
AngularCLI | 1回目(ms) | 2回目(ms) | 3回目(ms) | 4回目(ms) | 5回目(ms) | 6回目(ms) | 7回目(ms) | 平均(ms) | totalsize |
---|---|---|---|---|---|---|---|---|---|
v8.0.3 | 35926 | 35959 | 35202 | 33241 | 32628 | 31417 | 32628 | 33857.28571 | 14.70796MB |
v10.1.6 | 38152 | 42009 | 35475 | 33636 | 33272 | 33262 | 33795 | 35657.28571 | 12.741MB |
total size が約2MB小さくなった 🎉🎉🎉🎉
約13%の削減 🎉🎉🎉🎉
npm run start(ng build --prod)の比較
次にng build --prodの比較を行ってみる。
FYI: ng build
- Angular CLI のコマンド
- Angularアプリをコンパイルし、デフォルトでは、現在のプロジェクトの
dist/
という名前のフォルダーに出力を書き込む --prod
オプションを指定すると本番用の設定でビルドされる
AngularCLI | 1回目(ms) | 2回目(ms) | 3回目(ms) | 4回目(ms) | 5回目(ms) | 6回目(ms) | 7回目(ms) | 平均(ms) | totalsize |
---|---|---|---|---|---|---|---|---|---|
v8.0.3 | 79276 | 55032 | 57331 | 57013 | 57365 | 53708 | 56277 | 59428.85714 | 3.87166MB |
v10.1.6 | 79718 | 46298 | 45161 | 45029 | 46713 | 46631 | 46272 | 50831.71429 | 4.30434MB |
ビルド時間の平均が約9秒ほど早くなった 🎉🎉🎉🎉
約14%の削減 🎉🎉🎉🎉
webpack-bundle-analyzer の結果を比較
webpack-bundle-analyzerで出力結果の比較をしてみたが、結構差分があってぱっと見比較できるような状態ではなかった。プロダクトのコードということもあるため、画像は割愛する。
webpack-bundle-analyzerの出力結果が異なるのはdevelopにAngularバージョンアップ以外の変更が入っているためである。少なくとも、tsconfig.jsonのtargetの変更が影響している。
tsconfig.jsonの差分
参考までに、tsconfig.jsonの差分をまとめておく。
AngularCLI: v8.0.3のブランチ | AngularCLI: v10.1.6のブランチ | |
---|---|---|
target | es5 | es2015 |
lib | es2017, dom | es2018, dom |
module | es2015 | es2020 |
target
TypeScriptは最終的にJavaScriptにトランスパイルされる。このオプションはそのときにどのバージョンのJavaScript向けに出力するかといったものである。
lib
使いたいtargetには使いたい機能がない、でも使いたい。そのような時はlibオプションを指定することで使うことができるようになる。
module
このオプションは出力されるJavaScriptがどのようにモジュールを読み込むか指定する。
まとめ
- 一定の改善が見られた🎉🎉🎉🎉🎉🎉
- そもそもAngularバージョンアップ以外の差分や設定変更もあるので、純粋な比較にはなっていない( ; _ ; )(webpack-bundle-analyzerの結果を見ても単純な比較ができない)
- 今度はバージョンアップだけの差分でチェックしてみたい
- webpack-bundle-analyzerよりsource-map-explorerの方が正確らしいので試してみたい。
- Angularチーム推奨。理由は、AngularCLIが webpackを内包しているが、webpackが出力するstats.jsonに埋め込まれている情報だけでは、Angularが最終的に最適化した結果を反映できていない部分があるため。SourceMapには全部つまってるから、そっちをみた方が正確とのこと。
参考
おまけ
半年ほど携わっていた大きめのプロダクトの場合
こちらはAngularのバージョンアップの比較ではなく、単純にビルド時間とファイル時間を出しただけだが、コード量が多いものだとどのような結果になるのかを見てみたくてやってみた。参考までにメモ。
cloc src 2934 text files. 2895 unique files. 74 files ignored. github.com/AlDanial/cloc v 1.88 T=4.39 s (660.1 files/s, 78773.3 lines/s) ------------------------------------------------------------------------------- Language files blank comment code ------------------------------------------------------------------------------- TypeScript 2410 18435 2578 122610 JavaScript 118 23545 69642 81359 HTML 201 981 14 13184 Sass 153 1141 278 7228 JSON 5 0 0 3223 CSS 2 2 0 502 SVG 1 0 0 495 Markdown 5 63 0 212 ------------------------------------------------------------------------------- SUM: 2895 44167 72512 228813 -------------------------------------------------------------------------------
npm run start(ng serve)
AngularCLI | 1回目(ms) | 2回目(ms) | 3回目(ms) | 平均(ms) | totalsize |
---|---|---|---|---|---|
v10.0.5 | 46603 | 48155 | 45934 | 46897.33333 | 18.441MB |
npm run build(ng build --aot --crossOrigin=use-credentials)
AngularCLI | 1回目(ms) | 2回目(ms) | 3回目(ms) | 平均(ms) | totalsize |
---|---|---|---|---|---|
v10.0.5 | 68010 | 55808 | 49567 | 57795 | 41.0786MB |
npm run build(ng build --aot --crossOrigin=use-credentials --prod)
AngularCLI | 1回目(ms) | 2回目(ms) | 3回目(ms) | 平均(ms) | totalsize |
---|---|---|---|---|---|
v10.0.5 | 119982 | 62811 | 59576 | 80789.66667 | 11.85074MB |