Alat yang harus digunakan untuk melacak dan menganalisis paket webpack
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
Optimalkan aplikasi untuk membuatnya sekecil mungkin. Jalankan build produksi.
Tambahkan bagian
bundlesize
kepackage.json
dengan kode berikut konten:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
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
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
Instal paket
bundlesize
sebagai dependensi pengembangan:npm install bundlesize --save-dev
Di bagian
bundlesize
dalampackage.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", } ] }
Tambahkan skrip npm untuk menjalankan pemeriksaan:
// package.json { "scripts": { "check-size": "bundlesize" } }
Konfigurasikan CI untuk menjalankan
npm run check-size
pada setiap push. (Dan integrasikanbundlesize
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
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 – atauCommonsChunkPlugin
– 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
dandate-fns
, ataulodash
danlodash-es
.) Coba gunakan satu alat saja.
Selain itu, lihat analisis yang bagus tentang paket webpack oleh Sean Larkin.
Merangkum
- Gunakan
webpack-dashboard
danbundlesize
untuk terus memantau seberapa besar aplikasi Anda - Pelajari hal yang membuat ukuran dengan
webpack-bundle-analyzer