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

చాలా వెబ్ యాప్‌లు అవసరానికి మించి కోడ్‌ను పంపిస్తున్నాయి. సగటు పేజీ 1.7 MB JavaScriptను లోడ్ చేస్తుంది. డెవలపర్లు తాము పంపే కోడ్‌లో కేవలం 35% మాత్రమే ఉపయోగిస్తారు.

చిన్న బండిల్స్ మీ వేగాన్ని పెంచుతాయి. ఇవి Largest Contentful Paint మరియు Time to Interactive మెరుగుపరుస్తాయి.

మీ సైజును తగ్గించడానికి ఈ 10 దశలను అనుసరించండి.

  1. Tree shaking ఉపయోగించని ఎగుమతులను (unused exports) తొలగించండి. ES Module సింటాక్స్‌ను ఉపయోగించండి. మీ package.jsonలో "sideEffects": false అని జోడించండి. ఇది సుమారు 18% ఉపయోగించని కోడ్‌ను తొలగిస్తుంది.

  2. Code splitting మీ కోడ్‌ను చిన్న చిన్న భాగాలుగా (chunks) విభజించండి.

  3. Dynamic imports వినియోగదారులకు అవసరమైనప్పుడు మాత్రమే కోడ్‌ను లోడ్ చేయండి. రూట్‌ల (routes) కోసం lazy loading ఉపయోగించండి. ఇది ప్రారంభ బండిల్ సైజును 28% వరకు తగ్గించగలదు.

  4. Image optimization CDN నుండి URL-ఆధారిత ట్రాన్స్‌ఫార్మ్‌లను ఉపయోగించండి. పెద్ద ఇన్‌లైన్ (inline) SVGs ఉపయోగించడం ఆపండి.

  5. Dependency auditing npx bundle-phobiaతో ప్యాకేజీ సైజులను తనిఖీ చేయండి. • moment.js (67KB) కి బదులుగా date-fns (13KB) ఉపయోగించండి. • lodash కి బదులుగా lodash-es ఉపయోగించండి. • సాధారణ తేదీల కోసం dayjs (2KB) ఉపయోగించండి.

  6. Minification అదనపు ఖాళీలు (spaces) మరియు అక్షరాలను తొలగించండి. చాలా బండిలర్లు (bundlers) దీనిని ఆటోమేటిక్‌గా చేస్తారు.

  7. Compression Gzip కి బదులుగా Brotli ఉపయోగించండి. ఫైళ్లను కుదించడంలో (shrinking) Brotli, Gzip కంటే 15% నుండి 25% మెరుగ్గా ఉంటుంది.

  8. Dead code elimination కంప్యూటర్ ఎప్పటికీ చేరుకోలేని (reach చేయలేని) కోడ్‌ను తొలగించండి.

  9. Lazy loading components పేజీలో 'below the fold' (స్క్రీన్‌పై కనిపించని) భాగాలను లోడ్ చేయడం ఆలస్యం చేయండి.

  10. Polyfill pruning @babel/preset-env ఉపయోగించండి. మీ వినియోగదారులు నిజంగా ఉపయోగించే బ్రౌజర్‌ల కోసం మాత్రమే polyfills పంపండి.

ఈ తప్పులు చేయడం ఆపండి:

  • డెవలప్‌మెంట్ బిల్డ్‌లను (development builds) పంపడం. ఎల్లప్పుడూ NODE_ENV=production ఉపయోగించండి.
  • మొత్తం లైబ్రరీలను ఇంపోర్ట్ చేయడం. దానికి బదులుగా నిర్దిష్ట ఫంక్షన్‌లను (specific functions) మాత్రమే ఇంపోర్ట్ చేయండి.
  • అనాలిసిస్‌ను వదిలేయడం. మీ పెద్ద చంక్స్‌ను (large chunks) చూడటానికి 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