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ü

Webpack performansıyla ilgili ipuçları

Webpack, kodunuzun kullanıcılara nasıl yayınlanacağını 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ürecinde öğe boyutlarına dikkat etmenin mükemmel bir yoludur.

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.

Webpack 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 ilgilidir ve büyük dosyaların özellikle mobil cihazlarda yürütülmesi uzun sürebilir.

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

Bonus özellik: webpack yalnızca sizi uyarmakla kalmaz, paketlerinizin boyutunu nasıl küçülteceğiniz konusunda öneri de sunar. 💁

Bundlesize

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

Bundlesize CLI

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 kontrol 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.

bundlesize ile her dosya için ayrı ayrı eşikler ayarlanabilir. Bu, özellikle uygulamanızda bir paketi bölerseniz yararlıdır.

Varsayılan olarak 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 sıkıştırmayı tamamen devre dışı bırakabilirsiniz.

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 yapar. .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ğiniz hakkında güncellenmiş puanlarla yorum yapar. Bu, kod değişiklikleri yapılırken performans hakkında konuşmayı teşvik eden kullanışlı bir özelliktir.

Toplama isteğinde Lighthouse raporlama puanları 💬

Alma isteğinizin kötü bir Lighthouse puanı nedeniyle engellendiğini görürseniz Lighthouse CLI ile 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 göre 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.