ひとりごと

文章の練習と自分のアウトプットのために書いていく日記です。

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