Apa yang membuat bundle JS membesar, dan mengapa ukuran itu merugikan?

Question

IT Interview Practice · Accepted Answer

Sebuah **bundle** adalah JavaScript yang dikemas dan dikirim oleh build tool-mu ke browser. Ia membesar terutama karena **dependency**, **kode yang terduplikasi**, dan **mengirim kode yang belum dibutuhkan halaman**.

## Apa yang membengkakkannya

- **Library berat** — satu library tanggal atau ikon bisa menambah ratusan KB. Mengimpor seluruh `lodash` untuk satu fungsi menarik seluruhnya.
- **Mengimpor segalanya** alih-alih yang kamu pakai:

```js
import _ from "lodash";           // ~70KB — seluruh library
import debounce from "lodash/debounce"; // ~2KB — hanya fungsi yang kamu butuhkan
```

- **Tanpa code splitting** — seluruh aplikasi (setiap route, setiap modal) dibundel ke dalam satu file yang dimuat di awal.
- **Polyfill dan dependency yang terduplikasi** — dua versi paket yang sama dibundel dua kali.

## Mengapa ukuran itu merugikan

Byte adalah masalah kecil; **parsing dan eksekusi** JS adalah masalah besar. Browser harus mengunduh, lalu memparse, mengompilasi, dan menjalankan setiap byte di main thread — dan itu jauh lebih lambat di ponsel kelas menengah daripada di laptop. JS yang berat menunda interaktivitas dan langsung memperburuk **INP** dan **LCP**.

## Mengapa ini penting

"Tinggal tambahkan library" adalah cara aplikasi diam-diam menjadi lambat. Pewawancara ingin melihatmu memikirkan *biaya per dependency* dan memilih import per-fungsi, tree shaking, dan code splitting sebelum bundle membengkak — apalagi karena ponsel penggunamu jauh lebih lemah dari mesin dev-mu.

Apa yang membengkakkannya

Mengapa ukuran itu merugikan

Mengapa ini penting

Pertanyaan terkait