Memantau dan menganalisis aplikasi

Alat yang akan digunakan untuk memantau dan menganalisis paket webpack

Ivan Akulov

Meskipun Anda mengonfigurasi webpack untuk membuat aplikasi sekecil mungkin, Anda tetap harus melacaknya dan mengetahui apa saja yang disertakan di dalamnya. Jika tidak, Anda dapat menginstal dependensi yang akan membuat ukuran aplikasi dua kali lebih besar – dan bahkan tidak akan menyadarinya.

Bagian ini menjelaskan alat yang dapat membantu Anda memahami paket.

Pantau ukuran paket

Untuk memantau ukuran aplikasi, gunakan webpack-dashboard selama pengembangan dan bundlesize di CI.

dasbor-webpack

webpack-dashboard meningkatkan output webpack dengan ukuran dependensi, progres, dan detail lainnya. Berikut ini tampilannya:

Screenshot output webpack-dashboard

Dasbor ini membantu melacak dependensi besar – jika Anda menambahkannya, Anda akan langsung melihatnya di bagian Modul.

Untuk mengaktifkannya, instal paket webpack-dashboard:

npm install webpack-dashboard --save-dev

Dan tambahkan plugin ke bagian plugins konfigurasi:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

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

atau menggunakan compiler.apply() jika Anda menggunakan server developer berbasis Express:

compiler.apply(new DashboardPlugin());

Jangan ragu untuk bermain-main dengan dasbor guna menemukan kemungkinan tempat untuk peningkatan! Misalnya, scroll bagian Modules untuk menemukan library yang terlalu besar dan dapat diganti dengan alternatif yang lebih kecil.

ukuranpaket

bundlesize memverifikasi bahwa aset webpack tidak melebihi ukuran yang ditentukan. Integrasikan dengan CI untuk mendapatkan notifikasi saat aplikasi menjadi terlalu besar:

Screenshot bagian CI dari permintaan pull di GitHub. Di antara alat CI, ada output Bundlesize

Untuk mengonfigurasinya:

Mencari tahu ukuran maksimum

  1. Optimalkan aplikasi untuk menjadikannya sekecil mungkin. Jalankan build produksi.

  2. Tambahkan bagian bundlesize ke dalam package.json dengan konten berikut:

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

  3. Jalankan bundlesize dengan npx:

    npx bundlesize

    Tindakan ini akan mencetak ukuran setiap file dalam format gzip:

    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. Tambahkan 10-20% ke setiap ukuran, dan Anda akan mendapatkan ukuran maksimum. Margin 10-20% ini akan memungkinkan Anda mengembangkan aplikasi seperti biasa sekaligus memperingatkan Anda saat ukurannya terlalu besar.

    Aktifkan bundlesize

  5. Instal paket bundlesize sebagai dependensi pengembangan:

    npm install bundlesize --save-dev

  6. Di bagian bundlesize di package.json, tentukan ukuran maksimum konkret. Untuk beberapa file (misalnya, gambar), Anda dapat menentukan ukuran maksimum per jenis file, bukan per setiap file:

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

  7. Tambahkan skrip npm untuk menjalankan pemeriksaan:

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

  8. Konfigurasi CI untuk menjalankan npm run check-size pada setiap push. (Dan integrasikan bundlesize dengan GitHub jika Anda mengembangkan project di GitHub.)

Selesai! Sekarang, jika menjalankan npm run check-size atau mengirim kode, Anda akan melihat apakah file output cukup kecil:

Screenshot output ukuran paket. Semua hasil build ditandai dengan 'Lulus'

Atau, jika terjadi kegagalan:

Screenshot output ukuran paket. Beberapa hasil build ditandai dengan 'Gagal'

Bacaan lebih lanjut

Menganalisis alasan ukuran paket begitu besar

Anda mungkin ingin mempelajari lebih dalam paket untuk melihat modul apa yang membutuhkan ruang di dalamnya. Perkenalkan webpack-bundle-analyzer:

(Rekaman layar dari github.com/webpack-contrib/webpack-bundle-analyzer)

webpack-bundle-analyzer memindai paket tersebut dan membuat visualisasi tentang apa yang ada di dalamnya. Gunakan visualisasi ini untuk menemukan dependensi yang besar atau tidak diperlukan.

Untuk menggunakan penganalisis, instal paket webpack-bundle-analyzer:

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

tambahkan plugin ke konfigurasi webpack:

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

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

dan menjalankan versi produksi. Plugin akan membuka halaman statistik di browser.

Secara default, halaman statistik menunjukkan ukuran file yang diuraikan (yaitu, file seperti yang muncul dalam paket). Anda mungkin ingin membandingkan ukuran gzip karena ukuran tersebut lebih mirip dengan pengalaman pengguna yang sebenarnya; gunakan bilah sisi di sebelah kiri untuk mengganti ukuran.

Berikut yang harus diperhatikan dalam laporan:

  • Dependensi yang besar. Mengapa ukuran komputer begitu besar? Apakah ada alternatif yang lebih kecil (misalnya, Preact, bukan React)? Apakah Anda menggunakan semua kode yang disertakan (mis., Moment.js mencakup banyak lokalitas yang sering tidak digunakan dan dapat dihapus)?
  • Dependensi duplikat. Apakah Anda melihat library yang sama berulang di beberapa file? (Gunakan, misalnya, opsi optimization.splitChunks.chunks – di webpack 4 – atau CommonsChunkPlugin – di webpack 3 – untuk memindahkannya ke file umum.) Atau apakah paket tersebut memiliki beberapa versi {i>library<i} yang sama?
  • Dependensi serupa. Apakah ada library serupa yang melakukan tugas yang kurang lebih sama? (Misalnya, moment dan date-fns, atau lodash dan lodash-es.) Coba tetap menggunakan satu alat.

Selain itu, lihat analisis hebat tentang paket webpack Sean Larkin.

Mengambil kesimpulan

  • Gunakan webpack-dashboard dan bundlesize untuk terus memantau seberapa besar aplikasi Anda
  • Pelajari lebih lanjut apa yang meningkatkan ukuran dengan webpack-bundle-analyzer