Kompilasi Just-in-Time (JiT) vs Ahead-of-Time (AoT) dalam Angular

111

Saya merujuk dokumentasi ini dan menemukan konsep kompilasi. Seseorang dapat menggunakan kompilasi JIT atau AOT. Namun, saya merasa sangat singkat dan perlu mengetahui poin-poin berikut secara detail,

Perbedaan antara kedua teknik tersebut
Rekomendasi tentang kapan harus menggunakan apa

angular compilation

— Gaurang Patel
sumber

148

JIT - Kompilasi TypeScript tepat pada waktunya untuk mengeksekusinya.

Dikompilasi di browser.
Setiap file disusun secara terpisah.
Tidak perlu membangun setelah mengubah kode Anda dan sebelum memuat ulang halaman browser.
Cocok untuk pembangunan lokal.

AOT - Kompilasi TypeScript selama fase pembuatan.

Dikompilasi oleh mesin itu sendiri, melalui baris perintah (Lebih cepat).
Semua kode dikompilasi bersama, sebariskan HTML / CSS di skrip.
Tidak perlu menerapkan kompiler (Setengah dari ukuran Angular).
Lebih aman, sumber asli tidak diungkapkan.
Cocok untuk produksi build.

— Benyamin Shoham
sumber

2

Selain itu, saya mengalami kinerja yang sangat buruk saat menggunakan kompilasi Just-in-Time, terutama pada perangkat Android lama. Selain itu, render-gap pada pemuatan halaman pertama jauh lebih besar (Pada perangkat Android lama hingga 10 detik tergantung pada ukuran proyek Anda).

— Felix Hagspiel

29

Ketikan tidak dikompilasi tepat pada waktunya, browser tidak dapat melakukannya. Dalam kedua kasus tersebut, skrip ketik dikompilasi selama proses pembuatan.

— Robouste

2

@Robouste: Inilah yang membingungkan saya .. Apa yang sebenarnya dikompilasi sebelumnya dan tepat pada waktunya .. (jika TJS dikompilasi segera). Ketika saya meminta halaman di explorer, javascript akan diunduh dan dijalankan di browser, Apakah ada yang mengetik perlu datang ke browser ??? tidak, tidak sama sekali ... Jadi apa yang sedang dikompilasi sebelumnya dan tepat waktu .. ?? Sebenarnya yang dimaksud adalah angular compiler. tautan ini akan menjawab semua pertanyaan: " angular.io/guide/aot-compiler "

— Assil

2

Saya bukan ahli tetapi ketika menggunakan JIT, sumber Angular dikirim ke browser dan itu akan mengkompilasi aplikasi. Ini memungkinkan Anda memiliki hal-hal dinamis yang perlu dikompilasi pada waktu proses. Dengan AOT, semuanya telah dikompilasi sebelumnya sehingga server mengirimkan situs web javascript umum. Anda mendapatkan eksekusi cepat dan waktu pemuatan yang lebih rendah.

— Robouste

jawaban luar biasa, Komentar juga Bermanfaat bagi saya.

— Rakshit Shah

61

Meskipun ada beberapa jawaban tetapi saya ingin menambahkan beberapa temuan saya juga, karena saya benar-benar bingung dengan apa yang sebenarnya sedang disusun seperti pada semua kasus, TS-> JSkonversi terjadi. Saya mengambil beberapa paragraf dari blog Jeff sebagai referensi.

JIT

The TSkode yang ditulis oleh pengembang dikompilasi ke JSkode. Sekarang, jskode yang dikompilasi ini dikompilasi oleh browser lagi sehingga htmldapat dirender secara dinamis sesuai dengan tindakan pengguna dan kode yang sesuai untuk angular (untuk komponen, deteksi perubahan, Injeksi Ketergantungan) juga dihasilkan saat runtime.

(Kompiler browser adalah yang mengambil arahan dan komponen aplikasi, bersama dengan HTML dan CSS yang sesuai, dan membuat pabrik komponen untuk dengan cepat menghapus instance dengan semua logika pembuatan tampilan mereka.)

Ketika aplikasi Angular 2 di-bootstrap di browser, kompilator JIT melakukan banyak pekerjaan untuk menganalisis komponen dalam aplikasi saat runtime dan menghasilkan kode di memori. Saat halaman di-refresh, semua pekerjaan yang telah dilakukan akan dibuang, dan compiler JIT melakukan pekerjaan itu lagi.

AOT

The TSkode yang ditulis oleh pengembang dikompilasi ke JSkode, ini js sudah dikompilasi untuk sudut juga . Sekarang, ini dikompilasi js kode dikompilasi oleh browser lagi sehingga htmldapat diberikan. Tapi, tangkapannya di sini adalah bahwa fitur-fitur angulartelah ditangani oleh AOTkompiler dan karenanya browser tidak perlu terlalu khawatir tentang pembuatan komponen, deteksi perubahan, Injeksi Ketergantungan. Jadi kita punya :

Rendering lebih cepat

Dengan AOT, browser mendownload versi aplikasi yang telah dikompilasi sebelumnya. Browser memuat kode yang dapat dieksekusi sehingga dapat langsung merender aplikasi, tanpa menunggu untuk mengompilasi aplikasi terlebih dahulu.

Permintaan asynchronous lebih sedikit

Kompilator menyebariskan template HTML eksternal dan lembar gaya CSS dalam aplikasi JavaScript, menghilangkan permintaan ajax terpisah untuk file sumber tersebut.

Ukuran unduhan kerangka Angular yang lebih kecil

Tidak perlu mengunduh kompiler Angular jika aplikasi sudah dikompilasi. Kompilernya kira-kira setengah dari Angular itu sendiri, jadi mengabaikannya secara dramatis akan mengurangi payload aplikasi.

Deteksi kesalahan template lebih awal

Kompilator AOT mendeteksi dan melaporkan kesalahan pengikatan template selama langkah pembuatan sebelum pengguna dapat melihatnya.

Keamanan yang lebih baik

AOT mengompilasi template dan komponen HTML ke dalam file JavaScript jauh sebelum disajikan ke klien. Tanpa template untuk dibaca dan tidak ada evaluasi JavaScript atau HTML sisi klien yang berisiko, peluang serangan injeksi lebih kecil.

Perbedaan yang tersisa sudah dibahas dalam poin-poin Benyamin, Nisar & Gaurang.

Jangan ragu untuk mengoreksi saya

— Shashank Vivek
sumber

5

Terima kasih. Saya akhirnya mengerti setelah membaca jawaban Anda dan saya membaca banyak darinya.

— Mario Subotic

24

Benyamin dan Nisar menyebutkan beberapa poin bagus di sini. Saya akan menambahkannya.

Meskipun secara teoritis, AOT terlihat sebagai opsi yang menarik daripada JIT untuk tujuan produksi tetapi saya ragu apakah AOT benar-benar layak!

Nah, saya menemukan statistik bagus dari Jeff Cross dan itu membuktikan bahwa AOT secara signifikan mengurangi waktu bootstrap aplikasi. Di bawah snap dari posting Jeff Cross akan memberi Anda gambaran cepat tentang itu,

— Gaurang Patel
sumber

19

Kompilasi JiT (Just in Time)

Nama itu sendiri menggambarkan cara kerja, Ini mengkompilasi kode tepat pada saat memuat halaman di browser. Browser akan mengunduh kompiler dan membangun kode aplikasi dan merendernya.

Ini akan bagus untuk lingkungan pengembangan.

Kompilasi AoT (Ahead of Time)

Ini mengkompilasi semua kode pada saat membangun aplikasi. Jadi browser tidak ingin mengunduh kompiler dan mengkompilasi kodenya. Dalam metode ini browser dapat dengan mudah merender aplikasi hanya dengan memuat kode yang sudah dikompilasi.

Dapat digunakan di lingkungan produksi

Kita bisa membandingkan kompilasi JiT dan AoT seperti di bawah ini

— vivekkurien
sumber

1

Apakah ini berarti bahwa aplikasi JiT akan memuat lebih cepat pada kali pertama tetapi setelah itu aplikasi AoT akan selalu dimuat lebih cepat?

— JKL

Tidak pernah. JiT memuat lebih lambat dari AoT

— vivekkurien

AOT lebih lambat dari JIT karena tidak sesuai saat runtime. Anda harus mengubah judul jit dan aot

— Tn. AF

17

JIT (Kompilasi Just-in-Time)

Just-in-Time (JIT) adalah jenis kompilasi yang mengompilasi aplikasi Anda di browser saat runtime.

ng build
ng serve

AOT (Kompilasi Ahead-of-Time)

Ahead-of-Time (AOT) adalah jenis kompilasi yang mengompilasi aplikasi Anda pada waktu build.

ng build --aot
ng serve --aot

— Joby Wilson Mathews
sumber

2

apa perbedaan antara 2 angka ini? bukankah itu membutuhkan intro?

— Tn. AF

Jadi pada dasarnya Ahead-of-Time lebih seperti Ahead-of-Runtime.

— Alireza Kahaei

@ Mr.AF baru saja memperhatikan bahwa sekarang juga, gambarnya sama.

— Tiago Martins Peres 李大仁

14

Pada akhirnya, AOT (Ahead-of-Time) dan JIT (Just-in-Time) melakukan hal yang sama. Mereka berdua mengkompilasi kode Angular Anda sehingga dapat berjalan di lingkungan asli (alias browser). Perbedaan utamanya adalah saat kompilasi terjadi. Dengan AOT, kode Anda dikompilasi sebelum Aplikasi diunduh di Browser. Dengan JIT, kode Anda dikompilasi saat runtime di browser.

Berikut perbandingannya:

Manfaat AOT:

Memulai lebih cepat karena Parsing dan Kompilasi tidak terjadi di Browser.
Template diperiksa selama pengembangan (yang berarti semua error yang kita lihat di konsol javascript di aplikasi yang sedang berjalan, jika tidak, akan dibuang dalam proses build kita).
Ukuran File Lebih Kecil sebagai Fitur yang tidak terpakai dapat dihapus dan Compiler itu sendiri tidak dikirimkan.

— pk_code
sumber

4

Sebenarnya hanya ada satu kompiler Angular. Perbedaan antara AOT dan JIT adalah masalah waktu dan perkakas. Dengan AOT, kompilator berjalan sekali pada waktu pembangunan menggunakan satu set pustaka; dengan JIT, ia berjalan setiap saat untuk setiap pengguna pada waktu proses menggunakan kumpulan pustaka yang berbeda.

— anis programmer
sumber

2

Kompiler JIT yang kami gunakan selama pengembangan proyek sudut. Dalam kompilasi ini (konversi TS ke JS) terjadi selama runtime aplikasi. Sedangkan AOT digunakan selama membangun kode aplikasi untuk penerapan aplikasi dalam produksi, saat itu kami membuat kode aplikasi menggunakan perintah ng build --prod yang menghasilkan folder bernama webpack, webpack berisi bundel dari semua file (HTML , CSS dan ketikan) dalam format javascript terkompresi.

Ukuran folder webpack yang dihasilkan untuk produksi jauh lebih kecil daripada folder yang dibuat untuk lingkungan pengembangan (menggunakan perintah ... ng build), karena tidak berisi compiler di dalam folder webpack, Ini meningkatkan kinerja aplikasi .

— pengguna13601355
sumber