code splitting અને tree shaking શું છે?

Question

IT Interview Practice · Accepted Answer

બંને user જે JavaScript download કરે તેને કાપે છે. **Code splitting** bundle ને માંગ પર load થતા chunk માં તોડે છે; **tree shaking** તમે ક્યારેય ન વાપરો તે code દૂર કરે છે. તેઓ પૂરક છે: *શું* load થાય તે split કરો, દરેક chunk ની અંદરનો *dead* code shake કરો.

## Code splitting

એક મોટા bundle ને બદલે, app ને એવી રીતે split કરાય છે કે દરેક route કે ભારે feature એક અલગ chunk હોય જે માત્ર જરૂર પડે ત્યારે fetch થાય:

```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()` એ સંકેત છે — bundler તે boundary પર એક અલગ file emit કરે છે.

## Tree shaking

Bundler ES module `import`/`export` નું statically વિશ્લેષણ કરે છે અને જે export ને કંઈ reference ન કરે તેને છોડી દે છે. તે માત્ર **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

- વધુ પડતું split કરવું → ઘણી નાની request અને waterfall; સંબંધિત code ને જૂથ કરો.
- Tree shaking બરડ છે — ખોટી રીતે marked side effect dead code ને રાખી મૂકે છે.

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

આ "ઓછું JS મોકલો" પાછળના બે lever છે. Interviewer ઇચ્છે છે કે તમે જાણો કે code splitting *ક્યારે શું load થાય* તે નક્કી કરે છે, tree shaking *તેમાં શું છે જ* તે નક્કી કરે છે, અને tree shaking static ESM પર આધાર રાખે છે — એક વિગત જે ખરેખર bundle tune કરી ચૂકેલા લોકોને માત્ર તેના વિશે વાંચી ચૂકેલાથી અલગ પાડે છે.

Code splitting

Tree shaking

Trade-offs

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

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