Çfarë e rrit një JS bundle, dhe pse dëmton madhësia?

Question

IT Interview Practice · Accepted Answer

Një **bundle** është JavaScript-i që build tool-i juaj paketon dhe dërgon te browser-i. Rritet kryesisht nga **varësitë (dependencies)**, **kodi i dublikuar** dhe **dërgimi i kodit që faqja nuk i duhet ende**.

## Çfarë e fryn

- **Librari të rënda** — një librari e vetme datash apo ikonash mund të shtojë qindra KB. Importimi i të gjithë `lodash` për një funksion tërheq të gjithë atë.
- **Importimi i gjithçkaje** në vend të asaj që përdorni:

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

- **Pa code splitting** — i gjithë app-i (çdo route, çdo modal) paketohet në një skedar të vetëm të ngarkuar që në fillim.
- **Polyfill-e dhe varësi të dublikuara** — dy versione të të njëjtit paket të paketuara dy herë.

## Pse dëmton madhësia

Bajtet janë problemi i vogël; **parse-imi dhe ekzekutimi** i JS-it është ai i madhi. Browser-i duhet të shkarkojë, pastaj të parse-ojë, kompilojë dhe ekzekutojë çdo bajt në main thread — dhe kjo është shumë më e ngadaltë në një telefon të mesëm sesa në një laptop. JS-i i rëndë e vonon interaktivitetin dhe i keqëson drejtpërdrejt **INP** dhe **LCP**.

## Pse ka rëndësi

"Thjesht shto libraria-në" është mënyra se si app-et ngadalë bëhen të ngadalta. Intervistuesit duan të shohin që mendoni për *koston për varësi* dhe kapni importe për-funksion, tree shaking dhe code splitting para se bundle-i të fryhet — sidomos meqë telefonat e përdoruesve tuaj janë shumë më të dobët se makina juaj e zhvillimit.

Çfarë e fryn

Pse dëmton madhësia

Pse ka rëndësi

Pyetje të ngjashme