Memantau dan menganalisis aplikasi

Alat yang harus 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 akan 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.

dasbor-webpack

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

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 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 mana 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 ukuran aplikasi terlalu besar:

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 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 dalam package.json, tentukan konkretnya ukuran maksimum. 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 menjalankan npm run check-size atau mendorong 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 kita targetkan

Analisis alasan paket sangat besar

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

webpack-bundle-analyzer memindai paket dan membuat visualisasi tentang apa yang ada di dalamnya. 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 jalankan build produksi. Plugin akan membuka halaman statistik di browser.

Secara default, halaman statistik menampilkan ukuran file yang diuraikan (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 hal yang perlu diperhatikan 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 (mis., Moment.js menyertakan banyak lokalitas yang sering tidak digunakan dan dapat dihapus)?
• Dependensi duplikat. 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 file umum.) Atau, apakah paket tersebut memiliki beberapa versi dari perpustakaan yang sama?
• Dependensi 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 yang bagus tentang paket webpack oleh Sean Larkin.

Merangkum

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