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.

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.

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.

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.

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.

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.

Ş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 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. ⛔

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.

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