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

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

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.

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

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,

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

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

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.

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.

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 .