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

Milica Mihajlija

Performans bütçesini belirledikten sonra, bütçeyi takip etmek için derleme sürecini ayarlamanız gerekir. Seçilen performans metrikleri için eşikler tanımlamanıza ve bütçeyi aşarsanız sizi uyarmanıza olanak tanıyan çeşitli araçlar vardır. İhtiyaçlarınıza ve mevcut kurulumunuza en uygun olanı 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 denetim aracıdır.

Lighthouse'ın komut satırı sürümü (v5 ve üzeri), aşağıdakilere göre performans bütçeleri ayarlamanızı 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 belirlenir ve tanımlandıktan sonra yeni "Bütçe Aşımı" sütunu, herhangi bir sınırı aşıp aşmadığınızı size bildirir.

Lighthouse raporundaki "Bütçeler" bölümü

Web paketi performansıyla ilgili ipuçları

Webpack, kodunuzun kullanıcılara nasıl sunulduğunu optimize etmek için kullanılan güçlü bir derleme aracıdır. Ayrıca performans bütçelerinin öğe boyutuna göre ayarlanmasını da destekler.

Paket boyutunuz sınırı aştığında komut satırı uyarıları veya hataları almak için webpack.config.js'de performans ipuçlarını etkinleştirin. Bu, geliştirme süreci boyunca öğe boyutlarına dikkat etmek için mükemmel bir yöntemdir.

Webpack, derleme adımını tamamladıktan sonra öğelerin ve boyutlarının renk kodlu bir listesini oluşturur. Bütçeyi aşan tüm öğeler sarı renkle vurgulanır.

Vurgulanan bundle.js, bütçenizden daha büyük

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

Web paketi paket boyutu uyarısı ⚠️

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 ilişkilidir ve büyük dosyaların yürütülmesi (özellikle mobil cihazlarda) uzun sürebilir.

Not: Sıkıştırılmış öğe boyutları, aktarma süresini etkiler. Bu durum, yavaş ağlarda çok önemlidir.

Bonus özellik: Web paketi yalnızca sizi uyarmakla kalmaz, paketlerinizi nasıl küçülteceğiniz konusunda da size bir öneride bulunur. 💁

Bundlesize

Bundlesize, öğ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'yi çalıştırın.

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

Bundlesize, renk kodlu test sonuçlarını tek bir satırda gösterir.

bundlesize CLI testi başarısız ❌

bundlesize CLI testi başarılı ✔️

CI için paket boyutu

Paket boyutunu, çekme isteklerinde boyut sınırlarını otomatik olarak uygulamak için bir CI ile entegre ederseniz en iyi şekilde kullanabilirsiniz. Paket boyutu testi başarısız olursa ilgili çekme isteği birleştirilmez. Travis CI, CircleCI, Wercker ve Drone ile GitHub'daki pull istekleri için çalışır.

GitHub'da paket boyutu denetimi durumu

Şu anda hızlı bir uygulamanız olabilir ancak yeni kod eklemek bu durumu genellikle değiştirebilir. Paket boyutu ile çekme isteklerini kontrol etmek, performans gerilemelerini önlemenize yardımcı olur. Bootstrap, Tinder, Trivago ve daha birçok şirket bütçelerini kontrol altında tutmak için bu özelliği kullanır.

Paket boyutu ile, her dosya için ayrı ayrı eşikler belirlemek mümkündür. Bu, özellikle uygulamanızda bir paketi bölerseniz yararlıdır.

Varsayılan olarak sıkıştırılmış öğe boyutlarını test eder. brotli sıkıştırmaya geçmek veya bu özelliği tamamen kapatmak için sıkıştırma seçeneğini kullanabilirsiniz.

Lighthouse Bot

Lighthouse Bot, Travis CI ile entegre olur ve beş Lighthouse denetim kategorisinden herhangi birine göre bütçeleri uygular. Örneğin, Lighthouse performans puanınız için 100 bütçe. Bazen tek bir sayıyı takip etmek, tek tek öğe bütçelerini takip etmekten daha kolaydır ve Lighthouse puanları birçok şeyi hesaba katar.

Lighthouse puanları 💯

Lighthouse Bot, bir siteyi hazırlık sunucusuna dağıttıktan sonra denetim çalıştırır. .travis.yml'te --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 kalmayı hedefleyin.

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

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

Lighthouse Bot kontrol durumunu GitHub'da görüntüleme

Ardından Lighthouse Bot, pull isteğinize güncellenmiş puanlarla birlikte yorum yapar. Bu, kod değişiklikleri yapılırken performans hakkında konuşmayı teşvik eden kullanışlı bir özelliktir.

Çekme isteğindeki Lighthouse raporlama puanları 💬

Getirme isteğinizin düşük bir Lighthouse puanı tarafından engellendiğini tespit ederseniz Lighthouse KSA veya Geliştirici Araçları'nda bir denetim çalıştırın. Rapor, darboğazlarla ilgili ayrıntıları ve basit optimizasyonlarla ilgili ipuçlarını içeren bir rapor oluşturur.

Özet

Araç	KSA	CI	Özet
Deniz Feneri	✔️	❌	Boyutlarına veya sayılarına göre farklı kaynak türleri için bütçeler.
webpack	✔️	❌	Webpack tarafından oluşturulan öğelerin boyutlarına dayalı bütçeler. Sıkıştırılmamış boyutları kontrol eder.
bundlesize	✔️	✔️	Belirli kaynakların boyutlarına dayalı bütçeler. Sıkıştırılmış veya sıkıştırılmamış boyutları kontrol eder.
Lighthouse Bot	❌	✔️	Lighthouse puanlarına dayalı bütçeler.