Angular KSA ile performans bütçeleri

Uygulamanızın hızlı kalmasını sağlamak için paketlerinizin zaman içindeki boyutlarını izleyin.

Minko Gechev

Bir Angular uygulamasını optimize etmek önemlidir ancak performansının zaman içinde gerilememesini nasıl sağlayabilirsiniz? Performans metrikleri sunup her kod değişikliğinde bunları izleyerek

Önemli metriklerden biri, uygulamanızla birlikte gönderilen JavaScript'in boyutudur. Her derleme veya çekme isteğinde izleyeceğiniz bir performans bütçesi uygulayarak optimizasyonlarınızın zaman içinde devam etmesini sağlayabilirsiniz.

Performans bütçenizi hesaplama

Hedeflediğiniz Etkileşime Hazır Olma Süresi'ne bağlı olarak, uygulamanızın ne kadar JavaScript'i yükleyebileceğini tahmin etmek için bu online bütçe hesaplayıcıyı kullanabilirsiniz.

Bütçe hesaplayıcı

Angular CLI'de performans bütçesini yapılandırma

Hedef JavaScript bütçeniz olduğunda Angular komut satırı arayüzünü (CLI) kullanarak bunu zorunlu kılabilirsiniz. Bunun nasıl çalıştığını görmek için GitHub'daki bu örnek uygulamaya göz atın.

angular.json içinde aşağıdaki bütçenin yapılandırıldığını göreceksiniz:

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

Aşağıda, belirtilenlerin bir özeti verilmiştir:

  • main adlı bir JavaScript paketi için bir bütçe var.
  • main paketi 170 KB'tan büyükse Angular KSA, uygulamayı derlediğinizde konsolda bir uyarı gösterir.
  • main paketi 250 KB'tan büyük olursa derleme başarısız olur.

Şimdi ng build --prod komutunu çalıştırarak uygulamayı derlemeyi deneyin.

Konsolda şu hatayı görürsünüz:

Bütçe hatası

Derleme hatasını düzeltmek için rxjs/internal/operators'ten içe aktarma içeren app.component.ts dosyasına göz atın. Bu, rxjs tüketicileri tarafından kullanılmaması gereken özel bir içe aktarma işlemidir. Bu, paket boyutunu çok fazla artırır. Doğru içe aktarma dosyasını rxjs/operators güncelleyip derlemeyi tekrar çalıştırdığınızda bütçe kontrolünü başarıyla geçtiğini görürsünüz.

Angular CLI'de diferansiyel yükleme varsayılan olarak etkin olduğundan ng build komutunun uygulamanın iki derlemesi oluşturduğunu unutmayın:

  • ECMAScript 2015 desteği olan tarayıcılar için bir derleme. Bu derleme daha az polyfill ve daha modern JavaScript söz dizimi içerir. Bu söz dizimi daha etkileyicidir ve daha küçük paketler oluşturur.
  • ECMAScript 2015 desteği olmayan daha eski tarayıcılar için bir derleme. Eski söz dizimi daha az ifade gücü içerir ve daha fazla polyfill gerektirir. Bu da daha büyük paketlere yol açar.

Örnek uygulamanın index.html dosyası, modern tarayıcıların daha küçük ECMAScript 2015 derlemesinden yararlanabilmesi ve eski tarayıcıların ECMAScript 5 derlemesine geri dönebilmesi için her iki derlemeyi de belirtir.

Sürekli entegrasyon kapsamında bütçenizi zorunlu kılma

Sürekli entegrasyon (CI), uygulamanızın bütçesini zaman içinde izlemenin uygun bir yolunu sunar. Neyse ki bunu ayarlamanın en hızlı yolu, uygulamanızı Angular KSA ile oluşturmaktır. Hiçbir ek adım gerekmez. JavaScript paketi bütçeyi aştığında süreç 1 koduyla sonlandırılır ve derleme başarısız olur.

Dilerseniz bundlesize ve Lighthouse'u kullanarak da performans bütçesi uygulayabilirsiniz. Angular CLI ve Lighthouse'taki performans bütçeleri arasındaki temel fark, kontrollerin ne zaman yapıldığıdır. Angular KSA, üretim öğelerini inceleyip boyutlarını doğrulayarak kontrolleri derleme zamanında gerçekleştirir. Ancak Lighthouse, uygulamanın dağıtılan sürümünü açar ve öğe boyutunu ölçer. Her iki yaklaşımın da avantajları ve dezavantajları vardır. Angular CLI'nin yaptığı kontrol daha az sağlamdır ancak tek bir disk araması olduğundan çok daha hızlıdır. Öte yandan Lightwallet of Lighthouse, dinamik olarak yüklenen kaynakları göz önünde bulundurarak çok doğru bir kontrol gerçekleştirebilir ancak her çalıştığında uygulamayı dağıtması ve açması gerekir.

bundlesize, Angular CLI'nin bütçe kontrolüne oldukça benzer. Aradaki temel fark, bundlesize'ın kontrol sonuçlarını doğrudan GitHub'ın kullanıcı arayüzünde gösterebilmesidir.

Sonuç

Angular uygulamanızın performansının zaman içinde düşmediğinden emin olmak için Angular CLI ile performans bütçeleri oluşturun:

  1. Bütçe hesaplayıcıyı kullanarak veya kuruluşunuzun uygulamalarını izleyerek kaynak boyutu için bir referans belirleyin.
  2. projects.[PROJECT-NAME].architect.build.configurations.production.budgets altındaki angular.json bölümünde boyut bütçelerini yapılandırma
  3. Bütçeler, Angular CLI ile her derlemede otomatik olarak uygulanır.
  4. Sürekli entegrasyon kapsamında bütçe izlemeyi deneyebilirsiniz (Angular KSA ile de yapılabilir).