Waardoor groeit een JS-bundle, en waarom is grootte schadelijk?

Question

IT Interview Practice · Accepted Answer

Een **bundle** is de JavaScript die je build-tool inpakt en naar de browser stuurt. Hij groeit vooral door **dependencies**, **gedupliceerde code**, en **code versturen die de pagina nog niet nodig heeft**.

## Wat hem opblaast

- **Zware libraries** — één date- of icon-library kan honderden KB toevoegen. Heel `lodash` importeren voor één functie trekt het geheel binnen.
- **Alles importeren** in plaats van wat je gebruikt:

```js
import _ from "lodash";           // ~70KB — de hele library
import debounce from "lodash/debounce"; // ~2KB — alleen de functie die je nodig hebt
```

- **Geen code splitting** — de hele app (elke route, elke modal) wordt in één bestand gebundeld dat vooraf wordt geladen.
- **Polyfills en gedupliceerde dependencies** — twee versies van hetzelfde package tweemaal gebundeld.

## Waarom grootte schadelijk is

Bytes zijn het kleine probleem; **parsen en uitvoeren** van JS is het grote. De browser moet elke byte downloaden, dan parsen, compileren en op de main thread draaien — en dat is veel trager op een middenklasse-telefoon dan op een laptop. Zware JS vertraagt interactiviteit en verslechtert direct **INP** en **LCP**.

## Waarom het belangrijk is

"Voeg gewoon de library toe" is hoe apps stilletjes traag worden. Interviewers willen zien dat je nadenkt over de *kosten per dependency* en grijpt naar per-functie imports, tree shaking en code splitting voordat de bundle opzwelt — zeker omdat de telefoons van je gebruikers veel zwakker zijn dan je dev-machine.

Wat hem opblaast

Waarom grootte schadelijk is

Waarom het belangrijk is

Gerelateerde vragen