Angular 8を使ったモダンウェブアプリケーション開発
Angular 8の新機能と最適化されたパフォーマンス
Angular 8は、最新の開発ツールと改善されたパフォーマンスを提供します。このバージョンでは、Lazy Loading、Differential Loading、ルーティングの強化など、開発プロセスを効率化するための重要な機能が追加されています。これにより、よりスムーズで効率的なウェブアプリケーションの構築が可能になります。
| 機能 | 説明 |
|---|---|
| Lazy Loading | 必要に応じてモジュールを読み込むことで、初期読み込み時間を短縮 |
| Differential Loading | ブラウザのサポート状況に応じて、異なるバンドルを提供 |
| ルーティングの強化 | ナビゲーションやデータの取得を簡素化し、ユーザー体験を向上 |
Angular 8で始めるチュートリアル
このセクションでは、Angular 8を使用してアプリケーションを構築するための基本的なチュートリアルを提供します。初めての方でもわかりやすい手順で、アプリケーションのセットアップから基本的なコンポーネントの作成までを紹介します。また、効果的な開発環境の構築方法についても触れます。
1. Angular CLIのインストール
まず、Angular CLIをインストールします。以下のコマンドを実行してください。
npm install -g @angular/cli
2. 新しいプロジェクトの作成
次に、新しいプロジェクトを作成します。以下のコマンドを実行してください。
ng new my-angular-app
3. 最初のコンポーネントの作成
新しいコンポーネントを生成するために、以下のコマンドを実行します。
ng generate component my-component
これで、基本的なAngularアプリケーションのセットアップが完了しました。アプリケーションを実行するには、以下のコマンドを実行します。
ng serve
【Angular】これからはじめるE2Eテスト（2019）を書いていた1年前はAngular 8までしかリリースされていなかったのに、もう11までリリースされ、時が経つのは早いなぁ…と思うこの頃です。
この記事では、そのような進化の早いAngularで、
-
「ビルド時間やバンドルサイズが改善されたとか聞くけど、どれ位改善されているの？ ng updateで簡単にアップデートできるけど検証大変だしなぁ…」
-
「ビルド時間が早くなったらもっと効率上がるのに…」
-
「バンドルサイズが減れば初回ロードをもっと早くできるのに…」
みたいな事を考えている方に、Angularをアップデートするモチベーションの後押しをできたらと思い、実際に色々なメジャーバージョン毎に簡単に計測してみた結果を紹介していきたいと思います。
※ ご使用の端末のスペック、プロジェクト、負荷状況により思った通りの結果とは異なってくると思いますが、何かの参考になれば幸いです。
対象読者
Angularを8〜11にかけて、どれくらい「ビルド時間やバンドルサイズが改善されたか」ざっくり知りたい方
実行環境
-
MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
-
プロセッサ：2.3 GHz Intel Core i5
-
メモリ：16 GB 2133 MHz LPDDR3
ソースコードのステップ数を計測する
まずは、そもそもどれくらいの規模感のコード量だったのか、cloc を利用して、ソースコードの規模を計測して肌感を掴んでみます。
-> % cloc src
19 text files.
19 unique files.
2 files ignored.
github.com/AlDanial/cloc v 1.88 T=0.03 s (638.2 files/s, 24386.1 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code
-------------------------------------------------------------------------------
CSS 1 44 2 244
TypeScript 13 31 71 162
HTML 4 16 1 148
Sass 1 1 0 6
-------------------------------------------------------------------------------
SUM: 19 92 74 560各項目の定義
| 項目 | 説明 |
| files | ファイル数 |
| blank | 空行数 |
| comment | コメント行数（ファイルの拡張子から言語を判断し、言語別に定義されたフィルターに従って行数を算出する） |
| code | 論理LOC（物理LOCから空行数とコメント行数を除いた行数） |
Angular Material位しか追加のライブラリは使用していないので、これ位のcode数になるのかなぁといった感じです。
ng serveとng buildを計測してみる
上記プロジェクトに対して、異なる Angular+CLI のバージョンで
-
ng serve
-
ng build --prod
を実行し、各Angularのメジャーバージョンの最新毎に、どの程度ビルド時間やバンドルサイズに違いがあるか計測してみます。
※ 各バージョン毎のサンプルコードは以下のリポジトリに置いております。
-
Angular 8
-
Angular 9
-
Angular 10
-
Angular 11
ng serve
| Angular+CLI | 1回目 | 2回目 | 3回目 | 平均 | total size | main.js | polyfills.js | polyfills-es5.js | runtime.js | styles.js or .css | vendor.js |
| 8.2.14 + 8.3.29 | 12085 ms | 10669 ms | 10878 ms | 11211 ms | 8.71 MB | 49.5 kB | 288 kB | 624 kB | 6.15 kB | 189 kB | 7.58 MB |
| 9.1.12 + 9.1.12 | 12041 ms | 10743 ms | 10975 ms | 11253 ms | 8.17 MB | 49.8 kB | 166 kB | 604 kB | 6.15 kB | 165 kB | 7.2 MB |
| 10.2.3 + 10.2.0 | 12102 ms | 12164 ms | 12814 ms | 12360 ms | 5.15 MB | 48.2 kB | 143 kB | 527 kB | 6.15 kB | 180 kB | 4.27 MB |
| 11.0.3 + 11.0.3 | 12664 ms | 12960 ms | 12777 ms | 12800 ms | 5.08 MB | 48.18 kB | 142.88 kB | 526.47 kB | 6.15 kB | 75.00 kB | 4.30 MB |
ng build --prod
| Angular+CLI | 1回目 | 2回目 | 3回目 | 平均 | total size | main | polyfills | polyfills-es5 | runtime | styles |
| 8.2.14 + 8.3.29 | 22352 ms | 18951 ms | 18700 ms | 20001 ms | 0.707 MB | 477 kB | 49.2 kB | 132 kB | 1.45 kB | 64.7 kB |
| 9.1.12 + 9.1.12 | 29388 ms | 23297 ms | 22474 ms | 25053 ms | 0.680 MB | 458 kB | 44.2 kB | 127 kB | 1.45 kB | 65.2 kB |
| 10.2.3 + 10.2.0 | 22987 ms | 18982 ms | 18973 ms | 20314 ms | 0.693 MB | 466 kB | 44 kB | 127 kB | 1.45 kB | 71.2 kB |
| 11.0.3 + 11.0.3 | 18311 ms | 18012 ms | 19262 ms | 18528 ms | 0.691 MB | 463.61 kB | 43.93 kB | 126.60 kB | 1.45 kB | 71.70 kB |
ng serveでは、外部ライブラリをまとめるvendor.jsやstyle.jsが 9 → 10, 11で半分近く削減されており、全体のサイズで42%近く削減されている感じです。
ng buildは11だとビルド時間が少しだけ早くなっているような気がしますが、元々のコード数がそれほどでもないのもあり、1~2s位の差しかないものの、少しビルド時間が改善されてそうな雰囲気でした。
(各バージョン毎のng buildの平均速度を表すグラフ)
バンドルファイルのサイズを可視化してみる
少し視点を変えて、webpack-bundle-analyzer を利用してバンドルファイル内の容量を可視化し、何か気づけるポイントがないかざっくり確認してみます。
Angular 8.2.14 のバンドルファイル可視化結果
(Angular 9.1.12 のバンドルファイル可視化結果)
Angular 9からivyなる単語が出てきました。 modules数も若干減っているようです。
(Angular 10.2.3 のバンドルファイル可視化結果)
ES5サポートされなくなった代わりに、デフォルトのターゲットとしてes2015が登場してきました。 modules数が増えてます。
(Angular 11.0.3 のバンドルファイル可視化結果)
10とあまり変わらないような気がします。
これらをみてみて何かできるかというと…何ともといった印象です。
もう少し大きめの規模のプロジェクトで計測してみる
サンプルプロジェクトではビルド速度などにあまり違いがありませんでしたが、サンプルの200倍近いcode数のAngularプロジェクトに対して、大きく改善されるか確認していきます。
-> % cloc src
1537 text files.
Unique: 100 files Unique: 200 files Unique: 300 files Unique: 400 files Unique: 500 files Unique: 600 files Unique: 700 files Unique: 800 files Unique: 900 files Unique: 1000 files Unique: 1100 files Unique: 1200 files 1485 unique files.
77 files ignored.
github.com/AlDanial/cloc v 1.88 T=1.36 s (1088.8 files/s, 101447.2 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code
-------------------------------------------------------------------------------
TypeScript 893 10415 502 92050
HTML 428 635 144 25972
Sass 131 615 37 3455
CSS 7 479 174 2765
JavaScript 3 0 24 329
JSON 7 3 0 210
SVG 11 0 8 181
Markdown 2 12 0 76
-------------------------------------------------------------------------------
SUM: 1482 12159 889 125038ng serveとng buildを計測してみる
ng serve
| Angular+CLI | 1回目 | 2回目 | 3回目 | 平均 | total size | main.js | polyfills.js | polyfills-es5.js | runtime.js | styles.js or css | vendor.js | scripts.js |
| 8.2.14 + 8.3.29 | 47623 ms | 49221 ms | 48131 ms | 48325 ms | 19.70MB | 9.61MB | 123 kB | 444 kB | 6.15 kB | 960 kB | 7.26 MB | 643 kB |
| 10.2.3 + 10.2.0 | 71057 ms | 78990 ms | 71859 ms | 73969 ms | 24.08MB | 13.9MB | - | 419 kB | 6.15 kB | 774 kB | 8.38 MB | 646 kB |
| 11.0.3 + 11.0.3 | 95375 ms | 91234 ms | 87563 ms | 91391 ms | 24.30MB | 13.56 MB | - | 418.43 kB | 6.15 kB | 933.00 kB | 8.78 MB | 646.23 kB |
ng build --prod
| Angular+CLI | 1回目 | 2回目 | 3回目 | 平均 | total size | main | polyfills-es5 | runtime | styles | scripts.js |
| 8.2.14 + 8.3.29 | 142326 ms | 143689 ms | 141689 ms | 142568 ms | 9.07 MB | 8.31 MB | 79.6 kB | 1.45 kB | 197 kB | 501 kB |
| 10.2.3 + 10.2.0 | 87699 ms | 83409 ms | 80108 ms | 83739 ms | 7.73 MB | 6.96 MB | 83 kB | 1.45 kB | 199 kB | 507 kB |
| 11.0.3 + 11.0.3 | 83872 ms | 81685 ms | 96651 ms | 87403 ms | 7.66 MB | 6.89 MB | 82.75 kB | 1.45 kB | 198.99 kB | 506.62 kB |
(各バージョン毎のng build --prodの平均速度を表すグラフ)
ビルドに2分20秒以上(142568ms)かかっていたのが、Angular 10, 11から半分の1分23秒位(83739ms)に… :tada: バンドルサイズのtotalも1.41MBも減りました。
参考文献
Q&A
Q1: Lazy Loadingはどのように実装しますか？
A1: Lazy Loadingは、@NgModuleのルーティングでloadChildrenプロパティを使用してモジュールを遅延読み込みすることで実装できます。
Q2: Differential Loadingとは何ですか？
A2: Differential Loadingは、ブラウザの互換性に基づいて異なるバンドルを提供することで、パフォーマンスを向上させる機能です。
Q3: Angular CLIを使うメリットは何ですか？
A3: Angular CLIを使用すると、アプリケーションの生成、コンポーネントの作成、ビルド、テストが簡単かつ効率的に行えます。