JS bundle શાથી વધે છે, અને size શા માટે નુકસાન કરે છે?

Question

IT Interview Practice · Accepted Answer

**Bundle** એ JavaScript છે જે તમારું build tool package કરી browser ને મોકલે છે. તે મુખ્યત્વે **dependency**, **duplicated code**, અને **page ને હજુ જરૂરી ન હોય તેવો code મોકલવા** થી વધે છે.

## તેને શું ફુલાવે છે

- **ભારે library** — એક date કે icon library સેંકડો KB ઉમેરી શકે. એક function માટe આખું `lodash` import કરવાથી આખી વસ્તુ ખેંચાઈ આવે છે.
- જે વાપરો છો તેને બદલે **બધું import કરવું**:

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

- **કોઈ code splitting નહીં** — આખી app (દરેક route, દરેક modal) એક જ file માં bundle થાય જે આગળથી load થાય.
- **Polyfill અને duplicated dependency** — એક જ package ના બે version બે વાર bundle થાય.

## size શા માટે નુકસાન કરે છે

Byte એ નાની સમસ્યા છે; JS ને **parse અને execute** કરવું એ મોટી છે. Browser ને દરેક byte download, પછી parse, compile, અને main thread પર run કરવો પડે છે — અને તે laptop કરતાં mid-range phone પર ઘણું ધીમું છે. ભારે JS interactivity ને વિલંબિત કરે છે અને **INP** તથા **LCP** ને સીધું બગાડે છે.

## આ શા માટે મહત્વનું છે

"બસ library ઉમેરી દો" એ રીતે app ચૂપચાપ ધીમા બને છે. Interviewer જોવા માંગે છે કે તમે *dependency દીઠ ખર્ચ* વિશે વિચારો છો અને bundle ફૂલી જાય તે પહેલાં per-function import, tree shaking, અને code splitting તરફ વળો છો — ખાસ કરીને કારણ કે તમારા user ના phone તમારા dev machine કરતાં ઘણા નબળા છે.

તેને શું ફુલાવે છે

size શા માટે નુકસાન કરે છે

આ શા માટે મહત્વનું છે

સંબંધિત પ્રશ્નો