अपने JavaScript बंडल का साइज़ 70% तक कैसे कम करें

अधिकांश वेब एप्लिकेशन में बहुत अधिक कोड होता है। एक औसत वेब पेज 1.7 MB JavaScript लोड करता है। डेवलपर्स केवल उस कोड का लगभग 35% उपयोग करते हैं जिसे वे डिप्लॉय (deploy) करते हैं।

छोटे बंडल आपके Core Web Vitals में सुधार करते हैं। इससे आपको तेज़ Largest Contentful Paint और तेज़ Time to Interactive स्कोर मिलते हैं।

अपने बंडल साइज़ को कम करने के लिए इन 10 चरणों का पालन करें:

  • Tree shaking: अप्रयुक्त (unused) कोड को हटाता है। इसे काम करने के लिए ES Module सिंटैक्स का उपयोग करें।
  • Code splitting: आपके कोड को छोटे टुकड़ों में विभाजित करता है।
  • Dynamic imports: कोड को केवल तभी लोड करें जब उपयोगकर्ता को इसकी आवश्यकता हो।
  • Image optimization: बड़ी लाइब्रेरी के बजाय URL-आधारित ट्रांसफ़ॉर्म का उपयोग करें।
  • Dependency auditing: भारी लाइब्रेरी को हल्की लाइब्रेरी से बदलें।
  • Minification: अपनी कोड फ़ाइलों को छोटा करें।
  • Compression: Gzip की तुलना में बेहतर परिणामों के लिए Brotli का उपयोग करें।
  • Dead code elimination: अप्राप्य (unreachable) कोड शाखाओं को हटा दें।
  • Lazy loading: गैर-महत्वपूर्ण (non-critical) कंपोनेंट्स को टाल दें (defer)।
  • 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 का उपयोग करें।

इन लक्ष्यों के साथ अपनी प्रगति की जाँच करें: • कुल JS साइज़: 120 KB से कम रखने का लक्ष्य रखें। • LCP: 2.5s से कम रखने का लक्ष्य रखें। • TTI: 3.5s से कम रखने का लक्ष्य रखें।

इन गलतियों से बचें: • प्रोडक्शन बिल्ड के बजाय डेवलपमेंट बिल्ड डिप्लॉय करना। • पूरी लाइब्रेरी इम्पोर्ट करना जब आपको केवल एक फंक्शन की आवश्यकता हो। • अपने सर्वर पर Brotli compression सक्षम करना भूल जाना।

यदि आप tree shaking, code splitting, और dependency auditing का उपयोग करते हैं, तो आप एक स्प्रिंट (sprint) में अपने पेलोड (payload) को 50-70% तक कम कर सकते हैं।

स्रोत: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g