JavaScript Bundle Size ७०% ने कसा कमी करावा

बहुतेक वेब ॲप्स खूप जास्त कोड पाठवतात. सरासरी पेज १.७ MB JavaScript लोड करते. डेव्हलपर्स त्यांच्याद्वारे पाठवलेल्या कोडपैकी केवळ ३५% कोड वापरतात.

लहान बंडल्समुळे तुमचा वेग सुधारतो. यामुळे Largest Contentful Paint आणि Time to Interactive मध्ये सुधारणा होते.

तुमचा साईज कमी करण्यासाठी या १० स्टेप्स फॉलो करा.

  1. Tree shaking न वापरलेले exports काढून टाका. ES Module syntax वापरा. तुमच्या package.json मध्ये "sideEffects": false जोडा. यामुळे सुमारे १८% न वापरलेला कोड निघून जातो.

  2. Code splitting तुमचा कोड लहान chunks मध्ये विभाजित करा.

  3. Dynamic imports वापरकर्त्यांना जेव्हा गरज असेल तेव्हाच कोड लोड करा. Routes साठी lazy loading वापरा. यामुळे सुरुवातीचा bundle size २८% ने कमी होऊ शकतो.

  4. Image optimization CDN मधून URL-आधारित transforms वापरा. मोठे inline SVGs वापरणे थांबवा.

  5. Dependency auditing npx bundle-phobia वापरून package sizes तपासा. • moment.js (67KB) ऐवजी date-fns (13KB) वापरा. • lodash ऐवजी lodash-es वापरा. • साध्या तारखांसाठी dayjs (2KB) वापरा.

  6. Minification अतिरिक्त स्पेस आणि कॅरेक्टर्स काढून टाका. बहुतेक bundlers हे आपोआप करतात.

  7. Compression Gzip ऐवजी Brotli वापरा. फाइल्स लहान करण्यासाठी Brotli १५% ते २५% अधिक प्रभावी आहे.

  8. Dead code elimination असा कोड काढून टाका ज्यापर्यंत संगणक कधीही पोहोचू शकत नाही.

  9. Lazy loading components पेजचा जो भाग 'below the fold' (स्क्रीनवर लगेच न दिसणारा) आहे, त्याचे लोडिंग उशिरा करा.

  10. Polyfill pruning @babel/preset-env वापरा. तुमचे वापरकर्ते प्रत्यक्षात जे ब्राउझर्स वापरतात, फक्त त्यांच्यासाठीच polyfills पाठवा.

या चुका करणे थांबवा:

  • Development builds पाठवणे. नेहमी NODE_ENV=production वापरा.
  • संपूर्ण लायब्ररीज इम्पोर्ट करणे. त्याऐवजी विशिष्ट फंक्शन्स इम्पोर्ट करा.
  • Analysis वगळणे. तुमचे मोठे chunks पाहण्यासाठी webpack-bundle-analyzer वापरा.
  • Compression विसरणे. अनकम्प्रेस्ड फाइल्स Brotli फाइल्सपेक्षा ५ पट मोठ्या असतात.

या लक्ष्यांसह (targets) तुमच्या प्रगतीचा मागोवा घ्या:

  • Total JS size: १२० KB पेक्षा कमी.
  • LCP: २.५s पेक्षा कमी.
  • TTI: ३.५s पेक्षा कमी.

प्रथम tree shaking, code splitting आणि auditing वर लक्ष केंद्रित करा. या तीन स्टेप्समुळे अनेकदा एका स्प्रिंटमध्ये ५०% ते ७०% पर्यंत घट दिसून येते.

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