Čím roste JS bundle a proč velikost škodí?

Question

IT Interview Practice · Accepted Answer

**Bundle** je JavaScript, který váš build nástroj zabalí a pošle do prohlížeče. Roste hlavně kvůli **závislostem**, **duplikovanému kódu** a **posílání kódu, který stránka zatím nepotřebuje**.

## Co jej nafukuje

- **Těžké knihovny** — jediná knihovna na datum nebo ikony může přidat stovky KB. Import celého `lodash` kvůli jedné funkci přitáhne celou knihovnu.
- **Import všeho** místo toho, co používáte:

```js
import _ from "lodash";           // ~70 KB — celá knihovna
import debounce from "lodash/debounce"; // ~2 KB — jen funkce, kterou potřebujete
```

- **Žádný code splitting** — celá aplikace (každá route, každý modal) je zabalena do jednoho souboru načteného předem.
- **Polyfilly a duplikované závislosti** — dvě verze stejného balíčku zabalené dvakrát.

## Proč velikost škodí

Bajty jsou malý problém; **parsování a vykonávání** JS je ten velký. Prohlížeč musí každý bajt stáhnout, poté naparsovat, zkompilovat a spustit na hlavním vlákně — a to je na středně výkonném telefonu mnohem pomalejší než na notebooku. Těžký JS zpožďuje interaktivitu a přímo zhoršuje **INP** a **LCP**.

## Proč je to důležité

„Prostě přidej tu knihovnu“ je způsob, jak aplikace potichu zpomalí. Tazatelé chtějí vidět, že přemýšlíte o *nákladu na závislost* a saháte po importech jednotlivých funkcí, tree shakingu a code splittingu dřív, než bundle nabobtná — obzvlášť když telefony vašich uživatelů jsou mnohem slabší než váš vývojářský stroj.

Co jej nafukuje

Proč velikost škodí

Proč je to důležité

Související otázky