𝗛𝗼𝘄 𝘁𝗼 𝗥𝗲𝗱𝘂𝗰𝗲 𝗬𝗼𝘂𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗲 𝗦𝗶𝘇𝗲 𝗯𝘆 𝟳𝟬%

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

लहान bundles मुळे तुमचे Core Web Vitals सुधारतात. तुम्हाला जलद Largest Contentful Paint आणि जलद Time to Interactive स्कोअर मिळतात.

तुमची bundle size कमी करण्यासाठी या १० पायऱ्या फॉलो करा:

  • Tree shaking: न वापरलेला कोड काढून टाकते. हे कार्य करण्यासाठी ES Module syntax वापरा.
  • Code splitting: तुमच्या कोडचे लहान तुकड्यांमध्ये विभाजन करते.
  • Dynamic imports: वापरकर्त्याला जेव्हा गरज असेल तेव्हाच कोड लोड करा.
  • Image optimization: मोठ्या libraries ऐवजी URL-आधारित transforms वापरा.
  • Dependency auditing: जड (heavy) libraries च्या जागी हलक्या (light) libraries वापरा.
  • Minification: तुमच्या कोड फाइल्सचा आकार कमी करा.
  • Compression: Gzip पेक्षा चांगल्या रिझल्टसाठी Brotli वापरा.
  • Dead code elimination: पोहोचता न येणारे (unreachable) कोड ब्रँचेस काढून टाका.
  • Lazy loading: नॉन-क्रिटिकल (non-critical) कंपोनंट्स पुढे ढकला (defer).
  • Polyfill pruning: तुमच्या वापरकर्त्यांना आवश्यक असलेले polyfillsच पाठवा.

तीन तंत्रे एकत्र वापरल्यास सर्वोत्तम निकाल मिळतात. Lazy loading, polyfill pruning आणि dead code elimination मुळे तुमचा आकार १५-३०% पर्यंत कमी होऊ शकतो.

तुमच्या dependencies इन्स्टॉल करण्यापूर्वी त्यांचे ऑडिट करा. आकार तपासण्यासाठी npx bundle-phobia वापरा.

उदाहरणार्थ: • date-fns (13KB) हे moment.js (67KB) पेक्षा चांगले आहे. • date formatting साठी dayjs (2KB) हा एक उत्तम पर्याय आहे. • पूर्ण lodash library ऐवजी lodash-es वापरा.

या लक्ष्यांच्या (targets) मदतीने तुमच्या प्रगतीची तपासणी करा: • Total JS size: १२० KB पेक्षा कमी ठेवण्याचे लक्ष्य ठेवा. • LCP: २.५s पेक्षा कमी ठेवण्याचे लक्ष्य ठेवा. • TTI: ३.५s पेक्षा कमी ठेवण्याचे लक्ष्य ठेवा.

या चुका टाळा: • Production builds ऐवजी development builds तैनात करणे. • जेव्हा तुम्हाला फक्त एका फंक्शनची गरज असते, तेव्हा संपूर्ण libraries इम्पोर्ट करणे. • तुमच्या सर्व्हरवर Brotli compression सक्षम करायला विसरणे.

जर तुम्ही tree shaking, code splitting आणि dependency auditing वापरले, तर तुम्ही एका स्प्रिंटमध्ये (sprint) तुमचा payload ५०-७०% पर्यंत कमी करू शकता.

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