Memantau dan menganalisis aplikasi

Alat yang digunakan untuk melacak dan menganalisis paket webpack

Ivan Akulov

Bahkan saat Anda mengonfigurasi webpack untuk membuat aplikasi sekecil mungkin, Anda tetap perlu melacaknya dan mengetahui apa saja yang termasuk di dalamnya. Jika tidak, Anda dapat menginstal dependensi yang akan membuat aplikasi dua kali lebih besar – dan bahkan tidak menyadarinya!

Bagian ini menjelaskan alat yang dapat membantu Anda memahami paket.

Memantau ukuran paket

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

webpack-dashboard

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

Screenshot output dasbor webpack

Dasbor ini membantu melacak dependensi yang besar - jika Anda menambahkannya, Anda akan langsung melihatnya di bagian Modules.

Untuk mengaktifkannya, instal paket webpack-dashboard:

npm install webpack-dashboard --save-dev

Dan tambahkan plugin ke bagian plugins pada 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 untuk menemukan kemungkinan tempat untuk perbaikan! Misalnya, scroll bagian Modules untuk menemukan library mana yang terlalu besar dan dapat diganti dengan alternatif yang lebih kecil.

ukuran paket

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

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

Untuk mengonfigurasinya:

Mengetahui ukuran maksimum

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

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

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

  3. Jalankan bundlesize dengan npx:

    npx bundlesize

    Tindakan ini akan mencetak ukuran setiap file dalam bentuk 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 sambil memperingatkan Anda jika ukurannya terlalu besar.

    Aktifkan bundlesize

  5. Instal paket bundlesize sebagai dependensi pengembangan:

    npm install bundlesize --save-dev

  6. Di bagian bundlesize dalam package.json, tentukan konkretnya ukuran maksimum. Untuk beberapa file (misalnya, gambar), Anda mungkin ingin menentukan ukuran maksimum per file jenis, 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 di setiap push. (Dan integrasikan bundlesize dengan GitHub jika Anda mengembangkan project di dalamnya.)

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

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

Atau, jika terjadi kegagalan:

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

Bacaan lebih lanjut

Analisis alasan paket sangat besar

Sebaiknya Anda menggali lebih dalam paket untuk melihat modul apa yang memerlukan ruang di dalamnya. Rapat webpack-bundle-analyzer:

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

webpack-bundle-analyzer memindai paket dan membuat visualisasi tentang isinya. Gunakan ini visualisasi data untuk menemukan dependensi yang besar atau tidak diperlukan.

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

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

menambahkan plugin ke konfigurasi webpack:

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

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

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

Secara default, halaman statistik menampilkan ukuran file yang diuraikan (yaitu, file seperti yang muncul paket). Anda mungkin ingin membandingkan ukuran {i>gzip<i} karena lebih mendekati ukuran dari pengguna pengalaman penggunaan; gunakan bilah sisi di sebelah kiri untuk mengubah ukuran.

Berikut yang harus dicari dalam laporan:

  • Dependensi yang besar. Mengapa ukurannya begitu besar? Apakah ada alternatif yang lebih kecil (misalnya, Praktek bukan React)? Apakah Anda menggunakan semua kode yang disertakan (mis., Moment.js menyertakan banyak lokalitas yang sering tidak digunakan dan dapat dihapus)?
  • Dependensi yang diduplikasi. Apakah Anda melihat library yang sama berulang dalam beberapa file? (Gunakan, misalnya, opsi optimization.splitChunks.chunks – di webpack 4 – atau CommonsChunkPlugin – di webpack 3 – untuk memindahkannya ke dalam file umum.) Atau, apakah paket tersebut memiliki beberapa versi dari perpustakaan yang sama?
  • Dependensi serupa. Apakah ada library serupa yang melakukan pekerjaan yang sama? (Mis. moment dan date-fns, atau lodash dan lodash-es.) Coba gunakan satu alat saja.

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

Mengambil kesimpulan

  • Gunakan webpack-dashboard dan bundlesize untuk terus memantau seberapa besar aplikasi Anda
  • Pelajari elemen yang membentuk ukuran dengan webpack-bundle-analyzer