Webpack ile performans bütçeleri belirleme

Milica Mihajlija

Webpack, içe aktarılan tüm dosyalarınızı birleştirir ve bunları paket olarak bilinen bir veya daha fazla çıkış dosyası halinde paketler. Paketleme düzgün bir işlemdir, ancak uygulamanız büyüdükçe paketleriniz de büyüyecektir. Paket boyutlarının çok fazla büyümediğinden ve uygulamanızın yüklenme süresini etkilemediğinden emin olmak için bu boyutları izlemeniz gerekir. Webpack, öğe boyutuna göre performans bütçeleri belirlemeyi destekler ve paket boyutlarını sizin için takip edebilir.

Nasıl yapıldığını görmek için yılbaşına kalan gün sayısını sayan bir uygulamayı kullanabilirsiniz. React ve moment.js ile geliştirilmiştir. (Tıpkı çerçeveleri ve kitaplıkları giderek daha fazla kullanan gerçek uygulamalar gibi. 😉)

Ölçüm

Bu codelab'de web paketi ile birlikte sunulan uygulama zaten mevcut.

1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'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'tan (250 KB) daha büyük olduğu için sarıyla vurgulanır.

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

Webpack sizi uyarmakla kalmaz, aynı zamanda paketlerinizi küçültme konusunda öneriler de verir. Önerilen teknikler hakkında daha fazla bilgiyi Web'in Temelleri bölümünde bulabilirsiniz.

Özel bir performans bütçesi belirleyin

Uygun bir performans bütçesi projenizin niteliğine bağlıdır. Kendi araştırmanızı yapmanız her zaman en iyisidir. İyi bir kural, 170 KB'ın altında sıkıştırılmış/küçültülmüş kritik yol kaynakları yayınlamaktır.

Bu basit demo için daha da katı bir yaklaşım benimseyin ve bütçeyi 100 KB (97, 7 KiB) olarak ayarlayın. webpack.config.js içinde aşağıdakileri ekleyin:

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

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

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

Bu durumda, giriş noktası görevi gören yalnızca bir paket vardır.

İpuçları için olası değerler şunlardır:

1. warning (varsayılan): Sarı bir uyarı mesajı görüntüler, ancak derleme başarılı olur. Bunu, geliştirme ortamlarında kullanmak en iyisidir.
2. error: Kırmızı bir hata mesajı görüntüler, ancak derleme yine de geçer. Bu ayar, üretim derlemeleri için önerilir.
3. false: Herhangi bir uyarı veya hata gösterilmez.

Optimize etme

Performans bütçesinin amacı, performansla ilgili sorunları gidermesi çok zor hale gelmeden önce sizi uyarmaktır. Uygulama oluşturmanın her zaman birden fazla yolu vardır ve bazı teknikler daha hızlı yükleme süreleri sağlar. (Bunların birçoğu burada, JavaScript'inizi Optimize Etme bölümünde belgelenmiştir. 🤓)

Çerçeveler ve kitaplıklar geliştiricilerin hayatını kolaylaştırır ancak son kullanıcılar uygulamaların nasıl geliştirildiğiyle çok ilgilenmez, sadece işlevsel ve hızlı olur. Performans bütçesini aşarsanız olası optimizasyonları düşünme 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, genellikle bu işi yapan popüler kitaplıklara kıyasla daha küçük alternatifler bulabilirsiniz (date-fns, moment.js için iyi bir alternatiftir). Bazı durumlarda, performans üzerinde önemli bir etkiye sahip olan çerçeveleri veya kitaplıkları hiç kullanmamak daha mantıklıdır.

Kullanılmayan kodları kaldırmak, büyük üçüncü taraf kitaplıklar içeren uygulamaları optimize etmek için iyi bir yöntemdir. Kullanılmayan kodu kaldırma kılavuzu, bu süreci ayrıntılı olarak açıklamaktadır. Aşağıda, moment.js kullanmadan geri sayım kodunu yeniden yazmanın hızlı bir yolunu 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');

Ve şu satırı da sil:

const moment = require('moment');

Biraz matematiksel işlem gerektirse de aynı geri sayımı vanilya 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, optimize edilmiş paketi oluşturmak için moment.js öğelerini package.json öğesinden kaldırın ve konsolda webpack'i tekrar çalıştırın.

Ta-da! 223 KiB (230 KB) indirdiniz ve uygulama bütçenizi aşmış durumda.🎉

İzleme

Webpack'te performans bütçesi ayarlamak yalnızca birkaç satır kod gerektirir ve (yanlışlıkla) büyük bir bağımlılık eklerseniz sizi uyarır. Bu deyim "gözden kaçar, akıl almaz" ancak webpack, performansın sonuçlarını her zaman farkında olmanızı sağlayabilir.