Uygulamayı izleme ve analiz etme

Web paketi paketini izlemek ve analiz etmek için hangi araçlar kullanılır?

Ivan Akulov

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

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

2. bundlesize bölümünü aşağıdakilerle package.json içine ekleyin: içerik:

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

3. 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
   

4. 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

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 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",
       }
     ]
   }   
   

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

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

8. CI'yı her aktarma işleminde npm run check-size işlemini yürütecek şekilde yapılandırın. (Projeyi bundlesize'da geliştiriyorsanız bundlesize'ı 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 – veya CommonsChunkPlugin – 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 ve date-fns veya lodash ve lodash-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 ve bundlesize simgesini kullanın
• webpack-bundle-analyzer ile boyutu oluşturan öğeleri inceleme