𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗲 𝗦𝗶𝘇𝗲 کو 𝟳𝟬% تک کیسے کم کریں

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

چھوٹے بنڈلز آپ کی رفتار کو بہتر بناتے ہیں۔ اس سے آپ کا Largest Contentful Paint اور Time to Interactive بہتر ہوتا ہے۔

سائز کم کرنے کے لیے ان 10 اقدامات پر عمل کریں۔

  1. Tree shaking غیر استعمال شدہ exports کو ہٹا دیں۔ ES Module syntax استعمال کریں۔ اپنی package.json میں "sideEffects": false شامل کریں۔ یہ تقریباً 18% غیر استعمال شدہ کوڈ کو ختم کر دیتا ہے۔

  2. Code splitting اپنے کوڈ کو چھوٹے چنکس (chunks) میں تقسیم کریں۔

  3. Dynamic imports کوڈ صرف تب لوڈ کریں جب صارفین کو اس کی ضرورت ہو۔ Routes کے لیے lazy loading استعمال کریں۔ یہ ابتدائی بنڈل سائز کو 28% تک کم کر سکتا ہے۔

  4. Image optimization CDN سے URL-based transforms استعمال کریں۔ بڑے inline SVGs کا استعمال بند کریں۔

  5. Dependency auditing npx bundle-phobia کے ذریعے پیکیج کے سائز چیک کریں۔ • moment.js (67KB) کے بجائے date-fns (13KB) استعمال کریں۔ • lodash کے بجائے lodash-es استعمال کریں۔ • سادہ تاریخوں کے لیے dayjs (2KB) استعمال کریں۔

  6. Minification اضافی سپیس اور حروف کو ختم کریں۔ زیادہ تر bundlers یہ کام خودکار طریقے سے کرتے ہیں۔

  7. Compression Gzip کے بجائے Brotli استعمال کریں۔ فائلوں کو چھوٹا کرنے میں Brotli، Gzip سے 15% سے 25% بہتر ہے۔

  8. Dead code elimination وہ کوڈ ہٹا دیں جہاں کمپیوٹر کبھی پہنچ ہی نہیں سکتا۔

  9. Lazy loading components صفحے کے ان حصوں کی لوڈنگ میں تاخیر کریں جو اسکرین کے نیچے (below the fold) ہیں۔

  10. Polyfill pruning @babel/preset-env استعمال کریں۔ صرف ان براؤزرز کے لیے polyfills بھیجیں جو آپ کے صارفین حقیقت میں استعمال کرتے ہیں۔

یہ غلطیاں کرنا بند کریں:

  • Development builds بھیجنا۔ ہمیشہ NODE_ENV=production استعمال کریں۔
  • پوری لائبریریز امپورٹ کرنا۔ اس کے بجائے مخصوص فنکشنز امپورٹ کریں۔
  • تجزیہ (analysis) کو نظر انداز کرنا۔ اپنے بڑے چنکس دیکھنے کے لیے webpack-bundle-analyzer استعمال کریں۔
  • کمپریشن کو بھول جانا۔ غیر کمپریس شدہ فائلیں Brotli فائلوں سے 5 گنا بڑی ہوتی ہیں۔

ان اہداف کے ساتھ اپنی پیشرفت پر نظر رکھیں:

  • کل JS سائز: 120 KB سے کم۔
  • LCP: 2.5s سے کم۔
  • TTI: 3.5s سے کم۔

سب سے پہلے tree shaking، code splitting، اور auditing پر توجہ دیں۔ یہ تین اقدامات اکثر ایک اسپرنٹ (sprint) میں 50% سے 70% تک کمی لاتے ہیں۔

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