ビルドが100倍速くなると噂の Angular 17 の新ビルドシステムを使ってみた

先月、Angular の新バージョンである Angular 17 が公開されました。
新しいコードフローやビルドシステムが追加されたり、Signalが安定版になったりと機能面で大きく進化しました。
また、ロゴの変更やAngularを実行できるサンドボックス機能を搭載した新たなドキュメントサイトが公開されるなど、ブランディング面でも大きな変更がありました。

そんな Angular 17 ですが、どうやら新しいビルドシステムがだいぶ速いらしいと巷で噂になっていたので実際に検証してみました。

色々ある Angular のビルドシステム

Angularにはクライアントサイドレンダリング（CSR）用やサーバーサイドレンダリング（SSR）用など、複数のビルダーが存在します。

Angular のビルダー

ビルダー	説明
@angular-devkit/build-angular:browser	CSR用のビルダー
@nguniversal/builders:dev-server	CSR用の開発サーバー
@nguniversal/builders:ssr-dev-server	SSR用の開発サーバー
@angular-devkit/build-angular:browser-esbuild	esbuild で動作するCSR用のビルダー Angular 14から追加され、長らく開発者プレビューだった
@angular-devkit/build-angular:application	esbuildで動作するCSRとSSR用のビルダー Angular 17から追加され、CSRとSSRの両方で使える Angular 17 からはこれがデフォルトになる
@angular-devkit/build-angular:ng-packagr	Angular Package Formatに準拠したAngularライブラリ用のビルダー

これらのうち、browser-esbuildとapplicationには esbuild が、それ以外には webpack が使われています。
これまでは CSRのビルドでしか esbuild を使えませんでしたが、Angular 17 で追加された application ビルダーを使うことで、SSRのビルドにも esbuild が使えるようになりました。

これからはこのビルダーがAngularのデフォルトになります（従来の webpack を用いたビルドがなくなるわけではないそうです）

webpack から esbuild に変わったことで、ビルド時間が大幅に短縮されました。
両者について簡単に説明すると、

webpack とは

webpackは複数のJavaScriptファイルを一つのファイルにまとめて出力するツールです。
クライアント開発では最も有名なモジュールバンドラーのひとつです。
長らくモダンフロントエンド開発を支えてきましたが、近年では設定ファイルの複雑さやパフォーマンスがネックになり、他のモジュールバンドラーにシェアを奪われつつあります。

esbuild とは

webpackと同じモジュールバンドラーのひとつ。
Go言語で書かれているため、高速に動作するのが特徴。
公式曰く、webpack の 10 から 100 倍速いとのこと。

どちらもモジュールバンドラーという複数のソースをまとめてくれる、モダンフロント開発ではなくてはならないツールのひとつです。

この界隈では長年 webpack が人気でしたが、設定ファイルの複雑さやパフォーマンスの問題などから、近年はそれらを解決した新たなモジュールバンドラーが多く登場するようになりました。

https://npmtrends.com/esbuild-vs-rollup-vs-vite-vs-webpack

esbuild もそのうちのひとつとなります。
esbuild の速さの秘密については色々なサイトで説明されているのでそちらをご参照ください。

@angular-devkit/build-angular:application の使い方

さて、そんな esbuild が Angular 17 からは標準で使えるようになりました。
しかし、既存のシステムで新しいビルドシステムを使用するためには、いくつか手順が必要です。

手順を確認しながら従来のビルダーとのパフォーマンス検証を行っていきましょう。

ちなみに、必要な手順は公式ドキュメントに記載されています。

前提： Angular 17 以上であること

まずは　Angular 17 までアップデートしましょう。

使用手順

1. angular.json の builder を変更する

これを

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
...

こうする

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
...

2. ビルドターゲットのオプションを変更する

angular.json のビルドターゲットのオプションのうち、以下のパラメータを変更します。

• main を browser に変更する。
• polyfillsを単一のファイルではなく、配列にする。
• buildOptimizerを削除する。
• resourcesOutputPathを削除する。
• vendorChunkを削除する。
• commonChunkを削除する。
• deployUrl を削除する。代わりに <base href> を使用する。詳細は公式のデプロイメントドキュメントを参照。
• ngswConfigPath を serviceWorker に変更する。

SSRを使用していない場合はこれで準備完了です。 SSRを使用している場合はさらにSSR用のコードを変更する必要があります。 詳細はAngularの公式ドキュメントをご参照ください。

3. ビルドする

いままでと同様に ng build でビルドできます。

実際にビルドしてみた結果

ビルド回数	旧 (webpack)	新 (esbuild)
1回目	47.371 sec	17.158 sec
2回目	17.801 sec	16.347 sec
3回目	14.474 sec	16.480 sec
ビルドサイズ	5.06 MB	5.01 MB

さすがに１００倍とはなりませんでしたが、キャッシュがない状態での初回ビルドの時間が大幅に短縮されました。
2回目以降はキャッシュが効くため webpack とさほど変わらない結果となりました。
また、ビルドサイズもあまり変わりありません。

おわりに

今回の高速化は webpack から esbuild に変わったことがほとんどの理由です。
そのため、既に @angular-devkit/build-angular:browser-esbuildを使用している場合は、@angular-devkit/build-angular:applicationに変えてもここまで速くはなりません。
webpak を使用している方やSSRでビルドしている方は、かなり効果が期待できますので Angular 17 にアップデートすることをおすすめします。