Memantau dan menganalisis aplikasi

Alat yang harus digunakan untuk melacak dan menganalisis paket webpack

Ivan Akulov

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

Bagian ini menjelaskan alat yang 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 output webpack dengan ukuran dependensi, progres, dan detail lainnya. Berikut tampilannya:

Dasbor ini membantu melacak dependensi besar. Jika 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 konfigurasi:

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

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

atau menggunakan compiler.apply() jika Anda menggunakan server dev 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 yang terlalu besar dan dapat diganti dengan alternatif yang lebih kecil.

bundlesize

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

Untuk mengonfigurasinya:

Mengetahui ukuran maksimum

1. Optimalkan aplikasi agar sekecil mungkin. Jalankan build produksi.

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

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

3. Jalankan bundlesize dengan npx:

   npx bundlesize
   

   Tindakan ini akan mencetak ukuran file yang di-gzip dari setiap file:

   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 tumbuh 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 beton. Untuk beberapa file (misalnya, gambar), Anda mungkin ingin 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. Konfigurasikan CI untuk menjalankan npm run check-size pada 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:

Atau, jika terjadi kegagalan:

Bacaan lebih lanjut

• Alex Russell tentang waktu pemuatan di dunia nyata yang harus ditargetkan

Menganalisis alasan paket begitu besar

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

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

Untuk menggunakan analyzer, 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 jalankan build produksi. Plugin akan membuka halaman statistik di browser.

Secara default, halaman statistik menunjukkan ukuran file yang diurai (yaitu, file seperti yang muncul dalam paket). Anda mungkin ingin membandingkan ukuran gzip karena lebih mendekati pengalaman pengguna yang sebenarnya; gunakan sidebar di sebelah kiri untuk mengubah ukuran.

Berikut yang harus dicari dalam laporan:

• Dependensi besar. Mengapa ukurannya begitu besar? Apakah ada alternatif yang lebih kecil (misalnya, Preact, bukan React)? Apakah Anda menggunakan semua kode yang disertakan (misalnya, Moment.js menyertakan banyak lokalitas yang sering tidak digunakan dan dapat dihapus)?
• Dependensi duplikat. Apakah Anda melihat library yang sama berulang kali 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 dari library yang sama?
• Dependensi yang serupa. Apakah ada library serupa yang melakukan pekerjaan yang sama? (Misalnya, moment dan date-fns, atau lodash dan lodash-es.) Coba gunakan satu alat saja.

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

Mengambil kesimpulan

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