AngularでのJust-in-Time（JiT）とAhead-of-Time（AoT）のコンパイル

私はこのドキュメントを参照していて、コンパイルのコンセプトに出くわしました。JITまたはAOTコンパイルを使用できます。しかし、私はそれが非常に簡潔であることに気づき、以下の点を詳細に知る必要があります、

• これら2つの手法の違い
• 何をいつ使用するかに関する推奨事項

JIT-実行に合わせてTypeScriptをコンパイルします。

• ブラウザでコンパイル。
• 各ファイルは個別にコンパイルされます。
• コードを変更した後、ブラウザページをリロードする前にビルドする必要はありません。
• ローカル開発に適しています。

AOT-ビルド段階でTypeScriptをコンパイルします。

• コマンドライン（Faster）を介して、マシン自体によってコンパイルされます。
• すべてのコードをまとめてコンパイルし、スクリプト内にHTML / CSSをインライン化します。
• コンパイラーをデプロイする必要はありません（半分のAngularサイズ）。
• より安全な元の情報源は公開されていません。
• 本番ビルドに適しています。

いくつかの答えはありますが、私の発見のいくつかも追加したいと思います。なぜなら、すべての場合のように実際にコンパイルされているものと本当に混乱していたためですTS -> JS変換が発生します。ジェフのブログからパラパラを参考にしています。

JIT

TS開発者によって書かれたコードがにコンパイルされJSたコード。現在、このコンパイルされたjsコードはブラウザによって再度コンパイルされるため、はhtmlユーザーアクションに従って動的にレンダリングでき、それに応じてangular （コンポーネント、変更検出、依存性注入）のコードも実行時に生成されます。

（ブラウザコンパイラは、アプリケーションのディレクティブとコンポーネント、および対応するHTMLとCSSを取り、コンポーネントファクトリを作成して、すべてのビュー作成ロジックでインスタンスをすばやくスタンプします。）

Angular 2アプリケーションがブラウザーでブートストラップされると、JITコンパイラーは多くの作業を実行して、アプリケーションのコンポーネントを実行時に分析し、メモリー内にコードを生成します。ページが更新されると、実行されたすべての作業が破棄され、JITコンパイラーがその作業を最初からやり直します。

AOT

TS開発者によって書かれたコードにコンパイルされJSたコード、これはjs 既に同様の角度のためにコンパイルされています。これで、このコンパイルされた jsコードはブラウザによって再度コンパイルされ、をhtmlレンダリングできるようになりました。ただし、ここでの問題点は、の機能angularはすでにAOTコンパイラーによって処理されているため、ブラウザーはコンポーネントの作成、変更の検出、依存性注入についてそれほど心配する必要がないということです。だから、私たちは持っています：

より高速なレンダリング

AOTを使用すると、ブラウザーはプリコンパイルされたバージョンのアプリケーションをダウンロードします。ブラウザは実行可能コードをロードするため、最初にアプリをコンパイルするのを待たずに、すぐにアプリケーションをレンダリングできます。

非同期リクエストが少ない

コンパイラーは、アプリケーションJavaScript内に外部HTMLテンプレートとCSSスタイルシートをインライン化し、それらのソースファイルに対する個別のajax要求を排除します。

Angularフレームワークのダウンロードサイズの縮小

アプリが既にコンパイルされている場合は、Angularコンパイラーをダウンロードする必要はありません。コンパイラーはAngular自体の約半分なので、省略するとアプリケーションのペイロードが劇的に減少します。

テンプレートエラーを早期に検出する

AOTコンパイラーは、ユーザーがそれらを見ることができる前に、ビルドステップ中にテンプレートバインディングエラーを検出して報告します。

より良いセキュリティ

AOTは、HTMLテンプレートとコンポーネントを、クライアントに提供されるずっと前にJavaScriptファイルにコンパイルします。読み取るテンプレートがなく、危険なクライアント側のHTMLまたはJavaScriptの評価がないため、注入攻撃の機会が少なくなります。

残りの違いについては、ベニヤミン、ニサール、ガウランの箇条書きですでに説明しています。

自由に修正してください

BenyaminとNisarはここでいくつかの良い点を述べました。追加します。

理論的には、AOTはJITよりも生産目的では魅力的なオプションに見えますが、AOTが本当に価値があるかどうか疑問に思いました！

まあ、私はJeff Crossによる素晴らしい統計を見つけました、そしてそれはAOTがアプリの起動時間を大幅に削減することを証明しています。ジェフクロスの投稿からのスナップの下に、それについての簡単なアイデアが表示されます。

JiT（ジャストインタイム）コンパイル

名前自体は動作を説明し、ブラウザでページをロードするときにコードをコンパイルします。ブラウザはコンパイラをダウンロードし、アプリケーションコードをビルドしてレンダリングします。

開発環境に良いでしょう。

AoT（Ahead of Time）コンパイル

アプリケーションのビルド時にすべてのコードをコンパイルします。そのため、ブラウザはコンパイラをダウンロードしてコードをコンパイルすることを望んでいません。この方法では、ブラウザはすでにコンパイルされたコードをロードするだけで、アプリケーションを簡単にレンダリングできます。

本番環境で使用できます

JiTとAoTのコンパイルを以下のように比較できます

JIT（ジャストインタイムコンパイル）

ジャストインタイム（JIT）は、実行時にブラウザーでアプリをコンパイルする一種のコンパイルです。

ng build
ng serve

AOT（Ahead-of-Time Compilation）

Ahead-of-Time（AOT）は、ビルド時にアプリをコンパイルする一種のコンパイルです。

ng build --aot
ng serve --aot

1日の終わりに、AOT（Ahead-of-Time）とJIT（Just-in-Time）は同じことを行います。どちらもAngularコードをコンパイルして、ネイティブ環境（別名ブラウザー）で実行できるようにします。主な違いは、コンパイルがいつ行われるかです。AOTを使用すると、アプリがブラウザーにダウンロードされる前にコードがコンパイルされます。JITを使用すると、コードは実行時にブラウザーでコンパイルされます。

ここに比較があります：

AOTの利点：

• ブラウザで解析とコンパイルが行われないため、起動が速くなります。
• テンプレートは開発中にチェックされます（つまり、実行中のアプリのJavaScriptコンソールに表示されるすべてのエラーは、ビルドプロセスでスローされます）。
• 未使用の機能を取り除くことができ、コンパイラ自体は出荷されないため、ファイルサイズが小さくなります。

実際には、Angularコンパイラは1つしかありません。AOTとJITの違いは、タイミングとツールの問題です。AOTでは、コンパイラーは1セットのライブラリーを使用してビルド時に一度実行されます。JITを使用すると、さまざまなライブラリのセットを使用して、実行時にすべてのユーザーに対して毎回実行されます。

角度プロジェクトの開発中に使用するJITコンパイラ。このコンパイル（TSからJSへの変換）では、アプリケーションの実行中に発生します。本番環境にアプリケーションをデプロイするためのアプリケーションコードのビルド中にAOTが使用されるのに対し、今回はng build --prodコマンドを使用してアプリケーションコードをビルドし、webpackというフォルダーを生成します。webpackにはすべてのファイルのバンドルが含まれています（HTML 、CSS、typescriptなど）。

プロダクション用に生成されたwebpackフォルダーのサイズは、開発環境用に生成されたフォルダー（コマンド... ng buildを使用して）に比べてはるかに小さいです。これは、webpackフォルダー内にコンパイラーが含まれていないため、アプリケーションのパフォーマンスが向上します。 。