Açısal Derleme

Önce bir Angular uygulamasını derlemenin yollarını anlayalım ve ardından Angular'da derleme modlarının türlerine dalalım.

Angular CLI'de aşağıdaki iki komut kullanılarak açısal bir uygulama derlenebilir.

1. ng-hizmet
2. ng-build

1. Her iki komut da uygulamayı derler ve varsayılan olarak geliştirme derlemesi üretir. Geliştirme yapısında, derlenen dosyalar Angular tarafından yapılan herhangi bir optimizasyona sahip değildir.
2. Her ikisi de uygulamada bulunan tüm dosyaları bir araya getirir. Paketleme, tüm dosyaları tek bir dosyada birleştirme işlemidir. Angular tarafından yapılan optimizasyon işlemlerinden biridir. Bu süreçte, varsayılan olarak kaynak harita dosyalarıyla birlikte 5 tür paket JavaScript dosyası üretir. Bu dosyalar , tarayıcı tarafından yüklenen index.html dosyasına gömülecektir .

2) polyfills.bundle.js - Uygulamayı farklı tarayıcılarla uyumlu hale getirmek için betikleri içerir.

3) main.bundle.js - Tüm uygulama dosyalarında bulunan kodu içerir.

4) styles.bundle.js - Uygulama tarafından kullanılan stilleri içerir.

5) vendor.bundle.js - İçindeki tüm Angular + 3. parti kitaplıklarını içerir.

3. Her ikisi de varsayılan olarak geliştirme derlemesi üretir.

Farklılıklar:

1. ng- service : Uygulamayı bellekten derler ve çalıştırır ve sonuç olarak yalnızca geliştirme sürecinde kullanılır. Yapı dosyalarını herhangi bir klasöre yazmaz. Dolayısıyla bu işlem başka bir sunucuda konuşlandırmak için kullanılamaz.
2. ng-build: Uygulamayı derler ve yapı dosyalarını harici bir klasörde üretir. Çıktı klasörünün adı, 'angular.json' dosyasındaki 'yapı' bölümünde bulunan outputPath özelliğinin değerine göre belirlenir. Sonuç olarak, sonunda oluşturulan bu çıktı klasörü herhangi bir harici sunucuya dağıtmak için kullanılabilir.

1. JIT (Tam Zamanında) Derlemesi

2. AOT (Zamanın Ötesinde) Derlemesi

Angular 8'e kadar, JIT derlemesi varsayılan derlemedir. Angular 9'dan beri, AOT Compilation varsayılan derleme modudur. Ng-service veya ng-build komutu yürütüldüğünde, derleme türü, 'angular.json' dosyasındaki ilgili bölümlerde bulunan 'aot' değerine bağlıdır.

Ayrıca AOT derlemesi, Angular CLI'de 'aot' bayrağını true olarak ayarlayarak Angular cli kullanılarak yapılabilir.

1.ng servis - aot = true

2.ng yapı - aot = true

1. JIT Derlemesi:

Adından da anlaşılacağı gibi, derleme, uygulamanın çalışma süresi boyunca yapılır. Tarayıcı, derleyiciyi uygulama dosyalarıyla birlikte indirir. Derleyici, tarayıcıya yüklenen vendor.bundle.js dosyasının boyutunun yaklaşık% 45'idir.

Dezavantajları:

1. Kullanıcı, önce derleyicinin tarayıcıya yüklenmesini ve ardından uygulama yüklenmesini beklemelidir. Böylece bekleme süresi artar.

2. Çalışma süresi boyunca uygulamanın genel performansını etkileyecek olan derleyicinin varlığı nedeniyle uygulamanın boyutu artar.

3. Bunda, şablon bağlama hataları tespit edilmedi, yani derleyici oluşturma işlemi sırasında herhangi bir hata atmaz.

2. AOT Derlemesi:

Bu süreçte derleme, derleme işlemi sırasında yapılır ve paketlenmiş, tarayıcı tarafından indirilen derlenmiş dosyalar. Derleme zaten yapıldığından, vendor.bundle.js dosyası derleyici kodunu içermez ve dolayısıyla boyutu yaklaşık% 50 azalır.

Avantajlar:

• Tarayıcı, uygulamanın yalnızca önceden derlenmiş sürümünü indirdiği için AOT ile uygulamanın daha hızlı oluşturulması. Tarayıcı çalıştırılabilir kodu yükler, böylece önce uygulamayı derlemeyi beklemeden uygulamayı hemen oluşturabilir.
• Daha küçük 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.
• Bunda, uygulamanın derleme sürecinde şablon bağlama hataları tespit edildi. Bu nedenle şablon hataları daha önce tanımlanmıştır.

npm kaynak harita-gezginini yükle - kaydet-dev

Araç kurulduktan sonra, geliştirme yapısını ng build komutunu kullanarak yapın . Oluşturma tamamlandıktan sonra, aşağıdaki komutu yürütün.

node_modules \ .bin \ source-map-explorer dist \ vendor.bundle.js

Yukarıdaki komut, source-map-explorer'ı satıcı paketine karşı çalıştırır ve bunun grafiğini tarayıcıda görüyoruz. Açısal derleyicinin paket boyutunun yaklaşık yüzde 45'i olduğuna dikkat edin.

Şimdi, Angular CLI'de AOT derleme komutunu çalıştırdıktan sonra yukarıdaki komutu çalıştırın. Vendor.bundle.js dosyasının genel boyutunun yarı yarıya azaldığını gözlemliyoruz.

Bu nedenle, bir üretim sunucusunda uygulamanın konuşlandırılması sırasında AOT derlemesi çok tavsiye edilir.

Bana okuduğunuz için çok teşekkür ederim ve zaman ayırdığınız için teşekkür ederim :)