JavaScript Bundling کی وضاحت
آپ React یا Angular ایپس بہت سی فائلوں کا استعمال کرتے ہوئے لکھتے ہیں۔ آپ components، services، اور libraries استعمال کرتے ہیں۔
براؤزرز کے لیے بہت زیادہ فائلوں کو سنبھالنا مشکل ہوتا ہے۔ 200 فائلوں کو لوڈ کرنے کا مطلب ہے 200 نیٹ ورک ریکویسٹس (network requests)۔ اس سے آپ کی ایپ سست ہو جاتی ہے۔
Bundlers اس مسئلے کو حل کرتے ہیں۔ وہ آپ کے کوڈ اور imports کو لیتے ہیں اور انہیں ایک یا چند چھوٹی فائلوں میں یکجا کر دیتے ہیں۔ اس سے لوڈنگ کا عمل موثر ہو جاتا ہے۔
جدید bundlers صرف فائلوں کو یکجا کرنے سے کہیں زیادہ کام کرتے ہیں۔ وہ یہ کام انجام دیتے ہیں:
- Minification: یہ خالی جگہوں (spaces) اور کمنٹس (comments) کو ختم کر دیتے ہیں۔ جگہ بچانے کے لیے یہ variable names کو مختصر کر دیتے ہیں۔
- Tree shaking: یہ اس کوڈ کو نکال دیتے ہیں جسے آپ استعمال نہیں کرتے۔
- Code splitting: یہ کوڈ کو چھوٹے حصوں (chunks) میں تقسیم کر دیتے ہیں۔ صارفین صرف وہی لوڈ کرتے ہیں جس کی انہیں ضرورت ہوتی ہے۔
چھوٹی فائلیں ایپس کو تیز بناتی ہیں۔
دو اہم ٹولز موجود ہیں: Webpack اور Vite۔
Webpack آپ کی پوری ایپ کو سروس کرنے سے پہلے bundle کرتا ہے۔ یہ طاقتور اور لچکدار ہے۔ بڑے پروجیکٹس میں یہ سست محسوس ہو سکتا ہے کیونکہ یہ تبدیلیوں کے دوران ہر چیز کو دوبارہ bundle کرتا ہے۔
Vite ایک جدید انتخاب ہے۔ یہ development کے دوران native ES modules کا استعمال کرتے ہوئے براہ راست فائلیں فراہم کرتا ہے۔ یہ صرف اس فائل کو اپ ڈیٹ کرتا ہے جسے آپ تبدیل کرتے ہیں۔ اس سے اپ ڈیٹس فوری ہو جاتی ہیں۔
موازنہ:
Webpack:
- Dev speed: سست
- Config: پیچیدہ
- Best for: بڑے پرانے (legacy) پروجیکٹس
Vite:
- Dev speed: تیز
- Config: سادہ
- Best for: نئے جدید پروجیکٹس
نئے پروجیکٹس کے لیے Vite استعمال کریں۔
ہر bundler تین مراحل پر عمل کرتا ہے:
- Build a dependency graph: Bundler یہ نقشہ تیار کرتا ہے کہ فائلیں ایک دوسرے سے کیسے جڑی ہوئی ہیں۔
- Transform code: یہ TypeScript یا JSX کو سادہ JavaScript میں تبدیل کرتا ہے۔
- Output the bundle: یہ ڈیپلائمنٹ (deployment) کے لیے حتمی فائلیں ایک فولڈر میں لکھتا ہے۔
ان تجاویز کے ساتھ اپنے bundle کو ہلکا پھلکا (lean) رکھیں:
- Lazy loading: components کو صرف اس وقت لوڈ کریں جب صارف کو ان کی ضرورت ہو۔
- Specific imports: پوری لائبریریز امپورٹ نہ کریں۔ صرف وہی مخصوص فنکشنز امپورٹ کریں جنہیں آپ استعمال کرتے ہیں۔
- Analyze your bundle: یہ دیکھنے کے لیے ٹولز استعمال کریں کہ کون سی فائلیں سب سے زیادہ جگہ گھیر رہی ہیں۔
- Use production builds: ہمیشہ development builds کے بجائے production builds کو ڈیپلائ کریں۔
Bundlers کم اور چھوٹی فائلیں فراہم کر کے آپ کی ایپس کو تیز بناتے ہیں۔
Source: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p