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 hale getirecek şekilde yapılandırsanız bile ve neleri içerdiğini bilmektir. 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, web paketi çıkışını iyileştirir bağımlılıkları, ilerlemeyi ve diğer ayrıntıları görebilirsiniz. İş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!

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ştirilebilecek olası yerleri bulmak için kontrol panelini kullanabilirsiniz. Örneğin, Modüller bölümüne giderek hangi kitaplıkların çok büyük olduğunu ve hangilerinin daha küçük alternatifler oluşturmaktır.

paket boyutu

bundlesize web paketi öğelerinin belirtilen boyutlar. Uygulama çok büyük hale geldiğinde bildirim almak için CI ile entegre edin:

Yapılandırmak için:

Maksimum boyutları öğrenme

1. Uygulamayı mümkün olduğunca küçük hale getirmek için optimize edin. Üretim derlemesini çalıştırın.

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

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

3. bundlesize işlemini 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 bir kâr marjı sayesinde uygulamayı her zamanki gibi geliştirirken uygulamanın boyutu çok fazla büyüdüğünde de 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 öğesinin bundlesize bölümünde, somut değeri belirtin seçim yapabilirsiniz. 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 üzerinde geliştiriyorsanız bundlesize 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:

Alternatif olarak, hata durumunda:

Daha fazla bilgi

• Alex Russell'ın gerçek dünyada yükleme süresi hakkında hedef

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

Pakette hangi modüllerin yer kapladığını görmek için paketin ayrıntılarına inebilirsiniz. Sonraki videoda webpack-bundle-analyzer:

webpack-bundle-analyzer aracı paketi tarar ve içindekilerin görselini oluşturur. Bunu kullan bağımlılıkları bulmanızı sağlar.

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ırabilirsiniz. Eklenti, istatistik sayfasını bir tarayıcıda açar.

İstatistikler sayfasında varsayılan olarak ayrıştırılan dosyaların boyutu (ör. belirtir. Muhtemelen gzip boyutlarını karşılaştırmak istersiniz çünkü gerçek kullanıcılar deneyim, boyutları değiştirmek için soldaki 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 var mı (ör. Önlem yer alıyor)? Kodun içerdiği tüm kodu kullanıyor musunuz (ör. Moment.js birçok yerel ayar içerir çoğu zaman kullanılmayan ve kaldırılabilir)?
• 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 – kullanın.) 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ı? (Ör. moment ve date-fns veya lodash ve lodash-es.) Tek bir araç kullanmayı deneyin.

Ayrıca, Sean Larkin’in webpack'in mükemmel analizine paketlerini inceleyin.

Özet

• Uygulamanızın ne kadar büyük olduğunu takip etmek için webpack-dashboard ve bundlesize kullanın
• webpack-bundle-analyzer ile bu boyutu artıran unsurları inceleyin