Uygulamayı izleme ve analiz etme

Webpack paketini takip etmek ve analiz etmek için kullanılacak araçlar

Ivan Akulov

Web paketini uygulamayı mümkün olduğunca küçük hale getirecek şekilde yapılandırmış olsanız bile, uygulamayı takip etmek ve içeriğini bilmeniz önemlidir. Aksi takdirde, uygulamayı iki kat daha büyük hale getirecek ve fark etmeyebilirsiniz.

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 geliştirme sırasında webpack-dashboard'ı, CI'de ise bundlesize'ı kullanın.

webpack-dashboard

webpack-dashboard; bağımlılıklar, ilerleme durumu ve diğer ayrıntılarla web paketi çıkışını geliştirir. İşleyiş şekli:

Bu kontrol paneli, büyük bağımlılıkları izlemenize yardımcı olur. Eklediğiniz bağımlılıkları Modüller bölümünde hemen görürsünüz.

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ştirme sunucusu kullanıyorsanız compiler.apply() kullanarak:

compiler.apply(new DashboardPlugin());

İyileştirme yapılabilecek olası yerleri bulmak için kontrol panelini kullanabilirsiniz. Örneğin, hangi kitaplıkların çok büyük olduğunu ve daha küçük alternatiflerle değiştirilebileceğini bulmak için Modüller bölümüne ilerleyin.

paket boyutu

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

1. Uygulamayı mümkün olduğunca küçük olacak şekilde optimize edin. Üretim derlemesini çalıştırın.

2. Aşağıdaki içerikle bundlesize bölümünü package.json'a ekleyin:

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

3. bundlesize'i npx ile yürütün:

   npx bundlesize
   

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

4. Her boyuta% 10-20 eklediğinizde maksimum boyutları elde edersiniz. 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.

   bundlesize'i etkinleştirin

5. bundlesize paketini geliştirme bağımlılığı olarak yükleyin:

   npm install bundlesize --save-dev
   

6. package.json bölümündeki bundlesize bölümünde, kesin maksimum boyutları belirtin. Bazı dosyalar (ör. resimler) için her dosya başına 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 komut dosyası ekleyin:

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

8. CI'yi her itişte npm run check-size'yi yürütecek şekilde yapılandırın. (Projeyi üzerinde geliştiriyorsanız bundlesize uygulamasını 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 etme

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, paketi tarar ve içindekilerin 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

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 (yani pakette görünen dosyaların boyutu) gösterilir. 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 edilecek noktalar:

• Büyük bağımlılıklar. Neden bu kadar büyükler? Daha küçük alternatifler var mı (ör. React yerine Preact)? İçerdiği tüm kodu kullanıyor musunuz (ör. Moment.js, genellikle 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? (Örneğin, ortak bir dosyaya taşımak için webpack 4'te optimization.splitChunks.chunks seçeneğini veya webpack 3'te CommonsChunkPlugin seçeneğini kullanın.) Pakette aynı kitaplığın birden fazla sürümü mü var?
• Benzer bağımlılıklar. Yaklaşık olarak aynı işi yapan benzer kitaplıklar var mı? (Örneğin, moment ve date-fns veya lodash ve lodash-es.) Tek bir araç kullanmaya çalışın.

Ayrıca Sean Larkin'in webpack paketlerini incelediği mükemmel analizine göz atın.

Özet

• Uygulamanızın boyutunu takip etmek için webpack-dashboard ve bundlesize simgesini kullanın
• webpack-bundle-analyzer ile bu boyutu artıran unsurları inceleyin