AngularのAoTコンパイルについて

こんにちは!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 の評価もないため、 インジェクション攻撃の機会が少なくなります。

出典: https://angular.jp/guide/aot-compiler

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, <=




勉強になりました。