web-dev-qa-db-ja.com

Angular 2：ジャストインタイム（JiT）とアヘッドオブタイム（AoT）のコンパイル

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

  • これら2つの手法の違い
  • 何を使用するかについての推奨事項
angularcompilation
81
Gaurang Patel

JIT - TypeScriptを実行するのに間に合うようにコンパイルする。

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

AOT - ビルドフェーズ中にTypeScriptをコンパイルします。

  • マシン自体によって、コマンドライン（Faster）を介してコンパイルされています。
  • すべてのコードをまとめてコンパイルし、スクリプト内のHTML/CSSをインライン化しました。
  • コンパイラをデプロイする必要はありません（Angular sizeの半分）。
  • より安全なオリジナルの情報源は開示されていません。
  • プロダクションビルドに適しています。
115
Benyamin Shoham

いくつかの答えがありますが、私も私の調査結果のいくつかを追加したいと思います、なぜなら私は実際にコンパイルされているものと本当に混乱していたすべての場合と同様に、TS - > JS変換が行われます。参考として、 Jeff's blog からパラを取っています。

JIT

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

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

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

AOT

開発者によって書かれたTSコードはJSコードにコンパイルされます、このjsはすでにangle用にもコンパイルされています。さて、このコンパイルされたjsコードは再びブラウザによってコンパイルされるので、htmlをレンダリングすることができます。しかし、angularの機能はAOTコンパイラによって既に注意が払われているため、ブラウザはあまり気にする必要はありませんコンポーネントの作成、変更の検出、依存性注入について。だから、我々は持っています：

より速いレンダリング

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

非同期要求が少ない

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

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

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

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

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

より良いセキュリティ

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

残りの違いは、Benyamin、Nisar、Gaurangの箇条書きで既に説明されています。

気軽に私を直してください

34
Shashank Vivek

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

理論的には、AOTは生産目的のためにJITよりも魅力的な選択肢に見えますが、私はAOTが本当に価値があるかどうか私には疑いがありました！

そうですね、私は Jeff Crossによる素晴らしい統計 を見つけました、そしてそれはAOTがアプリのブートストラップ時間を大幅に減らすことを証明します。下記のJeff Crossの記事から抜粋すると、それについての素早いアイデアがわかります。

enter image description here

21
Gaurang Patel

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

enter image description here

AOT（Ahead-of-Time Compilation）

enter image description here

7
Joby Wilson Mathews

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

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

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

AoT（Ahead of Time）コンパイル

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

実稼働環境で使用できます

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

enter image description here

7
vivekkurien

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

3
anis programmer

かなり良い説明を見つけました ここ..

TLDR;

基本的には、angle2アプリでコードを2回コンパイルします。1回はTSからJSに変換し、次にブラウザはJSをバイナリに変換します。

後者は制御できませんが、TSからJSへのコンパイルがいつ実行されるかを制御できます。

Angular2では、JIT（デフォルト）を使用すると、コードがブラウザにロードされた後（つまりTS - > JS - > binary）に両方のコンパイルが行われます。 TS - > JSコンパイルをブラウザ上でオンザフライで実行することは、追加のオーバーヘッドであるだけでなく、Angular 2コンパイラは、Angular 2パッケージのほぼ半分のサイズであるため、これを回避すれば、サイズを削減できます。大幅にペイロード。

AOTはTSコードをJSに先入れして、コードの50％を占める角度付きコンパイラーの必要性をなくすことによって、コンパイル時間とコードのサイズを削減します

3
mercy

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

これが比較です。 enter image description here

AOTの利点：

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