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ğlarsınız? Performans metriklerini tanıtarak ve 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 geçme süresine bağlı olarak uygulamanızın ne kadar JavaScript 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 bunu Angular komut satırı arayüzünü (CLI) kullanarak uygulayabilirsiniz. Bunun nasıl çalıştığını görmek için GitHub'daki bu örnek uygulamaya göz atın.

angular.json'te aşağıdaki bütçenin yapılandırıldığını görürsünüz:

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

Belirtilenlerin özeti aşağıda 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ükse 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 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. Bunun için ek adımlara gerek yoktur. 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 öğelerine bakarak ve boyutlarını doğrulayarak kontrolleri derleme sırası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 Lighthouse'ın LightWallet aracı, dinamik olarak yüklenen kaynakları dikkate alarak çok doğru bir kontrol gerçekleştirebilir ancak her çalıştırıldığı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'te 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).