İçeriğe atla
TextArray1.41.0
%100 yerel

Webpack stats analizi

Bir webpack build'inde hangi paketlerin ve modüllerin en fazla yer kapladığını bulun.

Giriş
Çıkış
İlgili araçlar
JSON boyut analiz aracıyeniGeliştirici araçları
package.json bağımlılık incelemesiyeniGeliştirici araçları
Sıkıştırma boyutu hesaplayıcıyeniGeliştirici araçları
i18n anahtar farkıGeliştirici araçları
TOML'den JSON'ye dönüştürücüGeliştirici araçları
SQL'den JSON'aGeliştirici araçları
Webpack stats analizi
webpack'den bir stats.json dosyası oluştur (`webpack --json > stats.json`, veya konfigürasyonunda `stats: { modules: true }` ekleyerek) ve buraya yapıştır, hangi paketlerin ve modüllerin bundle'ını şişirttiğini tam olarak görmek için. Bu, özel bir bundle-analyzer eklentisi yüklemek veya özel flagler ile yeniden oluşturmak zorunda kalmadan "build'm neden bu kadar büyük" sorusuna yanıt vermenin en hızlı yoludur — rapor zaten sahip olduğun JSON'u okur.
Raporu node_modules paketi ile gruplandır ve hangi bağımlılığın en maliyetli olduğunu gör, klasöre göre kendi kaynak kodunun hangi bölümünün en ağır olduğunu görmek için, veya bireysel modülleri tek tek incelemek için gruplandırılmamış bırak. Satırları göster seçeneği, uzun bir raporu en büyük suçluların sınırlandırır; yüzde payı her satırın boyutunu toplama kıyasla contextualleştirir; ve eğer stats.json dosyan modül başına sıkıştırılmış boyut alanı taşıyorsa (gzipSize veya sizeGzip), sıkıştırılmış boyut sütununu açmak her iki sayıyı yan yana gösterir. Bir giriş noktasına veya chunk adına göre filtreleme her şeyi yalnızca bir bundle ile sınırlandırır, bu da bir uygulama birden fazla çıktı dosyasına sahip olduğunda faydalıdır.
Araç ayrıca birden fazla node_modules yükleme yolunda görünen paketleri işaretler — genellikle iki bağımlılığın aynı kitaplığın farklı sürümlerini gerektirdiğinin ve webpack'in her iki kopyayı da sevk ettiğinin bir işareti. Bu satırlar çıktıda işaretlenir, böylece uzun bir raporda bile kolayca görülebilirler. Okunabilir bir rapor için tablo çıktısı seçin veya bundle boyutunu zaman içinde izlemek için bir elektronik tabloya yapıştırırken CSV kullanın.
Her şey tarayıcında çalışır: stats.json dosyası yerel olarak ayrıştırılır ve analiz edilir ve hiçbir yere yüklenmez, bu nedenle tescilli kod tabanıyla kullanmak için güvenlidir. Sonucu kopyala, .txt dosyası olarak indir veya başka bir aracın girdisine gönder ve çalışmaya devam et.
FAQ
Nasıl stats.json oluştururum?
`webpack --json > stats.json` komutu ile webpack build'ini çalıştır, veya webpack yapılandırmanına `stats: { modules: true }` ekle böylece derleyici modül verisini yazdırsın. Araç çalışmak için üst düzey bir "modules" dizisine ihtiyaç duyar.
Pakete göre gruplandırma, klasöre göre gruplandırmanın göstermediği ne gösterir?
Pakete göre gruplandırma node_modules/react altındaki (örneğin) her dosyayı tek bir satırda daraltır, böylece bir bağımlılığın toplam ayak izini görebilirsin. Bunun yerine klasöre göre gruplandırma kendi kaynak dizinlerini raporlar ve bu, kendi kodunda yüksek boyutlu bir özellik bulmak için daha yararlıdır.
Neden "yinelenen" paketler hakkında uyarı veriyor?
İki bağımlılık aynı kitaplığın farklı sürümlerini gerektirdiğinde, npm veya yarn deduplication yerine node_modules'a ikinci bir kopya yerleştirebilir. Bu araç, birden fazla node_modules yükleme yolunda görünen bir paket adını algılar ve işaretler, çünkü yinelemeyi kaldırmak genellikle bundle'ı küçültmenin kolay bir yoludur.
stats.json bunları içermiyorsa gerçek gzip boyutlarını gösteriyor mu?
Hayır. Sıkıştırılmış boyut, yalnızca stats.json dosyası zaten modül başına gzipSize veya sizeGzip alanı taşıdığında gösterilir — araç hiçbir zaman kendisi sıkıştırmaz, çünkü bu bir derleme adımını yeniden çalıştırmanız gerektiği anlamına gelirdi. Bu alan olmadan, sıkıştırılmış boyut sütunu bir tire gösterir.
stats.json dosyası gönderildi mi?
Hayır. Analiz tamamen tarayıcında çalışır — dosya cihazından hiç ayrılmaz.