Bu sayfa, Cloud Translation API ile çevrilmiştir.

Uygulamayı izleme ve analiz etme

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

Ivan Akulov

Twitter GitHub Ana Sayfa

Web paketini uygulamayı olabildiğince küçük hale getirecek şekilde yapılandırsanız bile onu takip etmek ve içeriğini bilmek önemlidir. Aksi takdirde, uygulamayı iki kat büyütecek ve fark etmeyecek bir bağımlılık yükleyebilirsiniz.

Bu bölümde, paketinizi anlamanıza yardımcı olan araçlar açıklanmaktadır.

Paket boyutunu takip edin

Uygulamanızın boyutunu izlemek için geliştirme sırasında webpack-dashboard'u ve CI'da bundlesize kullanın.

webpack-kontrol paneli

webpack-dashboard; bağımlılık boyutları, ilerleme durumu ve diğer ayrıntılarla web paketi çıktısını iyileştirir. Metnin görünümü aşağıdaki gibidir:

Bu kontrol paneli büyük bağımlılıkların izlenmesine yardımcı olur. Bir tane eklerseniz bunu Modüller bölümünde hemen görürsünüz!

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

compiler.apply(new DashboardPlugin());

İyileştirilebilecek olası yerleri bulmak için gösterge panosunda oynamaktan çekinmeyin. Ö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.

paket boyutu

bundlesize, web paketi öğelerinin belirtilen boyutları aşmadığını doğrular. Uygulama çok büyük hale geldiğinde bildirim almak için CI ile entegre edin:

Yapılandırmak için:

Maksimum boyutları öğrenme

Uygulamayı olabildiğince küçük olacak şekilde optimize edin. Üretim derlemesini çalıştırın.

bundlesize bölümünü aşağıdaki içeriklerle package.json içine ekleyin:

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

npx ile bundlesize yürütme:

npx bundlesize

Bu işlem, her dosyanın gzip biçiminde sıkıştırılan 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

Her boyuta% 10-20 oranında ekleme yaparak maksimum boyutları elde edebilirsiniz. Bu% 10-20'lik oran, uygulamayı her zamanki gibi geliştirmenize olanak tanırken, boyutu çok fazla büyüdüğünde sizi uyarır.

bundlesize ağ cihazını etkinleştir
bundlesize paketini geliştirme bağımlılığı olarak yükleyin:
```
npm install bundlesize --save-dev
```

package.json içindeki bundlesize bölümünde, somut maksimum boyutları belirtin. Bazı dosyalar (ör. resimler) için her dosya için değil, dosya türü başına maksimum boyutu belirtebilirsiniz:

// 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 aktarmada npm run check-size yürütecek şekilde yapılandırın. (Projeyi bu platform üzerinden 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 olup olmadığını görürsünüz:

Paket boyutu çıktısının ekran görüntüsü. Tüm derleme sonuçları
"Başarılı" olarak işaretlenir

Başarısızlık durumunda:

Paket boyutu çıktısının ekran görüntüsü. Bazı derleme sonuçları
"Başarısız" olarak işaretlenir

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 inceleyebilirsiniz. webpack-bundle-analyzer ile tanışın:

(github.com/webpack-contrib/webpack-bundle-analyzer adresindeki ekran kaydı)

webpack-bundle-analyzer paketi paketi tarar ve içindekilerin bir 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

web paketi yapılandırmasına bir eklenti ekleyin:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

üretim derlemesini çalıştırmanız gerekir. Eklenti, istatistikler sayfasını bir tarayıcıda açar.

İstatistik sayfası, varsayılan olarak ayrıştırılan dosyaların boyutunu (pakette göründüğü şekliyle dosyaların boyutu) gösterir. Gerçek kullanıcıların deneyimine yakın olduğundan muhtemelen gzip boyutlarını karşılaştırmak istersiniz; boyutları değiştirmek için soldaki kenar çubuğunu kullanın.

Raporda şunlara dikkat etmeniz gerekir:

Büyük bağımlılıklar. Neden bu kadar büyükler? Daha küçük alternatifler (ör. Tepki vermek yerine hazırlıklı olmak)? İçerdiği tüm kodları kullanıyor musunuz (ör. Moment.js, genellikle kullanılmayan ve atlanabilecek çok sayıda yerel ayar içeriyor mu?
Bağımlıların kopyaları. Aynı kitaplığı birden fazla dosyada tekrarlanıyor mu? (Ör. web paketi 4'teki optimization.splitChunks.chunks seçeneğini veya web paketi 3'teki CommonsChunkPlugin seçeneğini ortak bir dosyaya taşımak için kullanın.) Yoksa pakette aynı kitaplığın birden fazla sürümü de mi var?
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ç kullanmaya devam etmeyi deneyin.

Ayrıca, Sean Larkin'in web paketi paketleriyle ilgili harika analizine de göz atın.

Ö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 ürün boyutunu artıran unsurları inceleyin