Ce face un bundle JS să crească și de ce doare dimensiunea?

Question

IT Interview Practice · Accepted Answer

Un **bundle** este JavaScript-ul pe care unealta ta de build îl împachetează și îl trimite către browser. Crește în principal din **dependențe**, **cod duplicat** și **trimiterea de cod de care pagina nu are încă nevoie**.

## Ce îl umflă

- **Biblioteci grele** — o singură bibliotecă de date sau de iconițe poate adăuga sute de KB. Importul întregului `lodash` pentru o singură funcție aduce cu el tot pachetul.
- **Importul a tot** în loc de ce folosești:

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

- **Fără code splitting** — toată aplicația (fiecare rută, fiecare modal) este împachetată într-un singur fișier încărcat de la început.
- **Polyfill-uri și dependențe duplicate** — două versiuni ale aceluiași pachet împachetate de două ori.

## De ce doare dimensiunea

Octeții sunt problema mică; **parsarea și execuția** JS-ului este cea mare. Browserul trebuie să descarce, apoi să parseze, să compileze și să ruleze fiecare octet pe thread-ul principal — și asta este mult mai lent pe un telefon de gamă medie decât pe un laptop. JS-ul greu întârzie interactivitatea și înrăutățește direct **INP** și **LCP**.

## De ce contează

„Hai doar să adăugăm biblioteca” este modul în care aplicațiile devin pe tăcute lente. Intervievatorii vor să vadă că te gândești la *costul per dependență* și că apelezi la importuri per funcție, tree shaking și code splitting înainte ca bundle-ul să se umfle — mai ales că telefoanele utilizatorilor tăi sunt mult mai slabe decât mașina ta de dezvoltare.

Ce îl umflă

De ce doare dimensiunea

De ce contează

Întrebări conexe