JavaScript Bundle Size 70% എങ്ങനെ കുറയ്ക്കാം
മിക്ക വെബ് ആപ്പുകളും അമിതമായ അളവിൽ കോഡ് അയക്കുന്നുണ്ട്. ശരാശരി ഒരു പേജ് 1.7 MB JavaScript ലോഡ് ചെയ്യുന്നു. ഡെവലപ്പർമാർ അവർ അയക്കുന്ന കോഡിൽ 35% മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ.
ചെറിയ ബണ്ടിലുകൾ നിങ്ങളുടെ വേഗത വർദ്ധിപ്പിക്കുന്നു. ഇത് Largest Contentful Paint, Time to Interactive എന്നിവ മെച്ചപ്പെടുത്തുന്നു.
സൈസ് കുറയ്ക്കുന്നതിനായി ഈ 10 ഘട്ടങ്ങൾ പിന്തുടരുക.
Tree shaking ഉപയോഗിക്കാത്ത exports ഒഴിവാക്കുക. ES Module സിന്റാക്സ് ഉപയോഗിക്കുക. നിങ്ങളുടെ 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 ഉപയോഗിക്കുക.
- മുഴുവൻ ലൈബ്രറികളും ഇംപോർട്ട് ചെയ്യുന്നത് ഒഴിവാക്കുക. പകരം ആവശ്യമായ ഫംഗ്ഷനുകൾ മാത്രം ഇംപോർട്ട് ചെയ്യുക.
- അനാലിസിസ് ഒഴിവാക്കരുത്. നിങ്ങളുടെ വലിയ ചങ്ക്സ് (chunks) കാണാൻ webpack-bundle-analyzer ഉപയോഗിക്കുക.
- കംപ്രഷൻ മറന്നുപോകരുത്. കംപ്രസ് ചെയ്യാത്ത ഫയലുകൾ Brotli ഫയലുകളേക്കാൾ 5 മടങ്ങ് വലുതാണ്.
ഈ ലക്ഷ്യങ്ങളിലൂടെ നിങ്ങളുടെ പുരോഗതി വിലയിരുത്തുക:
- ആകെ JS സൈസ്: 120 KB-യിൽ താഴെ.
- LCP: 2.5s-ൽ താഴെ.
- TTI: 3.5s-ൽ താഴെ.
ആദ്യം tree shaking, code splitting, auditing എന്നിവയിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക. ഈ മൂന്ന് ഘട്ടങ്ങൾ പലപ്പോഴും ഒരു സ്പ്രിന്റിനുള്ളിൽ (sprint) 50% മുതൽ 70% വരെ കുറവ് നൽകുന്നു.
സ്രോതസ്സ്: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g