Digital Transformation
Bundle Size
TL;DR: Bundle size adalah total ukuran berkas JavaScript yang harus diunduh dan dijalankan browser sebelum halaman menjadi interaktif. Bundle besar memperlambat waktu muat dan menurunkan skor performa. Cara umum menguranginya: code splitting, tree shaking, dan menunda kode yang tidak segera dibutuhkan.
Apa itu Bundle Size?
Bundle size adalah ukuran gabungan file JavaScript (dan kadang CSS) yang dikemas oleh tools build, lalu dikirim ke browser pengunjung. Analoginya seperti koper: semakin banyak barang yang dijejalkan, semakin berat dibawa dan semakin lama dibongkar. Browser harus mengunduh, mengurai, dan mengeksekusi bundle ini sebelum sebagian besar interaksi berfungsi. Ukuran bundle berkaitan erat dengan tech stack yang dipilih dan cara aplikasi dirakit.
Cara Menekan Bundle Size
| Teknik | Cara kerja |
|---|---|
| Code splitting | Memecah kode jadi potongan kecil, dimuat saat dibutuhkan |
| Tree shaking | Membuang kode yang tidak terpakai saat build |
| Lazy loading | Menunda muat komponen non-kritikal |
| Audit dependensi | Mengganti library berat dengan alternatif ringan |
Menurut panduan web.dev tentang JavaScript yang efisien, mengirim lebih sedikit JavaScript adalah salah satu cara paling efektif memperbaiki performa.
Kenapa Penting?
Bundle besar berdampak langsung pada Core Web Vitals, terutama interaktivitas dan LCP. Untuk pasar Indonesia yang banyak mengakses lewat perangkat menengah dan jaringan tidak selalu stabil, bundle ramping membuat perbedaan nyata pada pengalaman pengguna. Dalam beberapa proyek, memindahkan logika ke server dan memangkas dependensi tidak terpakai menurunkan ukuran bundle awal secara signifikan tanpa mengubah tampilan.
Pertanyaan Umum
Berapa bundle size yang ideal?
Tidak ada angka mutlak, tetapi praktik umum menyarankan menjaga JavaScript awal sekecil mungkin, idealnya di bawah ratusan kilobyte terkompresi. Targetnya bervariasi tergantung kompleksitas aplikasi.
Apa beda bundle size dengan kecepatan halaman?
Bundle size adalah salah satu faktor kecepatan, bukan satu-satunya. Gambar, font, dan permintaan jaringan juga berpengaruh pada waktu muat keseluruhan.
Istilah Terkait