کون سی چیز JS bundle کو بڑھاتی ہے، اور size کیوں نقصان دہ ہے؟

Question

IT Interview Practice · Accepted Answer

ایک **bundle** وہ JavaScript ہے جسے آپ کا build tool پیک کر کے browser تک بھیجتا ہے۔ یہ بنیادی طور پر **dependencies**، **duplicated code**، اور **ایسا code بھیجنے سے بڑھتا ہے جس کی page کو ابھی ضرورت نہیں**۔

## اسے کیا چیز پھلاتی ہے

- **بھاری libraries** — ایک ہی date یا icon library سینکڑوں KB بڑھا سکتی ہے۔ ایک function کے لیے پورا `lodash` import کرنا سب کچھ کھینچ لاتا ہے۔
- **جو استعمال کریں اس کے بجائے سب کچھ import کرنا**:

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **کوئی code splitting نہیں** — پوری app (ہر route، ہر modal) ایک ہی file میں bundle ہو کر پیشگی load ہوتی ہے۔
- **Polyfills اور duplicated dependencies** — ایک ہی package کے دو versions دو بار bundle ہو جاتے ہیں۔

## Size کیوں نقصان دہ ہے

Bytes چھوٹا مسئلہ ہیں؛ JS کا **parse اور execute** ہونا بڑا مسئلہ ہے۔ browser کو ہر byte کو download، پھر parse، compile، اور main thread پر چلانا پڑتا ہے — اور یہ laptop کے مقابلے میں کسی درمیانے درجے کے phone پر کہیں زیادہ سست ہوتا ہے۔ بھاری JS interactivity میں تاخیر کرتا ہے اور براہِ راست **INP** اور **LCP** کو بگاڑتا ہے۔

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

"بس library ڈال دو" وہ طریقہ ہے جس سے apps خاموشی سے سست ہو جاتی ہیں۔ Interviewers دیکھنا چاہتے ہیں کہ آپ *cost per dependency* کے بارے میں سوچتے ہیں اور bundle کے پھولنے سے پہلے per-function imports، tree shaking، اور code splitting کی طرف بڑھتے ہیں — خاص طور پر اس لیے کہ آپ کے صارفین کے phones آپ کی dev machine سے کہیں کمزور ہیں۔

اسے کیا چیز پھلاتی ہے

Size کیوں نقصان دہ ہے

یہ کیوں اہم ہے

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