code splitting ও tree shaking কী?

Question

IT Interview Practice · Accepted Answer

দুটিই ব্যবহারকারীরা যে JavaScript download করে তা কমায়। **Code splitting** bundle-কে চাহিদামাফিক load হওয়া chunk-এ ভাগ করে; **tree shaking** আপনি কখনো ব্যবহার করেন না এমন code সরিয়ে দেয়। এরা পরিপূরক: *কী* load হয় তা split করুন, প্রতিটি chunk-এর ভিতরের *মৃত* code shake out করুন।

## Code splitting

একটি বড় bundle-এর বদলে, app এমনভাবে ভাগ করা হয় যাতে প্রতিটি 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 সেই সীমানায় একটি আলাদা file নির্গত করে।

## Tree shaking

Bundler statically ES module `import`/`export` বিশ্লেষণ করে এবং যে export কিছুই reference করে না তা বাদ দেয়। এটি কেবল **ESM** (static, বিশ্লেষণযোগ্য)-এর সাথে কাজ করে — 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-off

- অতি-splitting → অনেক ছোট request ও waterfall; সম্পর্কিত code একসাথে group করুন।
- Tree shaking ভঙ্গুর — একটি ভুল-চিহ্নিত side effect মৃত code রেখে দেয়।

## এটি কেন গুরুত্বপূর্ণ

এগুলো "কম JS পাঠাও"-এর পেছনের দুটি লিভার। ইন্টারভিউয়াররা চান আপনি জানুন code splitting নির্ধারণ করে *কখন কী load হয়*, tree shaking নির্ধারণ করে *এতে আদৌ কী থাকে*, এবং tree shaking static ESM-এর উপর নির্ভর করে — একটি বিশদ যা bundle প্রকৃতপক্ষে tune করা মানুষদের কেবল এ বিষয়ে পড়া মানুষদের থেকে আলাদা করে।

Code splitting

Tree shaking

Trade-off

এটি কেন গুরুত্বপূর্ণ

সম্পর্কিত প্রশ্ন