ఒక JS bundle ఎందుకు పెరుగుతుంది, మరియు size ఎందుకు హాని చేస్తుంది?

Question

IT Interview Practice · Accepted Answer

ఒక **bundle** అనేది మీ build tool package చేసి browser కు ship చేసే JavaScript. ఇది ప్రధానంగా **dependency లు**, **duplicated code**, మరియు **page కు ఇంకా అవసరం లేని code ను ship చేయడం** నుండి పెరుగుతుంది.

## దాన్ని ఏది ఉబ్బిస్తుంది

- **భారీ library లు** — ఒక 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) ముందుగా load అయ్యే ఒకే file లోకి bundle అవుతుంది.
- **Polyfill లు మరియు duplicated dependency లు** — ఒకే package యొక్క రెండు version లు రెండుసార్లు bundle అవుతాయి.

## Size ఎందుకు హాని చేస్తుంది

Byte లు చిన్న సమస్య; JS ను **parse చేయడం మరియు execute చేయడం** పెద్దది. Browser download చేసి, తర్వాత ప్రతి byte ను main thread పై parse, compile, మరియు run చేయాలి — మరియు అది laptop కంటే mid-range phone పై చాలా నెమ్మదిగా ఉంటుంది. భారీ JS interactivity ను ఆలస్యం చేస్తుంది మరియు **INP** మరియు **LCP** ను నేరుగా అధ్వాన్నం చేస్తుంది.

## ఇది ఎందుకు ముఖ్యం

"కేవలం library ను జోడించు" అనేది app లు నిశ్శబ్దంగా నెమ్మదిగా అయ్యే విధానం. bundle ఉబ్బకముందే మీరు *dependency కు cost* గురించి ఆలోచించి per-function import లు, tree shaking, మరియు code splitting వైపు reach అవడాన్ని interviewer లు చూడాలనుకుంటారు — ప్రత్యేకించి మీ user ల phone లు మీ dev machine కంటే చాలా బలహీనంగా ఉన్నందున.

దాన్ని ఏది ఉబ్బిస్తుంది

Size ఎందుకు హాని చేస్తుంది

ఇది ఎందుకు ముఖ్యం

సంబంధిత ప్రశ్నలు