Digital Transformation
Bundle Analyzer
TL;DR: Bundle Analyzer adalah alat visualisasi yang memetakan ukuran setiap modul JavaScript di dalam bundle aplikasi Next.js atau Webpack. Alat ini membantu marketer dan developer mengidentifikasi paket besar yang membebani Core Web Vitals, terutama LCP dan INP. Di Next.js, paket
@next/bundle-analyzermembungkus konfigurasi Webpack lalu mengeluarkan peta interaktif berbasis treemap.
Apa itu Bundle Analyzer?
Bundle Analyzer mengambil hasil build Webpack atau Turbopack, lalu memvisualisasikan setiap chunk dan modul dalam bentuk treemap berwarna. Setiap kotak mewakili satu modul, dan luas kotak proporsional terhadap ukuran modul. Dengan satu kali pandang, marketer Indonesia bisa melihat library mana yang menelan paling banyak kilobyte.
Analoginya seperti membongkar koper sebelum pesawat berangkat. Kalau ada barang besar yang tidak penting, kita keluarkan supaya total beban turun. Tools ini memudahkan keputusan trim, termasuk mengganti library berat dengan alternatif yang lebih ringan, atau menerapkan dynamic import untuk kode yang tidak dibutuhkan saat first paint.
Cara Membaca Hasilnya
| Warna | Arti |
|---|---|
| Stat size | Ukuran asli sebelum kompresi |
| Parsed size | Ukuran setelah Webpack memproses |
| Gzip size | Ukuran terkirim ke browser, paling relevan |
Fokus utama selalu ke kolom gzip karena itu yang benar-benar diunduh user. Bila satu library di atas 50 kB gzip, biasanya layak diaudit ulang.
Kenapa Penting?
Bundle JavaScript yang tebal langsung berdampak ke skor LCP dan INP. Dalam praktik web.dev, setiap 100 kB tambahan JavaScript bisa menggeser LCP sekitar 200-400 ms di jaringan 4G Indonesia rata-rata. Bagi marketer, ini berarti lebih banyak user keluar sebelum halaman selesai dimuat. Bundle Analyzer adalah langkah pertama untuk menjaga halaman tetap ringan tanpa menebak-nebak.
Penggunaannya juga relevan untuk audit rutin sebelum rilis fitur baru. Tim Vito Atmo memakai bundle analyzer sebelum setiap deploy major di proyek Atmo LMS, terutama saat menambah library form atau visualisasi. Dengan visualisasi treemap, keputusan tree shaking dan code splitting jadi berbasis data, bukan tebakan.
Pertanyaan Umum
Apakah Bundle Analyzer mengganggu produksi?
Tidak. Bundle analyzer hanya aktif saat build dengan flag environment khusus, biasanya ANALYZE=true. Hasil produksi tetap bersih.
Berapa ukuran bundle yang dianggap sehat?
Untuk halaman first-load Next.js, target ideal di bawah 170 kB gzip. Di atas angka itu, INP dan LCP cenderung memburuk pada koneksi 4G Indonesia rata-rata.
Istilah Terkait