Menene ke sa JS bundle ya girma, kuma me ya sa girma ke cutarwa?

Question

IT Interview Practice · Accepted Answer

**Bundle** shi ne JavaScript ɗin da build tool ɗinka ke haɗawa da tura zuwa browser. Yana girma galibi daga **dependencies**, **duplicated code**, da **turin code ɗin da page ba ta bukata tukuna**.

## Abin da ke kumbura shi

- **Manyan libraries** — date ko icon library guda na iya ƙara ɗaruruwan KB. Shigo da dukkan `lodash` don function guda yana ja da dukan abu.
- **Shigo da komai** maimakon abin da kake amfani da shi:

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

- **Babu code splitting** — dukan app (kowace route, kowane modal) an haɗa cikin file guda da ake loda tun farko.
- **Polyfills da duplicated dependencies** — versions biyu na package guda da aka haɗa sau biyu.

## Me ya sa girma ke cutarwa

Bytes su ne ƙaramar matsala; **parsing da executing** JS ita ce babbar matsala. Browser dole ne ya download, sannan ya parse, compile, da gudanar da kowane byte a main thread — kuma wannan ya fi jinkiri a kan mid-range phone fiye da laptop. Manyan JS suna jinkirta interactivity kuma suna kai tsaye ta ɓata **INP** da **LCP**.

## Me ya sa yake da muhimmanci

"Kawai ƙara library" ita ce yadda apps ke zama masu jinkiri a shiru. Masu tambayoyi suna son ganin ka yi tunani game da *cost per dependency* kuma ka kai ga per-function imports, tree shaking, da code splitting kafin bundle ya kumbura — musamman tunda phones na masu amfani da kai sun fi rauni fiye da dev machine ɗinka.

Abin da ke kumbura shi

Me ya sa girma ke cutarwa

Me ya sa yake da muhimmanci

Tambayoyi masu alaƙa