Webpack ile performans bütçeleri belirleme

Milica Mihajlija

Webpack içe aktarılan tüm dosyalarınızı birleştirir ve bunları paketler halinde bilinen bir veya daha fazla çıkış dosyasına paketler. Paketleme kullanışlıdır ancak uygulamanız büyüdükçe paketleriniz de büyür. Paket boyutlarının çok büyümemesini ve uygulamanızın yüklenmesinin uzun sürmemesini sağlamak için paket boyutlarını izlemeniz gerekir. Webpack, öğe boyutuna göre performans bütçeleri belirlemeyi destekler ve paket boyutlarını sizin için takip edebilir.

Bu özelliği uygulamada görmek için yeni yıla kadar kalan günleri sayan bir uygulamaya göz atın. React ve moment.js ile oluşturulmuştur. (Tıpkı giderek daha fazla çerçeve ve kitaplık kullanan gerçek dünya uygulamaları gibi. 😉)

Ölçüm

Bu codelab'de, webpack ile paketlenmiş uygulama zaten mevcut.

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remix'i tıklayın.
2. Terminal'i tıklayın (Not: Terminal düğmesi görünmüyorsa tam ekran seçeneğini kullanmanız gerekebilir).
3. Öğelerin ve boyutlarının renk kodlu bir listesini almak için konsola webpack yazın.

webpack

Ana paket, 244 KiB'den (250 KB) büyük olduğu için sarı renkle vurgulanır.

Bu uyarılar, üretim modunda varsayılan olarak etkindir ve hem öğeler hem de giriş noktaları (bir sayfanın ilk yüklenmesi sırasında kullanılan tüm öğelerin kombinasyonu) için varsayılan eşik 244 KiB sıkıştırılmamış'tır.

Webpack sizi uyarmakla kalmaz, paketlerinizin boyutunu küçültme konusunda da önerilerde bulunur. Önerilen teknikler hakkında daha fazla bilgiyi Web Fundamentals'da bulabilirsiniz.

Özel performans bütçesi belirleme

Uygun bir performans bütçesi, projenizin niteliğine bağlıdır. Kendi araştırmanızı yapmanız her zaman en iyisidir. Sıkıştırılmış/küçültülmüş önemli yol kaynaklarının 170 KB'tan daha az olması iyi bir kuraldır.

Bu basit demo için daha da tutumlu olmayı deneyin ve bütçeyi 100 KB (97, 7 KiB) olarak ayarlayın. webpack.config.js alanına aşağıdakileri ekleyin:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

Yeni performans bütçesi bayt cinsinden ayarlanır:

• Tek tek öğeler için 100.000 bayt (maxAssetSize)
• Giriş noktası için 100.000 bayt (maxEntrypointSize)

Bu durumda, giriş noktası olarak da işlev gören yalnızca bir paket vardır.

hints için olası değerler:

1. warning (varsayılan): Sarı bir uyarı mesajı gösterilir ancak derleme başarılı olur. Bu özelliği geliştirme ortamlarında kullanmanız önerilir.
2. error: Kırmızı bir hata mesajı gösterilir ancak derleme yine de başarılı olur. Bu ayar, üretim derlemeleri için önerilir.
3. false: Uyarı veya hata gösterilmez.

Optimize etme

Performans bütçesinin amacı, performans sorunları düzeltilmesi çok zor hale gelmeden önce sizi uyarmaktır. Uygulama oluşturmanın her zaman birden fazla yolu vardır ve bazı teknikler yükleme sürelerini kısaltır. (Birçoğu JavaScript'inizi optimize etme başlıklı makalede açıklanmıştır. 🤓)

Çerçeveler ve kitaplıklar geliştiricilerin işini kolaylaştırır ancak son kullanıcılar uygulamaların nasıl oluşturulduğuyla değil, yalnızca işlevsel ve hızlı olup olmadığıyla ilgilenir. Performans bütçesini aştığınızı fark ederseniz olası optimizasyonları düşünmenin zamanı gelmiş demektir.

Gerçek dünyada, büyük istemci tarafı çerçevelerinin değiştirilmesi genellikle zordur. Bu nedenle, bunları akıllıca kullanmak önemlidir. Biraz araştırma yaparak, popüler kitaplıkların işi aynı derecede iyi yapan daha küçük alternatiflerini bulabilirsiniz (date-fns, moment.js için iyi bir alternatiftir). Bazen, önemli bir performans etkisi varsa çerçeve veya kitaplık kullanmamak daha mantıklı olabilir.

Kullanılmayan kodu kaldırmak, büyük üçüncü taraf kitaplıkları içeren uygulamaları optimize etmenin iyi bir yoludur. Kullanılmayan kodu kaldırma kılavuzunda bu işlem ayrıntılı olarak açıklanmaktadır. Ayrıca, geri sayım kodunu moment.js kullanmadan yeniden yazmanın hızlı bir yolunu da burada bulabilirsiniz.

app/components/Countdown.jsx dosyasında şunları kaldırın:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

Aşağıdaki satırı silin:

const moment = require('moment');

Biraz matematik gerektirir ancak aynı geri sayımı vanilla JavaScript ile uygulayabilirsiniz:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

Şimdi moment.js öğesini package.json öğesinden kaldırın ve optimize edilmiş paketi oluşturmak için konsolda webpack'i tekrar çalıştırın.

Ta-da! 223 KiB (230 KB) tasarruf ettiniz ve uygulama bütçeyi aşmıyor.🎉

Gözle

Webpack'te performans bütçesi ayarlamak için yalnızca birkaç satır kod gerekir. Ayrıca, büyük bir bağımlılığı (yanlışlıkla) eklerseniz sizi uyarır. "Gözden uzak olan gönülden de uzak olur" derler ancak webpack, performansla ilgili etkilerden her zaman haberdar olmanızı sağlayabilir.