Nini hufanya JS bundle ikue, na kwa nini ukubwa huumiza?

Question

IT Interview Practice · Accepted Answer

**Bundle** ni JavaScript ambayo build tool yako hupakia na kutuma kwa browser. Hukua hasa kutokana na **dependencies**, **code iliyonakiliwa**, na **kutuma code ambayo ukurasa hauhitaji bado**.

## Nini huivimbisha

- **Libraries nzito** — library moja ya tarehe au ikoni inaweza kuongeza mamia ya KB. Kuingiza `lodash` yote kwa function moja huvuta kila kitu.
- **Kuingiza kila kitu** badala ya unachotumia:

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

- **Hakuna code splitting** — app nzima (kila route, kila modal) imefungwa katika faili moja inayopakiwa mwanzoni.
- **Polyfills na dependencies zilizonakiliwa** — matoleo mawili ya package ile ile yaliyofungwa mara mbili.

## Kwa nini ukubwa huumiza

Bytes ni tatizo dogo; **kuchanganua na kutekeleza** JS ndilo tatizo kubwa. Browser lazima ipakue, kisha ichanganue, i-compile, na kuendesha kila byte kwenye main thread — na hilo ni polepole zaidi kwa simu ya kiwango cha kati kuliko laptop. JS nzito hucheleweshaji interactivity na hufanya vibaya moja kwa moja **INP** na **LCP**.

## Kwa nini ni muhimu

"Ongeza tu library" ndivyo apps zinavyokuwa polepole kimya. Wahojaji wanataka kuona unafikiria kuhusu *gharama kwa kila dependency* na kufikia per-function imports, tree shaking, na code splitting kabla bundle haijavimba — hasa kwa kuwa simu za watumiaji wako ni dhaifu zaidi ya mashine yako ya dev.

Nini huivimbisha

Kwa nini ukubwa huumiza

Kwa nini ni muhimu

Maswali yanayohusiana