こんにちは!kossyです!
さて、今回はAngularのbuild時に用いることができる、AoTコンパイルについて、ブログに残してみたいと思います。
AoTコンパイルとは?
まず、用語について調べてみました。
事前コンパイラ (Ahead-Of-Timeコンパイラ、AOTコンパイラ)とは、アプリケーション実行前に事前にコンパイルするコンパイラのこと。
主に、Javaのバイトコード、.NET CIL、IBM System/38 や System i の "Technology Independent Machine Interface" コードといった
システムから独立した(プロセス仮想機械)のバイナリである中間言語のコンパイルで使われる言葉である。
対義語は、実行時コンパイラ(Just-In-Timeコンパイラ、JITコンパイラ)。出典: https://ja.wikipedia.org/wiki/%E4%BA%8B%E5%89%8D%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9
一般的な用語の意味についてなんとなく理解できました。
次に、AngularにおいてAoTコンパイルを使用する意図について、
公式Docに記載がありました。
AOTを使用する理由は次のとおりです。
より速いレンダリング AOT では、ブラウザはコンパイル済みのアプリケーションをダウンロードします。 ブラウザは実行可能コードをロードするので、最初にアプリケーションをコンパイルするのを待たずにアプリケーションをすぐにレンダリングできます。
より少ない非同期リクエスト コンパイラは外部の HTML テンプレートと CSS スタイルシートをアプリケーションの JavaScript 内に インライン化し 、 それらのソースファイルに対する別々の ajax リクエストを排除します。
より小さい Angular フレームワークのダウンロードサイズ アプリがすでにコンパイルされている場合は、Angular コンパイラをダウンロードする必要はありません。 コンパイラは Angular 自体の約半分なので、これを省略するとアプリケーションのペイロードが大幅に減少します。
テンプレートエラーを早期に検出する AOT コンパイラは、ユーザーが目にする前にビルドステップ中にテンプレートバインディングエラーを検出して 報告します。
より良いセキュリティ AOT は、HTML テンプレートとコンポーネントがクライアントに提供されるずっと前から JavaScript ファイルにコンパイルします。 読み取るテンプレートがなく、危険なクライアントサイドの HTML または JavaScript の評価もないため、 インジェクション攻撃の機会が少なくなります。
AoTコンパイルを用いることで、ファイルサイズの圧縮によるパフォーマンスの向上、
アプリケーションの高速化を実現できるようです。
Angular10でのaotコンパイルの実行方法
Angular 10を使用している場合、
aotコンパイルはデフォルトで有効になっています。
{ "projects": { "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/sfa-angular", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, <=
勉強になりました。