Web paketi paketini izlemek ve analiz etmek için hangi araçlar kullanılır?
Webpack'i, uygulamayı mümkün olduğunca küçük hale getirecek şekilde yapılandırsanız bile ve neleri içerdiğini bilmektir. Aksi takdirde, uygulamanızın iki kat daha büyük. Hatta fark etmeye bile gerek yok.
Bu bölümde, paketinizi anlamanıza yardımcı olacak araçlar açıklanmaktadır.
Paket boyutunu takip edin
Uygulamanızın boyutunu izlemek için webpack-dashboard bundlesize etiketidir.
webpack-dashboard
webpack-dashboard, web paketi çıkışını iyileştirir bağımlılıkları, ilerlemeyi ve diğer ayrıntıları görebilirsiniz. İşleyiş şekli:
Bu kontrol paneli büyük bağımlılıkları takip etmenize yardımcı olur. Bir tane eklerseniz, bağımlılığı hemen Modüller bölümünü inceleyin!
Etkinleştirmek için webpack-dashboard
paketini yükleyin:
npm install webpack-dashboard --save-dev
Ardından eklentiyi yapılandırmanın plugins
bölümüne ekleyin:
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
veya Express tabanlı bir geliştirici sunucusu kullanıyorsanız compiler.apply()
kullanarak şunları yapabilirsiniz:
compiler.apply(new DashboardPlugin());
İyileştirilebilecek olası yerleri bulmak için kontrol panelini kullanabilirsiniz. Örneğin, Modüller bölümüne giderek hangi kitaplıkların çok büyük olduğunu ve hangilerinin daha küçük alternatifler oluşturmaktır.
paket boyutu
bundlesize web paketi öğelerinin belirtilen boyutlar. Uygulama çok büyük hale geldiğinde bildirim almak için CI ile entegre edin:
Yapılandırmak için:
Maksimum boyutları öğrenme
Uygulamayı mümkün olduğunca küçük hale getirmek için optimize edin. Üretim derlemesini çalıştırın.
bundlesize
bölümünü aşağıdakilerlepackage.json
içerisine ekleyin: içerik:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
bundlesize
işlemini npx ile yürütün:npx bundlesize
Bu işlem, her bir dosyanın gzip'lenmiş boyutunu yazdırır:
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
Maksimum boyutları elde etmek için her boyuta% 10-20 oranında anahtar kelime ekleyin. Bu% 10-20'lik bir kâr marjı sayesinde uygulamayı her zamanki gibi geliştirirken uygulamanın boyutu çok fazla büyüdüğünde de sizi uyarır.
Etkinleştir
bundlesize
bundlesize
paketini geliştirme bağımlılığı olarak yükleyin:npm install bundlesize --save-dev
package.json
öğesininbundlesize
bölümünde, somut değeri belirtin seçim yapabilirsiniz. Bazı dosyalar (ör. resimler) için dosya başına maksimum boyutu belirtmek isteyebilirsiniz türü (her dosya için değil):// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
Kontrolü çalıştırmak için bir npm komut dosyası ekleyin:
// package.json { "scripts": { "check-size": "bundlesize" } }
CI'yı her aktarma işleminde
npm run check-size
işlemini yürütecek şekilde yapılandırın. (Projeyi üzerinde geliştiriyorsanızbundlesize
uygulamasını GitHub ile entegre edin.)
Hepsi bu kadar! Şimdi, npm run check-size
komutunu çalıştırır veya kodu aktarırsanız çıkış dosyalarının
yeterince küçük:
Alternatif olarak, hata durumunda:
Daha fazla bilgi
- Alex Russell'ın gerçek dünyada yükleme süresi hakkında hedef
Paketin neden bu kadar büyük olduğunu analiz edin
Pakette hangi modüllerin yer kapladığını görmek için paketin ayrıntılarına inebilirsiniz. Sonraki videoda webpack-bundle-analyzer:
webpack-bundle-analyzer aracı paketi tarar ve içindekilerin görselini oluşturur. Bunu kullan bağımlılıkları bulmanızı sağlar.
Analiz aracını kullanmak için webpack-bundle-analyzer
paketini yükleyin:
npm install webpack-bundle-analyzer --save-dev
webpack yapılandırmasına bir eklenti ekleyin:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
ve üretim derlemesini çalıştırabilirsiniz. Eklenti, istatistik sayfasını bir tarayıcıda açar.
İstatistikler sayfasında varsayılan olarak ayrıştırılan dosyaların boyutu (ör. belirtir. Muhtemelen gzip boyutlarını karşılaştırmak istersiniz çünkü gerçek kullanıcılar deneyim, boyutları değiştirmek için soldaki kenar çubuğunu kullanın.
Raporda dikkat etmeniz gerekenler şunlardır:
- Büyük bağımlılıklar. Neden bu kadar büyükler? Daha küçük alternatifler var mı (ör. Önlem yer alıyor)? Kodun içerdiği tüm kodu kullanıyor musunuz (ör. Moment.js birçok yerel ayar içerir çoğu zaman kullanılmayan ve kaldırılabilir)?
- Yinelenen bağımlılıklar. Aynı kitaplığın birden fazla dosyada tekrarlandığını görüyor musunuz? (ör.
optimization.splitChunks.chunks
seçeneği – web paketi 4'te – veyaCommonsChunkPlugin
– kullanın.) Paketin birden fazla sürümü de var mı? aynı kitaplıktan mı? - Benzer bağımlılıklar. Yaklaşık olarak aynı işi yapan benzer kitaplıklar var mı? (Ör.
moment
vedate-fns
veyalodash
velodash-es
.) Tek bir araç kullanmayı deneyin.
Ayrıca, Sean Larkin’in webpack'in mükemmel analizine paketlerini inceleyin.
Özet
- Uygulamanızın ne kadar büyük olduğunu takip etmek için
webpack-dashboard
vebundlesize
kullanın webpack-bundle-analyzer
ile bu boyutu artıran unsurları inceleyin