JS bundle कशामुळे वाढते, आणि आकार का हानीकारक असतो?

Question

IT Interview Practice · Accepted Answer

**bundle** म्हणजे तुमचे build tool package करून browser ला पाठवणारे JavaScript. ते मुख्यतः **dependencies**, **duplicated code**, आणि **page ला अजून गरज नसलेला code पाठवणे** यामुळे वाढते.

## ते काय फुगवते

- **भारी libraries** — एखादी date किंवा icon library शेकडो KB जोडू शकते. एका function साठी संपूर्ण `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 होते.
- **Polyfills आणि duplicated dependencies** — एकाच package च्या दोन आवृत्त्या दोनदा bundle होतात.

## आकार का हानीकारक असतो

Bytes ही लहान समस्या आहे; JS **parse आणि execute** करणे ही मोठी. browser ला प्रत्येक byte download, नंतर parse, compile, आणि main thread वर चालवावा लागतो — आणि हे laptop पेक्षा mid-range phone वर खूपच धीमे असते. भारी JS interactivity ला विलंबित करते आणि थेट **INP** व **LCP** बिघडवते.

## हे का महत्त्वाचे आहे

"फक्त library जोडा" अशा प्रकारे apps शांतपणे धीमी होतात. मुलाखतकारांना पहायचे असते की तुम्ही *प्रति dependency खर्च* याचा विचार करता आणि bundle फुगण्याआधी per-function imports, tree shaking, आणि code splitting कडे वळता — विशेषतः कारण तुमच्या वापरकर्त्यांचे phones तुमच्या dev machine पेक्षा खूपच कमकुवत आहेत.

ते काय फुगवते

आकार का हानीकारक असतो

हे का महत्त्वाचे आहे

संबंधित प्रश्न