Mitől nő egy JS bundle, és miért árt a méret?

Question

IT Interview Practice · Accepted Answer

A **bundle** az a JavaScript, amelyet a build eszközöd csomagol és küld a böngészőnek. Főként a **függőségektől**, a **duplikált kódtól** és attól nő, hogy **olyan kódot szállítasz, amelyre az oldalnak még nincs szüksége**.

## Mi duzzasztja fel

- **Nehéz könyvtárak** — egyetlen dátum- vagy ikonkönyvtár több száz KB-ot adhat hozzá. Ha egyetlen függvényért a teljes `lodash`-t importálod, az egészet behúzod.
- **Mindent importálsz** ahelyett, amit használsz:

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

- **Nincs code splitting** — az egész alkalmazás (minden route, minden modál) egyetlen, előre betöltött fájlba van csomagolva.
- **Polyfillek és duplikált függőségek** — ugyanannak a csomagnak két verziója kétszer becsomagolva.

## Miért árt a méret

A bájtok a kisebbik probléma; a JS **feldolgozása és végrehajtása** a nagyobbik. A böngészőnek le kell töltenie, majd feldolgoznia, lefordítania és lefuttatnia minden bájtot a fő szálon — és ez sokkal lassabb egy középkategóriás telefonon, mint egy laptopon. A nehéz JS késlelteti az interaktivitást, és közvetlenül rontja az **INP**-t és az **LCP**-t.

## Miért fontos

A „csak add hozzá a könyvtárat” hozzáállástól válnak az alkalmazások csendben lassúvá. Az interjúztatók azt akarják látni, hogy *függőségenkénti költségben* gondolkodsz, és a függvényenkénti importok, a tree shaking és a code splitting felé nyúlsz, mielőtt a bundle felfúvódna — különösen mivel a felhasználóid telefonjai sokkal gyengébbek, mint a te fejlesztői géped.

Mi duzzasztja fel

Miért árt a méret

Miért fontos

Kapcsolódó kérdések