Code splitting మరియు tree shaking అంటే ఏమిటి?

Question

IT Interview Practice · Accepted Answer

రెండూ user లు download చేసే JavaScript ను తగ్గిస్తాయి. **Code splitting** bundle ను demand మేరకు load అయ్యే chunk లుగా విభజిస్తుంది; **tree shaking** మీరు ఎప్పటికీ వాడని code ను తొలగిస్తుంది. అవి పరస్పర పూరకాలు: *ఏది* load అవుతుందో split చేయండి, ప్రతి chunk లోపల *dead* code ను shake out చేయండి.

## Code splitting

ఒక పెద్ద bundle కు బదులుగా, ప్రతి route లేదా భారీ feature అవసరమైనప్పుడు మాత్రమే fetch అయ్యే వేరే chunk గా app split అవుతుంది:

```js
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk

// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // fetched on click
  openEditor();
};
```

Dynamic `import()` అనేది signal — bundler ఆ boundary వద్ద వేరే file ను emit చేస్తుంది.

## Tree shaking

Bundler ES module `import`/`export` ను static గా విశ్లేషించి ఏదీ reference చేయని export లను drop చేస్తుంది. ఇది **ESM** (static, analyzable) తో మాత్రమే పనిచేస్తుంది — CommonJS `require` తో కాదు:

```js
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
```

ఇది `package.json` లో `"sideEffects": false` మరియు per-function import లపై ఆధారపడుతుంది; barrel file లు లేదా side-effectful module లు దాన్ని ఓడించగలవు.

## Trade-offs

- అతిగా-splitting → అనేక చిన్న request లు మరియు waterfall లు; సంబంధిత code ను group చేయండి.
- Tree shaking పెళుసుగా ఉంటుంది — తప్పుగా-మార్క్ చేయబడిన ఒక side effect dead code ను ఉంచుతుంది.

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

ఇవి "తక్కువ JS ship చేయడం" వెనుక ఉన్న రెండు lever లు. Code splitting *ఏది ఎప్పుడు load అవుతుందో* నిర్ణయిస్తుందని, tree shaking *అందులో అసలు ఏమి ఉందో* నిర్ణయిస్తుందని, మరియు tree shaking static ESM పై ఆధారపడుతుందని మీకు తెలియాలని interviewer లు కోరుకుంటారు — నిజంగా ఒక bundle ను tune చేసినవారిని దాని గురించి కేవలం చదివినవారి నుండి వేరు చేసే వివరం.

Code splitting

Tree shaking

Trade-offs

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

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