اپنے JavaScript bundle size کو 70% تک کیسے کم کریں

زیادہ تر ویب ایپلی کیشنز میں ضرورت سے زیادہ کوڈ بھیجا جاتا ہے۔ ایک اوسط ویب پیج 1.7 MB JavaScript لوڈ کرتا ہے۔ ڈویلپرز صرف اپنے ڈیپلائے کیے گئے کوڈ کا تقریباً 35% استعمال کرتے ہیں۔

چھوٹے bundles آپ کے Core Web Vitals کو بہتر بناتے ہیں۔ اس سے آپ کو تیز تر Largest Contentful Paint اور تیز تر Time to Interactive اسکورز حاصل ہوتے ہیں۔

اپنے bundle size کو کم کرنے کے لیے ان 10 اقدامات پر عمل کریں:

  • Tree shaking: غیر استعمال شدہ کوڈ کو ہٹاتا ہے۔ اسے کام کرنے کے لیے ES Module syntax استعمال کریں۔
  • Code splitting: آپ کے کوڈ کو چھوٹے حصوں میں تقسیم کرتا ہے۔
  • Dynamic imports: کوڈ کو صرف اس وقت لوڈ کریں جب صارف کو اس کی ضرورت ہو۔
  • Image optimization: بڑی لائبریریز کے بجائے URL-based transforms استعمال کریں۔
  • Dependency auditing: بھاری لائبریریز کو ہلکی لائبریریز سے بدل دیں۔
  • Minification: اپنی کوڈ فائلوں کو چھوٹا کریں۔
  • Compression: Gzip کے مقابلے میں بہتر نتائج کے لیے Brotli استعمال کریں۔
  • Dead code elimination: ناقابل رسائی کوڈ برانچز کو ختم کریں۔
  • Lazy loading: غیر ضروری (non-critical) اجزاء کو مؤخر کریں۔
  • Polyfill pruning: صرف وہی polyfills بھیجیں جن کے آپ کے صارفین کو ضرورت ہو۔

تین تکنیکیں مل کر بہترین کام کرتی ہیں۔ Lazy loading، polyfill pruning، اور dead code elimination آپ کے سائز کو 15-30% تک کم کر سکتے ہیں۔

اپنی dependencies کو انسٹال کرنے سے پہلے ان کا آڈٹ کریں۔ سائز چیک کرنے کے لیے npx bundle-phobia استعمال کریں۔

مثال کے طور پر: • date-fns (13KB)، moment.js (67KB) سے بہتر ہے۔ • date formatting کے لیے dayjs (2KB) ایک بہترین متبادل ہے۔ • مکمل lodash لائبریری کے بجائے lodash-es استعمال کریں۔

ان اہداف کے ساتھ اپنی پیشرفت چیک کریں: • Total JS size: 120 KB سے کم کا ہدف رکھیں۔ • LCP: 2.5s سے کم کا ہدف رکھیں۔ • TTI: 3.5s سے کم کا ہدف رکھیں۔

ان غلطیوں سے بچیں: • Production builds کے بجائے development builds ڈیپلائے کرنا۔ • پوری لائبریری امپورٹ کرنا جب آپ کو صرف ایک فنکشن کی ضرورت ہو۔ • اپنے سرور پر Brotli compression کو فعال کرنا بھول جانا۔

اگر آپ tree shaking، code splitting، اور dependency auditing استعمال کرتے ہیں، تو آپ ایک اسپرنٹ میں اپنے payload کو 50-70% تک کم کر سکتے ہیں۔

ماخذ: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g