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 olacak şekilde yapılandırsanız bile, uygulamanın boyutunu takip etmek ve neleri içerdiğini bilmek önemlidir. 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, bağımlılıkların boyutları, ilerleme durumu ve diğer ayrıntılarla webpack çıkışını iyileştirir. İş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!
Bu özelliği 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ştirme yapılabilecek olası yerleri bulmak için kontrol panelini kullanabilirsiniz. Ö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.
bundlesize
bundlesize, webpack öğelerinin belirtilen boyutları aşmadığını doğrular. Uygulama çok büyük olduğunda bildirim almak için bir CI ile entegre edin:
Yapılandırmak için:
Maksimum boyutları öğrenin
Uygulamayı mümkün olduğunca küçük olacak şekilde optimize edin. Üretim derlemesini çalıştırın.
bundlesize
bölümünü aşağıdakilerlepackage.json
içine ekleyin: içerik:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
bundlesize
'ü 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 marj, uygulamayı her zamanki gibi geliştirmenize olanak tanır ve boyutu çok fazla büyüdüğünde sizi uyarır.
Etkinleştir
bundlesize
bundlesize
paketini geliştirme bağımlılığı olarak yükleyin:npm install bundlesize --save-dev
package.json
bölümündekibundlesize
bölümünde, kesin maksimum boyutları belirtin. 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. (Projeyibundlesize
'da geliştiriyorsanızbundlesize
'ı GitHub ile entegre edin.)
Hepsi bu kadar! Artık npm run check-size
komutunu çalıştırır veya kodu gönderirseniz çı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 incelemek isteyebilirsiniz. webpack-bundle-analyzer ile tanışın:
webpack-bundle-analyzer aracı paketi tarar ve içindekilerin görselini 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
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ırın. Eklenti, istatistik sayfasını bir tarayıcıda açar.
İstatistikler sayfasında varsayılan olarak ayrıştırılan dosyaların boyutu (ör. değiştirilebilir. Gerçek kullanıcıların deneyimine daha yakın olduğu için gzip boyutlarını karşılaştırmak isteyebilirsiniz. Boyutları değiştirmek için sol taraftaki 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 (ör. React yerine Preact)? İçerdiği tüm kodu kullanıyor musunuz (ör. Moment.js, sık kullanılmayan ve kaldırılabilecek çok sayıda yerel ayar içeriyor mu?
- 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
– kullanarak bir ortak dosyaya taşıyabilirsiniz.) 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ı? (Örneğin,
moment
vedate-fns
veyalodash
velodash-es
.) Tek bir araç kullanmaya çalışın.
Ayrıca, Sean Larkin’in webpack'in mükemmel analizine paketlerini inceleyin.
Özet
- Uygulamanızın boyutunu takip etmek için
webpack-dashboard
vebundlesize
simgesini kullanın webpack-bundle-analyzer
ile boyutu oluşturan öğeleri inceleme