Uygulamayı izleyin ve analiz edin

Uygulamayı olabildiğince küçük yapmak için webpack’i yapılandırsanız bile, onu takip etmek ve neleri içerdiğini bilmek yine de önemlidir. Aksi takdirde, uygulamayı iki katına çıkaracak ve fark etmeyecek bir bağımlılık yükleyebilirsiniz!

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 şunu kullanın: webpack-dashboard geliştirme sırasında ve paket boyutu o CI.

webpack-dashboard #

webpack-dashboard bağımlılık boyutları, ilerleme ve diğer ayrıntılarla web paketi çıktısını geliştirir. İşte nasıl göründüğü:

Bu pano, büyük bağımlılıkları izlemeye yardımcı olur – bir tane eklerseniz, onu hemen Modüller bölüm!

Etkinleştirmek için, webpack-dashboard paket:

npm install webpack-dashboard --save-dev

Ve eklentiyi içine ekleyin plugins yapılandırma bölümü:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};

veya kullanarak compiler.apply() Express tabanlı bir geliştirme sunucusu kullanıyorsanız:

compiler.apply(new DashboardPlugin());

Olası iyileştirme yerlerini bulmak için pano ile oynamaktan çekinmeyin! Örneğin, kaydırarak Modüller Hangi kitaplıkların çok büyük olduğunu ve daha küçük alternatiflerle değiştirilebileceğini bulmak için bölüm.

paket boyutu #

paket boyutu web paketi varlıklarının belirtilen boyutları aşmadığını doğrular. Uygulama çok büyüdüğünde bildirim almak için onu bir CI ile entegre edin:

Yapılandırmak için:

Maksimum boyutları öğrenin

1. Uygulamayı olabildiğince küçük hale getirmek için optimize edin. Üretim derlemesini çalıştırın.

2. Ekle bundlesize bölüm içine package.json aşağıdaki içerikle:

   // package.json
   {
   "bundlesize": [
   {
   "path": "./dist/*"
   }
   ]
   }

3. Uygulamak bundlesize ile npx:

   npx bundlesize

   Bu, her dosyanın sıkıştırılmış boyutunu yazdıracaktı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

4. Her boyuta %10-20 ekleyin ve maksimum boyutları elde edin. Bu %10-20’lik marj, uygulamayı her zamanki gibi geliştirmenize izin verirken boyutu çok büyüdüğünde sizi uyarır.

   Olanak vermek bundlesize

5. Yükle bundlesize geliştirme bağımlılığı olarak paket:

   npm install bundlesize --save-dev

6. İçinde bundlesize bölümdeki package.json, beton maksimum boyutlarını belirtin. Bazı dosyalar için (örneğin resimler), her dosya için değil, dosya türü başına maksimum boyutu belirtmek isteyebilirsiniz:

   // package.json
   {
   "bundlesize": [
   {
   "path": "./dist/*.png",
   "maxSize": "16 kB",
   },
   {
   "path": "./dist/main.*.js",
   "maxSize": "20 kB",
   },
   {
   "path": "./dist/vendor.*.js",
   "maxSize": "35 kB",
   }
   ]
   }   

7. Kontrolü çalıştırmak için bir npm betiği ekleyin:

   // package.json
   {
   "scripts": {
   "check-size": "bundlesize"
   }
   }

8. Yürütmek için CI’yi yapılandırın npm run check-size her basışta. (Ve birleştirmek bundlesize GitHub ile projeyi bunun üzerinde geliştiriyorsanız.)

Bu kadar! Şimdi, eğer koşarsan npm run check-size veya kodu zorlayın, çıktı dosyalarının yeterince küçük olup olmadığını göreceksiniz:

Veya arıza durumunda:

daha fazla okuma #

Paketin neden bu kadar büyük olduğunu analiz edin #

İçinde hangi modüllerin yer kapladığını görmek için paketi daha derine inmek isteyebilirsiniz. Tanışmak webpack-paket-analizörü:

webpack-bundle-analyzer paketi tarar ve içinde ne olduğuna dair bir görselleştirme oluşturur. Büyük veya gereksiz bağımlılıkları bulmak için bu görselleştirmeyi kullanın.

Çözümleyiciyi kullanmak için, webpack-bundle-analyzer paket:

npm install webpack-bundle-analyzer --save-dev

webpack config’e 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çacaktır.

Varsayılan olarak, istatistik sayfası ayrıştırılan dosyaların boyutunu gösterir (yani, pakette göründükleri şekliyle dosyaların). Gerçek kullanıcıların deneyimlediğine daha yakın olduğundan, muhtemelen gzip boyutlarını karşılaştırmak isteyeceksiniz; boyutları değiştirmek için soldaki kenar çubuğunu kullanın.

Raporda aranacak şeyler şunlardır:

• Büyük bağımlılıklar. Neden bu kadar büyükler? Daha küçük alternatifler var mı (örneğin, React yerine Preact)? İçerdiği tüm kodu kullanıyor musunuz (örneğin, Moment.js çok sayıda yerel ayar içerir) genellikle kullanılmayan ve düşürülebilen)?
• Yinelenen bağımlılıklar. Aynı kitaplığın birden çok dosyada tekrarlandığını görüyor musunuz? (Örneğin, optimization.splitChunks.chunks seçeneği – web paketi 4’te – veya CommonsChunkPlugin – webpack 3’te – ortak bir dosyaya taşımak için.) Yoksa pakette aynı kitaplığın birden çok sürümü var mı?
• Benzer bağımlılıklar. Yaklaşık olarak aynı işi yapan benzer kütüphaneler var mı? (Örneğin moment Ve date-fnsveya lodash Ve lodash-es.) Tek bir araçla yapıştırmayı deneyin.

Ayrıca, Sean Larkin’inkine de bakın. web paketi paketlerinin harika analizi.

Özetliyor #

• Kullanmak webpack-dashboard Ve bundlesize uygulamanızın ne kadar büyük olduğundan haberdar olmak için
• Boyutu neyin oluşturduğunu araştırın webpack-bundle-analyzer