JavaScript Bundle Size को 70% तक कैसे कम करें
अधिकांश वेब ऐप्स बहुत अधिक कोड भेजते हैं। एक औसत पेज 1.7 MB JavaScript लोड करता है। डेवलपर्स अपने द्वारा भेजे गए कोड का केवल 35% ही उपयोग करते हैं।
छोटे बंडल्स आपकी स्पीड को बेहतर बनाते हैं। इससे Largest Contentful Paint और Time to Interactive में सुधार होता है।
अपने साइज को कम करने के लिए इन 10 स्टेप्स का पालन करें।
Tree shaking अप्रयुक्त (unused) exports को हटा दें। ES Module syntax का उपयोग करें। अपने package.json में
"sideEffects": falseजोड़ें। यह लगभग 18% अप्रयुक्त कोड को हटा देता है।Code splitting अपने कोड को छोटे चंक्स (chunks) में विभाजित करें।
Dynamic imports कोड को तभी लोड करें जब उपयोगकर्ताओं को उसकी आवश्यकता हो। रूट्स (routes) के लिए lazy loading का उपयोग करें। इससे शुरुआती बंडल साइज में 28% तक की कमी आ सकती है।
Image optimization CDN से URL-आधारित ट्रांसफॉर्म का उपयोग करें। बड़े inline SVGs का उपयोग करना बंद करें।
Dependency auditing npx bundle-phobia के साथ पैकेज साइज की जांच करें। • moment.js (67KB) के बजाय date-fns (13KB) का उपयोग करें। • lodash के बजाय lodash-es का उपयोग करें। • साधारण तारीखों के लिए dayjs (2KB) का उपयोग करें।
Minification अतिरिक्त स्पेस और कैरेक्टर्स को हटा दें। अधिकांश बंडलर इसे स्वचालित रूप से करते हैं।
Compression Gzip के बजाय Brotli का उपयोग करें। Brotli फाइलों को छोटा करने में 15% से 25% बेहतर है।
Dead code elimination उस कोड को हटा दें जहाँ कंप्यूटर कभी पहुँच ही नहीं सकता।
Lazy loading components पेज के उन हिस्सों की लोडिंग में देरी करें जो 'below the fold' (स्क्रीन के नीचे) हैं।
Polyfill pruning @babel/preset-env का उपयोग करें। केवल उन्हीं ब्राउज़रों के लिए polyfills भेजें जिनका आपके उपयोगकर्ता वास्तव में उपयोग करते हैं।
ये गलतियाँ करना बंद करें:
- Development builds भेजना। हमेशा
NODE_ENV=productionका उपयोग करें। - पूरी लाइब्रेरी इम्पोर्ट करना। इसके बजाय विशिष्ट (specific) फंक्शन्स इम्पोर्ट करें।
- एनालिसिस को छोड़ना। अपने बड़े चंक्स देखने के लिए
webpack-bundle-analyzerका उपयोग करें। - कंप्रेशन भूल जाना। अनकंप्रेस्ड फाइलें Brotli फाइलों की तुलना में 5x बड़ी होती हैं।
इन लक्ष्यों के साथ अपनी प्रगति को ट्रैक करें:
- कुल JS साइज: 120 KB से कम।
- LCP: 2.5s से कम।
- TTI: 3.5s से कम।
सबसे पहले tree shaking, code splitting और auditing पर ध्यान दें। ये तीन स्टेप्स अक्सर एक ही स्प्रिंट में 50% से 70% तक की कमी लाते हैं।
Source: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g