👌

esbuild による ng new のビルド時間計測

2021/12/31に公開

Angular のビルドに esbuild が組み込まれました。

https://twitter.com/angular/status/1443984061555519490

これにより、Angular のビルドの高速化が期待できます。
実際に計測した結果を記載します。

計測内容

  • Angular CLI v11 (11.2.17 esbuildなし)
  • Angular CLI v13 (13.1.2 esbuildあり)

ng new でアプリケーションを作成します。

ng new のオプション

? Would you like to add Angular routing? (y/N) Y
? Which stylesheet format would you like to use? (Use arrow keys) CSS

そのアプリケーションに対して、ng build を行った結果を測定します。

計測結果

キャッシュなしの状態でのビルド結果を比較します。

| Version | Build Time |
| ---- | ---- | ---- |
| v11 | 18998ms |
| v13 | 24058ms |

残念ながら、 ng new の結果では大きな差異は見られませんでした。
複雑なビルドで試してみたいと思います。

Angular CLI v11

ビルド結果

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.36 MB
polyfills.js        | polyfills     | 128.82 kB
main.js             | main          |  56.22 kB
runtime.js          | runtime       |   6.15 kB
styles.css          | styles        | 119 bytes

                    | Initial Total |   2.54 MB

Build at: 2021-12-31T09:31:10.748Z - Hash: 9cbc5e54a4a3e2df6745 - Time: 18998ms

Angular CLI v13

ビルド結果

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.ec79a7b1cc5749fc.js      | main          | 205.03 kB |                55.56 kB
polyfills.4e8decfcbe237b22.js | polyfills     |  36.19 kB |                11.52 kB
runtime.33312de4debca1c6.js   | runtime       |   1.04 kB |               598 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 242.26 kB |                67.66 kB

Build at: 2021-12-31T09:37:40.592Z - Hash: f423a5919439dd87 - Time: 24058ms

Discussion