Zenn
Open6

Angular アプリケーションの assets size について考えてみる

Angular
kasaharukasaharu
$ npx @angular/cli new ng-sample --package-manager yarn --strict --routing --style scss
  • angular/core のバージョンは v11.2.5
  • assets budgets
    • 500kb を超えると warning
    • 1mb を超えると error
  • 作成直後の assets size
$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.1e8709c621a90b9207c8.js      | main          | 211.52 kB
polyfills.87c0e4f79fec903b32a9.js | polyfills     |  35.98 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.09e2c710755c8867a460.css   | styles        |   0 bytes

                                  | Initial Total | 248.96 kB

warning まであと 250 kB...

kasaharukasaharu

よく使うであろう HttpClientModule を import すると 15 kB くらい増える

$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.50e564de73496c694454.js      | main          | 226.76 kB
polyfills.87c0e4f79fec903b32a9.js | polyfills     |  35.98 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.09e2c710755c8867a460.css   | styles        |   0 bytes

                                  | Initial Total | 264.19 kB
kasaharukasaharu

Tour of Heroes のサンプルアプリをダウンロードして build してみた
https://angular.jp/tutorial

$ ng build --prod
✔ Browser application bundle generation complete.
✔ ES5 bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files                      | Names                |      Size
main-es5.e36749047cb4a47590b6.js         | main                 | 339.69 kB
main-es2015.e36749047cb4a47590b6.js      | main                 | 291.00 kB
polyfills-es5.bfa730e0d2a9fd667c8b.js    | polyfills-es5        | 128.71 kB
polyfills-es2015.3cd89155dd3713c56186.js | polyfills            |  36.12 kB
runtime-es2015.4008b8a4bb7b8c9cd11f.js   | runtime              |   1.45 kB
runtime-es5.4008b8a4bb7b8c9cd11f.js      | runtime              |   1.45 kB
styles.74d5d058fe8ad6a1b3f7.css          | styles               | 722 bytes

                                         | Initial ES5 Total    | 470.55 kB
                                         | Initial ES2015 Total | 329.28 kB
kasaharukasaharu

Browserslist を指定する。内容は Angular CLI v11.2.4 がデフォルトで作成するものと同等。

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

yarn build --prod
yarn run v1.22.10
$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.7cdab59bbc261a4f4327.js      | main          | 290.80 kB
polyfills.15fbd2509869ded87d40.js | polyfills     |  36.00 kB
runtime.442d6bd8409cee682c44.js   | runtime       |   1.45 kB
styles.74d5d058fe8ad6a1b3f7.css   | styles        | 722 bytes

                                  | Initial Total | 328.96 kB

0.3 kB くらい減るが、ES2015 向けの assets には大きな影響を与えていない。

kasaharukasaharu

使うことが多いライブラリを追加するとどうなるか？

NgRx Store

$ yarn ng add @ngrx/store@latest して v11.0.1 をインストールすると 15kB くらい増える

$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.64d0c13c16eb1687b399.js      | main          | 304.64 kB
polyfills.15fbd2509869ded87d40.js | polyfills     |  36.00 kB
runtime.442d6bd8409cee682c44.js   | runtime       |   1.45 kB
styles.74d5d058fe8ad6a1b3f7.css   | styles        | 722 bytes

                                  | Initial Total | 342.79 kB

Sentry

https://docs.sentry.io/platforms/javascript/guides/angular/ の手順で Sentry を導入すると 150kB くらい増える

$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.ea99e690e1a20d557499.js      | main          | 450.32 kB
polyfills.15fbd2509869ded87d40.js | polyfills     |  36.00 kB
runtime.442d6bd8409cee682c44.js   | runtime       |   1.45 kB
styles.74d5d058fe8ad6a1b3f7.css   | styles        | 722 bytes

                                  | Initial Total | 488.47 kB