Zenn
🚅

ホット リビルド&リロードを速くし隊

2021/12/24に公開
Angular
tech

MerryXmas!🎄
これはAngular Advent Calendar 2021の24日目の記事です。

いきなりですが、他のjsフレームワークからAngularに戻るとつらいな〜と思うことが3点あります。

  1. component/templateを再利用したりプログラマティカリーにぶん回すのがしんどい
  2. 儀礼的・形式的な記述が多い
  3. ホット リビルド&リロードが遅い

今回はこのうち3点目の「ホット リビルド&リロードが遅い」にフォーカスしてDX（DeveloperExperienceの略）を高めます。最後に参考計測値を載せますが、筆者が関わっているプロジェクトの中では素だと合計40秒前後かかるものもあります。なにかhtmlの文字列を1文字変えただけでもそうなります、つらいです。これが簡単なオプション設定を行うだけで合計6秒前後に縮まります🎉

ホット リビルド&リロードについて

この記事では、ホット リビルド&リロードとは、ng serveして開発しているときに何かソースファイルを変更してからブラウザに反映されるまでの工程を指しています。

  1. hot rebuild: ソースファイルをre-compileする
  2. hot reload: ブラウザに通知してページをre-loadする

TIPS

いずれもng serveのコマンドオプション、ないしはangular.jsonで設定できるものです。

optimization=falseにする

  • ホットリビルドを速めます。
  • angular.jsonで設定できます。
  • いくつかのオプションをセットにしたお便利エイリアスです。jsやcssの最小化を辞める、cssやフォントのインライン化を辞める、ツリーシェイキングを辞めるを行います。

現時点だとAoTオプションが必須になっていますが、aotオプションをfalseにするよりもoptimizationオプションをfalseにする方が劇的に速くなります。AoTオプションはv10からデフォルトになっているようにそのままで良いと思います。ng newした素の状態からだと設定が若干大変ですが、がんばりましょう。

hmr=trueにする

  • ホットリロードを速めます。
  • ng serveとangular.jsonの両方で設定できます。
  • webpackのhmr（Hot Module Replacement）オプションにパスするものです。

これがないとブラウザでフルリロードが走りchromeでは一度画面が真っ白になりますが、それが無くなります。たまにコケていることがあって手動でリロードしないといけないことがある気がします。

NG_PERSISTENT_BUILD_CACHE=1にする

  • ホットリビルドを速めます。
  • ng serveで設定できます。v13だとangular.jsonの設定だけになるようです。
  • ビルド結果をキャッシュします。

参考実測値

どのオプションがどれだけ威力を発揮するかの実測数値を掲載します。試行するたびにかなりブレるので、あくまでどのオプションがどの程度効くかを相対的に比較することが最大の目的です。

リポジトリの規模感

  • Angular v12
  • *.component.ts 331ファイル
  • *.modue.ts 71ファイル

As-Is

  • ホットリビルド　30秒前後
  • ホットリロード　10秒前後

合計40秒前後...

After

  • optimization=false →ホットリビルドが6秒前後
  • hmr=true　→ホットリロードが1秒前後
  • NG_PERSISTENT_BUILD_CACHE=1 →ホットリビルドが20秒前後

3つすべて実施すると合計6秒前後です🎉
圧倒的に効くのが一つ目のoptimization=falseです。2つ目は安定。3つ目は変更内容によるものでキャッシュヒットするか次第かなという所感です。

余談

余談ですが、初めに上げた３つの辛みポイントすべてを改善してくれそうなStandalon componentのRFCが起こされています。期待しましょう！
https://github.com/angular/angular/discussions/43784

ng-japan OnAirの解説。わかりやすいです！
https://www.youtube.com/watch?v=SxR8LNh2Pw4

Discussion