Hvad får en JS-bundle til at vokse, og hvorfor gør størrelse ondt?

Question

IT Interview Practice · Accepted Answer

En **bundle** er den JavaScript, dit build-værktøj pakker og sender til browseren. Den vokser hovedsageligt af **dependencies**, **dubleret kode** og **at sende kode, som siden ikke har brug for endnu**.

## Hvad puster den op

- **Tunge biblioteker** — ét dato- eller ikon-bibliotek kan tilføje hundredvis af KB. At importere hele `lodash` for én funktion trækker det hele med.
- **At importere alt** i stedet for det, du bruger:

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **Ingen code splitting** — hele appen (hver route, hver modal) bundtes i én fil, der indlæses i starten.
- **Polyfills og duplikerede dependencies** — to versioner af den samme pakke bundtet to gange.

## Hvorfor størrelse gør ondt

Bytes er det lille problem; **at parse og eksekvere** JS er det store. Browseren skal downloade og derefter parse, kompilere og køre hver byte på main thread — og det er meget langsommere på en mellemklassetelefon end på en bærbar. Tung JS forsinker interaktivitet og forværrer direkte **INP** og **LCP**.

## Hvorfor det betyder noget

"Bare tilføj biblioteket" er, hvordan apps stille og roligt bliver langsomme. Interviewere vil se, at du tænker på *omkostning per dependency* og griber til per-funktion-imports, tree shaking og code splitting, før bundlen svulmer op — især da dine brugeres telefoner er langt svagere end din udviklingsmaskine.

Hvad puster den op

Hvorfor størrelse gør ondt

Hvorfor det betyder noget

Relaterede spørgsmål