code splitting आणि tree shaking म्हणजे काय?

Question

IT Interview Practice · Accepted Answer

दोन्ही वापरकर्ते download करणारे JavaScript कमी करतात. **Code splitting** bundle ला मागणीनुसार load होणाऱ्या chunks मध्ये मोडते; **tree shaking** तुम्ही कधीही न वापरणारा code काढून टाकते. ते परस्परपूरक आहेत: *काय* load होते ते विभागा, प्रत्येक chunk मधील *मृत* code बाहेर shake करा.

## Code splitting

एका मोठ्या bundle ऐवजी, app असे विभागले जाते की प्रत्येक route किंवा भारी feature ही फक्त गरजेच्या वेळी fetch होणारी वेगळी chunk असते:

```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 त्या सीमेवर एक वेगळी file emit करते.

## Tree shaking

bundler ES module `import`/`export` चे statically विश्लेषण करते आणि जे कोणीही संदर्भित करत नाही ते exports टाकून देते. ते फक्त **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 imports वर अवलंबून असते; barrel files किंवा side-effectful modules ते हरवू शकतात.

## Trade-offs

- अति-splitting → अनेक लहान requests आणि waterfalls; संबंधित code एकत्र करा.
- Tree shaking ठिसूळ आहे — चुकीचे चिन्हांकित side effect मृत code ठेवते.

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

हे "कमी JS पाठवा" मागचे दोन लीव्हर आहेत. मुलाखतकारांना पहायचे असते की तुम्हाला माहीत आहे की code splitting *काय केव्हा load होते* हे ठरवते, tree shaking *त्यात मुळी काय आहे* हे ठरवते, आणि tree shaking static ESM वर अवलंबून असते — एक तपशील जो प्रत्यक्ष bundle tune केलेल्या लोकांना फक्त वाचलेल्यांपासून वेगळे करतो.

Code splitting

Tree shaking

Trade-offs

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

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