Bu belgeye atıfta bulunuyordum ve derleme konseptiyle karşılaştım. JIT veya AOT derlemesi kullanılabilir. Ancak, çok kısa buldum ve aşağıdaki noktaları ayrıntılı olarak bilmem gerekiyor,
Yanıtlar:
JIT - TypeScript'i çalıştırmak için tam zamanında derleyin.
AOT - Derleme aşamasında TypeScript'i derleyin.
ng build
Bazı cevaplar olmasına rağmen, bazı bulgularımı da eklemek isterim, çünkü her durumda olduğu gibi gerçekte derlenen şeyle gerçekten kafam karıştı , TS-> JSdönüşüm gerçekleşir. Referans olarak Jeff'in blogundan biraz para alıyorum .
TSGeliştirici tarafından yazılan kod derlenmiş JSkod. Şimdi, bu derlenen jskod, htmlkullanıcı eylemine göre dinamik olarak oluşturulabilmesi için tarayıcı tarafından tekrar derlenir ve buna göre kodlar angular (bileşenler için, değişiklik algılama, Bağımlılık Enjeksiyonu) çalışma zamanında da oluşturulur.
(Tarayıcı derleyicisi, bir uygulamanın yönergelerini ve bileşenlerini karşılık gelen HTML ve CSS'leriyle birlikte alan ve tüm görünüm oluşturma mantığıyla örnekleri hızlı bir şekilde damgalamak için bileşen fabrikaları oluşturan şeydir.)
Bir Angular 2 uygulaması tarayıcıda önyüklendiğinde, JIT derleyicisi, uygulamadaki bileşenleri çalışma zamanında analiz etmek ve bellekte kod oluşturmak için çok fazla çalışma gerçekleştirir. Sayfa yenilendiğinde, yapılan tüm işler atılır ve JIT derleyicisi işi baştan yapar.
TSGeliştirici tarafından yazılan kod derlenmiş JSkod bu js
zaten de açısal için derlenmiştir . Şimdi, bu derlenen js kod, tarayıcı tarafından yeniden derlenebilmesi için yeniden derlenir html. Ancak, buradaki püf noktası, özelliklerinin derleyici angulartarafından halihazırda halledilmiş olması AOTve dolayısıyla tarayıcının bileşen oluşturma, değişiklik algılama, Bağımlılık Enjeksiyonu hakkında fazla endişelenmesine gerek olmamasıdır . Böylece sahibiz :
Daha hızlı render
AOT ile tarayıcı, uygulamanın önceden derlenmiş bir sürümünü indirir. Tarayıcı çalıştırılabilir kodu yükler, böylece önce uygulamayı derlemeyi beklemeden uygulamayı hemen oluşturabilir.
Daha az eşzamansız istek
Derleyici, harici HTML şablonlarını ve CSS stil sayfalarını uygulama JavaScript'i içinde satır içine alarak bu kaynak dosyalar için ayrı ajax isteklerini ortadan kaldırır.
Daha küçük Açısal çerçeve indirme boyutu
Uygulama zaten derlenmişse, Angular derleyicisini indirmeye gerek yoktur. Derleyici, Angular'ın kabaca yarısıdır, bu nedenle onu atlamak, uygulama yükünü önemli ölçüde azaltır.
Şablon hatalarını daha önce tespit edin
AOT derleyicisi, kullanıcılar görmeden önce derleme adımı sırasında şablon bağlama hatalarını algılar ve bildirir.
Daha iyi güvenlik
AOT, HTML şablonlarını ve bileşenlerini istemciye sunulmadan çok önce JavaScript dosyalarına derler. Okunacak şablon ve riskli istemci tarafı HTML veya JavaScript değerlendirmesi olmadığından, enjeksiyon saldırıları için daha az fırsat vardır.
Geriye kalan farklılıklar, Benyamin, Nisar ve Gaurang'ın madde işaretlerinde zaten ele alınmıştır.
Beni düzeltmek için çekinmeyin
Benyamin ve Nisar burada bazı güzel noktalara değindi. Ben ekleyeceğim.
Teorik olarak, AOT, üretim amacıyla JIT'den daha çekici bir seçenek gibi görünse de, AOT'nin gerçekten buna değip değmeyeceğinden şüphem vardı!
Jeff Cross'tan güzel istatistikler buldum ve bu, AOT'nin uygulamanın önyükleme süresini önemli ölçüde azalttığını kanıtlıyor. Jeff Cross'un gönderisinden bir kesit size bu konuda hızlı bir fikir verecektir.
JiT (Tam Zamanında) Derlemesi
İsmin kendisi çalışmayı açıklar, Kodu tam da sayfanın tarayıcıya yüklendiği anda derler. Tarayıcı, derleyiciyi indirecek ve uygulama kodunu oluşturacak ve onu oluşturacaktır.
Geliştirme ortamı için iyi olacak.
AoT (Zamanın Ötesinde) Derlemesi
Uygulamayı oluştururken tüm kodu derler. Dolayısıyla tarayıcı, derleyiciyi indirmek ve kodu derlemek istemez. Bu yöntemde tarayıcı, önceden derlenmiş kodu yükleyerek uygulamayı kolayca oluşturabilir.
Üretim ortamında kullanılabilir
JiT ve AoT derlemesini aşağıdaki gibi karşılaştırabiliriz
JIT (Tam Zamanında Derleme)
Just-in-Time (JIT), uygulamanızı çalışma zamanında tarayıcıda derleyen bir derleme türüdür.
ng build
ng serve
AOT (Zamanın Ötesinde Derleme)
Zamanın Öncesi (AOT), uygulamanızı derleme zamanında derleyen bir derleme türüdür.
ng build --aot
ng serve --aot
Günün sonunda, AOT (Zamanın Önünde) ve JIT (Tam Zamanında) aynı şeyleri yapar. Her ikisi de Angular kodunuzu derler, böylece yerel bir ortamda (tarayıcı olarak da bilinir) çalışabilir. Temel fark, derlemenin gerçekleştiği zamandır. AOT ile kodunuz, Uygulama Tarayıcıya indirilmeden önce derlenir. JIT ile kodunuz tarayıcıda çalışma zamanında derlenir.
İşte karşılaştırma:
AOT'nin faydaları:
Aslında yalnızca bir Angular derleyici vardır. AOT ve JIT arasındaki fark, bir zamanlama ve takımlama meselesidir. AOT ile derleyici, bir kitaplık kümesi kullanarak derleme zamanında bir kez çalışır; JIT ile çalışma zamanında her kullanıcı için farklı bir kitaplık seti kullanarak çalışır.
Açısal projenin geliştirilmesi sırasında kullandığımız JIT derleyicisi. Bu derlemede (TS'den JS'ye dönüştürme) uygulamanın çalışma zamanı sırasında gerçekleşir. Uygulamanın üretimde konuşlandırılması için uygulama kodu oluşturulurken AOT kullanıldığında, uygulama kodumuzu webpack adlı bir klasör oluşturan ng build --prod komutunu kullanarak oluşturduğumuzda, webpack tüm dosyaların paketini (HTML , CSS ve typcript) sıkıştırılmış javascript formatında.
Üretim için oluşturulan web paketi klasörünün boyutu, geliştirme ortamı için oluşturulan klasörden çok daha azdır (komut ... ng build kullanılarak), çünkü derleyiciyi web paketi klasörünün içinde içermez, uygulamanın performansını artırır .