code splitting اور tree shaking کیا ہیں؟

Question

IT Interview Practice · Accepted Answer

دونوں اُس JavaScript کو کم کرتے ہیں جو صارفین download کرتے ہیں۔ Code splitting bundle کو ایسے chunks میں توڑتا ہے جو طلب پر load ہوتے ہیں؛ tree shaking ایسا code ہٹا دیتا ہے جو آپ کبھی استعمال نہیں کرتے۔ یہ باہم تکمیلی ہیں: کیا load ہوتا ہے اسے split کریں، اور ہر chunk کے اندر کے مردہ code کو shake کر نکالیں۔

Code splitting

ایک بڑے bundle کے بجائے، app کو یوں split کیا جاتا ہے کہ ہر route یا بھاری feature ایک الگ chunk ہو جو صرف ضرورت پر fetch ہو:

## 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 اُس حد پر ایک الگ file بناتا ہے۔

## Tree shaking

bundler ES module `import`/`export` کا statically تجزیہ کرتا ہے اور ایسے exports گرا دیتا ہے جن کا کوئی حوالہ نہیں دیتا۔ یہ صرف **ESM** (static، قابلِ تجزیہ) کے ساتھ کام کرتا ہے — 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-effect والے modules اسے ناکام کر سکتے ہیں۔

## فوائد و نقصانات

- ضرورت سے زیادہ splitting → بہت سی چھوٹی requests اور waterfalls؛ متعلقہ code کو گروپ کریں۔
- Tree shaking نازک ہے — ایک غلط mark شدہ side effect مردہ code کو رکھ لیتا ہے۔

## یہ کیوں اہم ہے

یہ "کم JS بھیجو" کے پیچھے دو levers ہیں۔ Interviewers چاہتے ہیں کہ آپ جانیں کہ code splitting طے کرتا ہے کہ *کب کیا load ہوتا ہے*، tree shaking طے کرتا ہے کہ *اس میں سرے سے کیا ہے*، اور یہ کہ tree shaking static ESM پر انحصار کرتا ہے — ایک تفصیل جو اُن لوگوں کو الگ کرتی ہے جنہوں نے واقعی bundle tune کیا ہے اُن سے جنہوں نے صرف اس کے بارے میں پڑھا ہے۔

Code splitting

Tree shaking

فوائد و نقصانات

یہ کیوں اہم ہے

متعلقہ سوالات