Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Milica Mihajlija

Performans bütçesini tanımladıktan sonra sıra, takip edebilirsiniz. Eşikleri tanımlamanıza olanak tanıyan çeşitli araçlar vardır görebilir ve bütçeyi aşarsanız sizi uyarabilir. Öğrenin ihtiyaçlarınıza ve mevcut ayarlarınıza en uygun olanı nasıl seçeceğinizi öğreneceksiniz. 🕵️‍♀️

Lighthouse performans bütçeleri

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

Lighthouse'un komut satırı sürümü (v5+), aşağıdakilere göre performans bütçelerini ayarlamayı 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 JSON dosyasında ayarlanır ve bu dosyalar yeni "Bütçe Üzerinden" olarak tanımlandıktan sonra sütunu herhangi bir sınırı aşıp aşmadığınızı gösterir.

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

Web paketi performansıyla ilgili ipuçları

Webpack, kodunuzun kullanıcılara sunulma şeklini optimize eden güçlü bir derleme aracıdır. Ayrıca, performans bütçelerini öğe boyutuna göre ayarlamayı da destekler.

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

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

Bundle.js öğesini vurgulayan webpack çıkışı — Vurgulanan Bundle.js bütçenizden büyük

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

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.

ziyaret edin.

Web paketi performansı optimizasyonu önerisi — Bonus özellik: Webpack yalnızca sizi uyarmakla kalmaz, aynı zamanda paketlerinizi nasıl küçültebileceğinize dair bir öneride bulunur. 💁

'nı inceleyin.

Paket boyutu

Paket 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 değeri ve test etmek istediğiniz dosyayı belirterek bundlesize CLI komutunu çalıştırın.

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

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

CI için paket boyutu

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

Günümüzde hızlı bir uygulamanız olabilir ancak yeni kod eklemek çoğu zaman bunu değiştirebilir. Paket boyutu ile pull isteklerini kontrol etmek performans regresyonlarını önlemenize yardımcı olur. Bootstrap, Tinder, Trivago ve birçok başka platform, bütçelerini kontrol altında tutmak için bunu kullanıyor.

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

Varsayılan olarak gzip uygulanmış öğ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'u

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 TL'lik bir bütçe oluşturabilirsiniz. Bazen tek bir sayıya dikkat etmek, tek tek öğe bütçelerinde ve Lighthouse puanlarında birçok şeyi hesaba katmaktan daha kolaydır.

Lighthouse Bot, bir siteyi hazırlık sunucusuna dağıttıktan sonra denetim çalıştırır. .travis.yml içinde --perf, --a11y, --bp, --seo veya --pwa seçenekleriyle belirli Lighthouse kategorileri için bütçeler belirleyin. 90 puanın üzerinde olan yeşil alanda 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 çekme isteğinin puanları, belirlediğiniz eşiğin altına düşerse Lighthouse Bot, çekme isteğinin birleştirilmesini engelleyebilir. ⛔

Lighthouse Bot'u GitHub'da durum kontrolü

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

Getirme 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. Performans sorunları hakkında ayrıntılar ve basit optimizasyonlar için ipuçları içeren bir rapor oluşturur.

Özet

Araç	KSA	CI	Özet
Deniz Feneri	✔	❌	Farklı türlerdeki kaynakların boyutlarına veya sayılarına göre belirlenen bütçeler.
web paketi	✔	❌	Web paketi tarafından oluşturulan öğelerin boyutlarına dayalı bütçeler. Sıkıştırılmamış boyutları kontrol eder.
paket boyutu	✔	✔	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'u	❌	✔	Lighthouse puanlarına dayalı bütçeler.