உங்கள் JavaScript Bundle அளவை 70% எவ்வாறு குறைப்பது

பெரும்பாலான இணைய பயன்பாடுகள் (web applications) அதிகப்படியான குறியீடுகளைக் (code) கொண்டுள்ளன. ஒரு சராசரி இணையப் பக்கம் 1.7 MB JavaScript-ஐ ஏற்றுகிறது. டெவலப்பர்கள் தாங்கள் வெளியிடும் குறியீட்டில் சுமார் 35% மட்டுமே பயன்படுத்துகின்றனர்.

சிறிய பண்டல்கள் (bundles) உங்கள் Core Web Vitals-ஐ மேம்படுத்தும். இதன் மூலம் வேகமான Largest Contentful Paint மற்றும் வேகமான Time to Interactive மதிப்பெண்களைப் பெறலாம்.

உங்கள் பண்டல் அளவைக் குறைக்க இந்த 10 படிகளைப் பின்பற்றவும்:

  • Tree shaking: பயன்படுத்தப்படாத குறியீடுகளை நீக்குகிறது. இது செயல்பட ES Module syntax-ஐப் பயன்படுத்தவும்.
  • Code splitting: உங்கள் குறியீட்டைச் சிறிய பகுதிகளாகப் பிரிக்கிறது.
  • Dynamic imports: பயனர் தேவைப்படும்போது மட்டும் குறியீட்டை ஏற்றவும்.
  • Image optimization: பெரிய லைப்ரரிகளுக்குப் பதிலாக URL-அடிப்படையிலான மாற்றங்களைப் (transforms) பயன்படுத்தவும்.
  • Dependency auditing: கனமான லைப்ரரிகளுக்குப் பதிலாக இலகுவானவற்றை மாற்றவும்.
  • Minification: உங்கள் குறியீடு கோப்புகளைச் சுருக்கவும்.
  • Compression: Gzip-ஐ விட சிறந்த முடிவுகளுக்கு Brotli-ஐப் பயன்படுத்தவும்.
  • Dead code elimination: சென்றடைய முடியாத குறியீடு கிளைகளை (code branches) நீக்கவும்.
  • Lazy loading: முக்கியமானதல்லாத கூறுகளைத் (non-critical components) தள்ளிவைக்கவும்.
  • Polyfill pruning: உங்கள் பயனர்களுக்குத் தேவையான polyfills-களை மட்டும் அனுப்பவும்.

மூன்று நுட்பங்கள் இணைந்து செயல்படும்போது சிறப்பாகச் செயல்படும். Lazy loading, polyfill pruning மற்றும் dead code elimination ஆகியவை உங்கள் அளவை 15-30% வரை குறைக்கக்கூடும்.

உங்கள் dependencies-களை நிறுவுவதற்கு முன் அவற்றைச் சரிபார்க்கவும் (Audit). அளவுகளைச் சரிபார்க்க npx bundle-phobia-ஐப் பயன்படுத்தவும்.

உதாரணமாக: • date-fns (13KB) என்பது moment.js (67KB)-ஐ விடச் சிறந்தது. • தேதி வடிவமைப்பிற்கு (date formatting) dayjs (2KB) ஒரு சிறந்த மாற்றாகும். • முழுமையான lodash library-க்கு பதிலாக lodash-es-ஐப் பயன்படுத்தவும்.

இந்த இலக்குகளுடன் உங்கள் முன்னேற்றத்தைச் சரிபார்க்கவும்: • மொத்த JS அளவு: 120 KB-க்குக் குறைவாக இருக்க இலக்கு வைக்கவும். • LCP: 2.5s-க்குக் குறைவாக இருக்க இலக்கு வைக்கவும். • TTI: 3.5s-க்குக் குறைவாக இருக்க இலக்கு வைக்கவும்.

இந்தத் தவறுகளைத் தவிர்க்கவும்: • Production builds-களுக்குப் பதிலாக development builds-களைப் பயன்படுத்துதல். • ஒரு function மட்டும் தேவைப்படும்போது முழுமையான லைப்ரரிகளையும் இறக்குமதி செய்தல். • உங்கள் சர்வரில் 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