Derleme sürecinize performans bütçelerini dahil edin

Milica Mihajlija

Performans bütçesini tanımladıktan sonra sıra bunu takip etmek için derleme sürecini ayarlamaya gelir. Seçilen performans metrikleri için eşikler tanımlamanıza ve bütçeyi aşarsanız sizi uyarmanıza olanak tanıyan bir dizi araç vardır. İhtiyaçlarınıza ve mevcut ayarlarınıza en uygun seçeneği nasıl seçeceğinizi öğrenin. 🕵️ ♀️

Lighthouse performans bütçeleri

Lighthouse, siteleri performans, erişilebilirlik, en iyi uygulamalar ve sitenizin progresif web uygulaması olarak ne kadar iyi performans gösterdiği gibi birkaç önemli alanda test eden bir denetleme aracıdır.

Lighthouse (v5+) komut satırı sürümü, aşağıdakilere göre performans bütçelerinin belirlenmesini destekler:

• kaynak boyutu
• kaynak sayısı

Aşağıdaki kaynak türlerinden herhangi biri için bütçe ayarlayabilirsiniz:

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

Bütçeler bir JSON dosyasında ayarlanır ve tanımlandıktan sonra yeni "Bütçe Aşımı" sütunu herhangi bir sınırı aşıp aşmadığınızı gösterir.

Web paketi performans ipuçları

Webpack, kodunuzun kullanıcılara yayınlanma şeklini optimize etmek için güçlü bir geliştirme aracıdır. Öğe boyutuna göre performans bütçelerini ayarlamayı da destekler.

Paket boyutunuz sınırın üzerine çıktığında komut satırı uyarıları veya hataları almak için webpack.config.js ürününde performans ipuçlarını etkinleştirin. Bu, geliştirme süreci boyunca öğe boyutlarına dikkat etmenin mükemmel bir yoludur.

Derleme adımından sonra webpack, öğelerin ve boyutlarının renk kodlu bir listesini oluşturur. Bütçeyi aşan her şey sarı renkle vurgulanır.

Hem öğeler hem de giriş noktaları için varsayılan sınır 250 KB'tır. Yapılandırma dosyasında kendi hedeflerinizi ayarlayabilirsiniz.

Bütçeler, sıkıştırılmamış öğe boyutlarıyla karşılaştırılır. Sıkıştırılmamış JavaScript boyutu, yürütme süresiyle ilgilidir. Büyük dosyaların yürütülmesi özellikle mobil cihazlarda uzun sürebilir.

Grup boyutu

Grup boyutu, öğe boyutunu belirlediğiniz bir eşiğe göre test eden basit bir npm paketidir. Yerel olarak çalışabilir ve CI'nızla entegre edilebilir.

Paket boyutu KSA

Bir eşik ve test etmek istediğiniz dosyayı belirterek bundlesize CLI'ı çalıştırın.

bundlesize -f "dist/bundle.js" -s 170kB

Paket boyutu, renk kodlu test sonuçlarını tek satırda sunar.

CI için paket boyutu

Pull isteklerinde otomatik olarak boyut sınırları uygulamak için paket boyutundan en yüksek değeri elde etmek için CI ile entegre etmeniz gerekir. Paket boyutu testi başarısız olursa bu pull isteği birleştirilmez. GitHub'da Travis CI, CircleCI, Wercker ve Drone ile pull istekleri için çalışır.

Bugün hızlı bir uygulamanız olabilir, ancak yeni kod eklemek çoğu zaman bunu değiştirebilir. Bundlesize ile pull isteklerini kontrol etmek performans gerilemelerini önlemenize yardımcı olur. Bootstrap, Tinder, Trivago ve diğer pek çok marka, bütçelerini kontrol altında tutmak için bu platformu kullanıyor.

Paket boyutu kullanıldığında her dosya için ayrı olarak eşik belirlemek mümkündür. Bu, özellikle uygulamanızda bir grubu bölüyorsanız yararlı olur.

Varsayılan olarak gzip biçiminde sıkıştırılmış öğe boyutlarını test eder. Sıkıştırma seçeneğini kullanarak brotli sıkıştırmaya geçebilir veya özelliği tamamen kapatabilirsiniz.

Deniz Feneri Botu

Lighthouse Bot, Travis CI ile entegre olur ve beş Lighthouse denetim kategorisinden herhangi birini temel alarak bütçeleri uygular. Örneğin, Lighthouse performans puanınız için 100 tutarında bir bütçe belirleyebilirsiniz. Bazen tek bir öğeyi takip etmek, öğe bütçelerinin ve Lighthouse puanlarının birçok unsuru hesaba katmaktan daha kolaydır.

Lighthouse Bot, hazırlık sunucusuna bir site dağıttıktan sonra bir denetim çalıştırır. .travis.yml ürününde --perf, --a11y, --bp, --seo veya --pwa seçenekleriyle belirli Lighthouse kategorileri için bütçeler belirleyin. En az 90 puan alarak yeşil bölgede kalmaya çalışın.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

GitHub'da bir pull isteğinin puanları, belirlediğiniz eşiğin altına düşerse Lighthouse Bot, çekme isteğinin birleştirilmesini engelleyebilir. ⛔

Ardından Lighthouse Bot'u, güncellenen puanlarla birlikte pull isteğinize yorum yapar. Bu, kod değişiklikleri yaşanırken performans hakkında diyalog kurulmasını teşvik eden şık bir özelliktir.

Pull isteğinizin düşük bir Lighthouse puanıyla engellendiğini tespit ederseniz Lighthouse CLI veya Geliştirici Araçları'nda bir denetim çalıştırın. Performans sorunları hakkında ayrıntıları ve basit optimizasyonlara yönelik ipuçlarını içeren bir rapor oluşturur.

Özet