Web paketi paketini izlemek ve analiz etmek için hangi araçlar kullanılır?
Web paketini uygulamayı olabildiğince küçük hale getirecek şekilde yapılandırsanız bile onu takip etmek ve içeriğini bilmek önemlidir. Aksi takdirde, uygulamayı iki kat büyütecek ve fark etmeyecek bir bağımlılık yükleyebilirsiniz.
Bu bölümde, paketinizi anlamanıza yardımcı olan araçlar açıklanmaktadır.
Paket boyutunu takip edin
Uygulamanızın boyutunu izlemek için geliştirme sırasında webpack-dashboard'u ve CI'da bundlesize kullanın.
webpack-kontrol paneli
webpack-dashboard; bağımlılık boyutları, ilerleme durumu ve diğer ayrıntılarla web paketi çıktısını iyileştirir. Metnin görünümü aşağıdaki gibidir:
Bu kontrol paneli büyük bağımlılıkların izlenmesine yardımcı olur. Bir tane eklerseniz bunu Modüller bölümünde hemen görürsünüz!
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ı geliştirici sunucusu kullanıyorsanız compiler.apply()
kullanıyorsanız:
compiler.apply(new DashboardPlugin());
İyileştirilebilecek olası yerleri bulmak için gösterge panosunda oynamaktan çekinmeyin. Örneğin, çok büyük olan ve daha küçük alternatiflerle değiştirilebilecek kitaplıkları bulmak için Modüller bölümünü kaydırın.
paket boyutu
bundlesize, web paketi öğelerinin belirtilen boyutları aşmadığını doğrular. 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ı olabildiğince küçük olacak şekilde optimize edin. Üretim derlemesini çalıştırın.
bundlesize
bölümünü aşağıdaki içeriklerlepackage.json
içine ekleyin:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
npx ile
bundlesize
yürütme:npx bundlesize
Bu işlem, her dosyanın gzip biçiminde sıkıştırılan 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
Her boyuta% 10-20 oranında ekleme yaparak maksimum boyutları elde edebilirsiniz. Bu% 10-20'lik oran, uygulamayı her zamanki gibi geliştirmenize olanak tanırken, boyutu çok fazla büyüdüğünde sizi uyarır.
bundlesize
ağ cihazını etkinleştirbundlesize
paketini geliştirme bağımlılığı olarak yükleyin:npm install bundlesize --save-dev
package.json
içindekibundlesize
bölümünde, somut maksimum boyutları belirtin. Bazı dosyalar (ör. resimler) için her dosya için değil, dosya türü başına maksimum boyutu belirtebilirsiniz:// 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 aktarmada
npm run check-size
yürütecek şekilde yapılandırın. (Projeyi bu platform üzerinden 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 olup olmadığını görürsünüz:
Başarısızlık durumunda:
Daha fazla bilgi
- Alex Russell hedeflememiz gereken gerçek yükleme süresi hakkında
Paketin neden bu kadar büyük olduğunu analiz edin
Hangi modüllerin yer kapladığını görmek için paketi daha ayrıntılı olarak inceleyebilirsiniz. webpack-bundle-analyzer ile tanışın:
webpack-bundle-analyzer paketi paketi tarar ve içindekilerin bir görselleştirmesini oluşturur. Büyük veya gereksiz bağımlılıkları bulmak için bu görselleştirmeyi kullanın.
Analiz aracını kullanmak için webpack-bundle-analyzer
paketini yükleyin:
npm install webpack-bundle-analyzer --save-dev
web paketi yapılandırmasına bir eklenti ekleyin:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
üretim derlemesini çalıştırmanız gerekir. Eklenti, istatistikler sayfasını bir tarayıcıda açar.
İstatistik sayfası, varsayılan olarak ayrıştırılan dosyaların boyutunu (pakette göründüğü şekliyle dosyaların boyutu) gösterir. Gerçek kullanıcıların deneyimine yakın olduğundan muhtemelen gzip boyutlarını karşılaştırmak istersiniz; boyutları değiştirmek için soldaki kenar çubuğunu kullanın.
Raporda şunlara dikkat etmeniz gerekir:
- Büyük bağımlılıklar. Neden bu kadar büyükler? Daha küçük alternatifler (ör. Tepki vermek yerine hazırlıklı olmak)? İçerdiği tüm kodları kullanıyor musunuz (ör. Moment.js, genellikle kullanılmayan ve atlanabilecek çok sayıda yerel ayar içeriyor mu?
- Bağımlıların kopyaları. Aynı kitaplığı birden fazla dosyada tekrarlanıyor mu? (Ör. web paketi 4'teki
optimization.splitChunks.chunks
seçeneğini veya web paketi 3'tekiCommonsChunkPlugin
seçeneğini ortak bir dosyaya taşımak için kullanın.) Yoksa pakette aynı kitaplığın birden fazla sürümü de mi var? - 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ç kullanmaya devam etmeyi deneyin.
Ayrıca, Sean Larkin'in web paketi paketleriyle ilgili harika analizine de göz atın.
Özet
- Uygulamanızın ne kadar büyük olduğunu takip etmek için
webpack-dashboard
vebundlesize
kullanın webpack-bundle-analyzer
ile ürün boyutunu artıran unsurları inceleyin