Webpack ile performans bütçeleri belirleme

Milica Mihajlija

Webpack, içe aktarılan tüm dosyalarınızı birleştirir ve bunları paketler olarak bilinen bir veya daha fazla çıkış dosyasında paketler. Paketleme kullanışlıdır ancak uygulamanız büyüdükçe paketleriniz de büyür. Paket boyutlarının çok fazla büyümediğinden ve uygulamanızın yüklenmesinin ne kadar sürdüğünü etkilemediğinden emin olmak 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 izleyebilir.

Bu özelliğin nasıl kullanıldığını görmek için Yeni Yıl'a kalan günleri sayan bir uygulamayı inceleyebilirsiniz. React ve moment.js ile oluşturulmuştur. (Tıpkı giderek daha fazla çerçeve ve kitaplığa dayanan gerçek dünyadaki uygulamalar gibi. 😉)

Ölçüm

Bu kod laboratuvarının içinde webpack ile paketlenmiş uygulama zaten mevcuttur.

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u 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 vurgulanmıştır.

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

Webpack sizi uyarmakla kalmaz, paketlerinizin boyutunu nasıl küçülteceğiniz konusunda da öneride bulunur. Önerilen teknikler hakkında daha fazla bilgiyi Web'in Temel Özellikleri bölümünde bulabilirsiniz.

Özel performans bütçesi ayarlama

Uygun performans bütçesi, projenizin yapısına bağlıdır. Kendi araştırmanızı yapmanız her zaman en iyisidir. Kural olarak, sıkıştırılmış/küçültülmüş kritik yol kaynaklarının 170 KB'den az olması gerekir.

Bu basit demo için daha da ihtiyatlı davranıp bütçeyi 100 KB (97, 7 KiB) olarak ayarlayın. webpack.config.js alanına şunları ekleyin:

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

Yeni performans bütçesi bayt cinsinden belirlenir:

• Tekil öğ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.

ipucları için olası değerler:

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

Optimize etme

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

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

Gerçek dünyada, istemci tarafı büyük çerçevelerin değiştirilmesi genellikle zordur. Bu nedenle, bunları akıllıca kullanmak önemlidir. Biraz araştırma yaparak, popüler kitaplıklara kıyasla daha küçük ve aynı derecede iyi çalışan alternatifler bulabilirsiniz (date-fns, moment.js için iyi bir alternatiftir). Bazen, performans üzerinde önemli bir etkisi olan bir çerçeveyi veya kitaplığı hiç 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 süreç ayrıntılı olarak açıklanmaktadır. Geri sayım kodunu moment.js kullanmadan yeniden yazmanın hızlı bir yolu aşağıda verilmiştir.

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

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

Ardından şu satırı silin:

const moment = require('moment');

Biraz matematik gerektirir ancak aynı geri sayımı normal JavaScript ile de 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));

Ardından, optimize edilmiş paketi oluşturmak için moment.js dosyasını package.json dosyasından kaldırın ve konsolda webpack'i tekrar çalıştırın.

İşte bu! 223 KB (230 KB) tasarruf ettiniz ve uygulama bütçenin altında.🎉

Gözle

Webpack'te performans bütçesi oluşturmak için yalnızca birkaç satır kod gerekir ve yanlışlıkla büyük bir bağımlılık eklerseniz sizi uyarır. "Gözden ırak olan gönülden ırak olur" denir ancak webpack, performansla ilgili sonuçların her zaman farkında olmanızı sağlayabilir.