𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
പല ഫയലുകൾ ഉപയോഗിച്ചാണ് നിങ്ങൾ React അല്ലെങ്കിൽ Angular ആപ്പുകൾ നിർമ്മിക്കുന്നത്. നിങ്ങൾ കോംപോണന്റുകൾ (components), സർവീസുകൾ (services), ലൈബ്രറികൾ (libraries) എന്നിവ ഉപയോഗിക്കുന്നു.
ധാരാളം ഫയലുകൾ കൈകാര്യം ചെയ്യാൻ ബ്രൗസറുകൾക്ക് പ്രയാസമാണ്. 200 ഫയലുകൾ ലോഡ് ചെയ്യുക എന്നാൽ 200 നെറ്റ്വർക്ക് റിക്വസ്റ്റുകൾ (network requests) എന്നാണ് അർത്ഥം. ഇത് നിങ്ങളുടെ ആപ്പിന്റെ വേഗത കുറയ്ക്കുന്നു.
ബണ്ട്ലറുകൾ (Bundlers) ഈ പ്രശ്നം പരിഹരിക്കുന്നു. അവ നിങ്ങളുടെ കോഡും ഇംപോർട്ടുകളും (imports) എടുത്ത് അവയെ ഒന്നോ അല്ലെങ്കിൽ കുറച്ച് ചെറിയ ഫയലുകളോ ആയി സംയോജിപ്പിക്കുന്നു. ഇത് ലോഡിംഗ് കൂടുതൽ കാര്യക്ഷമമാക്കുന്നു.
ആധുനിക ബണ്ട്ലറുകൾ ഫയലുകൾ സംയോജിപ്പിക്കുന്നതിനേക്കാൾ കൂടുതൽ കാര്യങ്ങൾ ചെയ്യുന്നു. അവ താഴെ പറയുന്ന ജോലികൾ ചെയ്യുന്നു:
- Minification: അവ സ്പേസുകളും കമന്റുകളും നീക്കം ചെയ്യുന്നു. സ്ഥലം ലാഭിക്കുന്നതിനായി അവ വേരിയബിൾ പേരുകൾ ചുരുക്കുന്നു.
- Tree shaking: നിങ്ങൾ ഉപയോഗിക്കാത്ത കോഡുകൾ അവ നീക്കം ചെയ്യുന്നു.
- Code splitting: അവ കോഡിനെ ചെറിയ ഭാഗങ്ങളായി (chunks) തിരിക്കുന്നു. ഉപയോക്താക്കൾക്ക് ആവശ്യമുള്ളവ മാത്രം ലോഡ് ചെയ്യാൻ ഇത് സഹായിക്കുന്നു.
ചെറിയ ഫയലുകൾ ആപ്പുകളുടെ വേഗത വർദ്ധിപ്പിക്കുന്നു.
പ്രധാനമായും രണ്ട് ടൂളുകൾ നിലവിലുണ്ട്: Webpack, Vite.
Webpack നിങ്ങളുടെ ആപ്പ് സർവ് ചെയ്യുന്നതിന് മുമ്പ് മുഴുവനായി ബണ്ടിൽ ചെയ്യുന്നു. ഇത് വളരെ ശക്തവും ഫ്ലെക്സിബിളും (flexible) ആണ്. എന്നാൽ വലിയ പ്രോജക്റ്റുകളിൽ മാറ്റങ്ങൾ വരുത്തുമ്പോൾ എല്ലാം വീണ്ടും ബണ്ടിൽ ചെയ്യേണ്ടി വരുന്നതിനാൽ ഇത് സാവധാനത്തിലായി അനുഭവപ്പെട്ടേക്കാം.
Vite ഒരു ആധുനിക തിരഞ്ഞെടുപ്പാണ്. ഇത് ഡെവലപ്മെന്റ് സമയത്ത് നേറ്റീവ് ES modules ഉപയോഗിച്ച് ഫയലുകൾ നേരിട്ട് സർവ് ചെയ്യുന്നു. നിങ്ങൾ മാറ്റം വരുത്തുന്ന ഫയൽ മാത്രം ഇത് അപ്ഡേറ്റ് ചെയ്യുന്നു. ഇത് അപ്ഡേറ്റുകൾ പെട്ടെന്ന് നടക്കാൻ സഹായിക്കുന്നു.
താരതമ്യം:
Webpack:
- Dev speed: കുറവാണ്
- Config: സങ്കീർണ്ണമാണ്
- Best for: വലിയ ലെഗസി പ്രോജക്റ്റുകൾക്ക്
Vite:
- Dev speed: വേഗതയേറിയതാണ്
- Config: ലളിതമാണ്
- Best for: പുതിയ ആധുനിക പ്രോജക്റ്റുകൾക്ക്
പുതിയ പ്രോജക്റ്റുകൾക്കായി Vite ഉപയോഗിക്കുക.
എല്ലാ ബണ്ട്ലറുകളും മൂന്ന് ഘട്ടങ്ങളാണ് പിന്തുടരുന്നത്:
- Build a dependency graph: ഫയലുകൾ എങ്ങനെ പരസ്പരം ബന്ധപ്പെട്ടിരിക്കുന്നു എന്ന് ബണ്ട്ലർ മാപ്പ് ചെയ്യുന്നു.
- Transform code: ഇത് TypeScript അല്ലെങ്കിൽ JSX-നെ സാധാരണ JavaScript-ലേക്ക് മാറ്റുന്നു.
- Output the bundle: ഇത് അവസാന ഫയലുകൾ ഡിപ്ലോയ്മെന്റിനായി ഒരു ഫോൾഡറിലേക്ക് എഴുതുന്നു.
ഈ ടിപ്സുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ബണ്ടിൽ ലളിതമായി (lean) നിലനിർത്താം:
- Lazy loading: ഉപയോക്താവിന് ആവശ്യമുള്ളപ്പോൾ മാത്രം കോംപോണന്റുകൾ ലോഡ് ചെയ്യുക.
- Specific imports: മുഴുവൻ ലൈബ്രറികളും ഇംപോർട്ട് ചെയ്യരുത്. നിങ്ങൾ ഉപയോഗിക്കുന്ന പ്രത്യേക ഫംഗ്ഷനുകൾ മാത്രം ഇംപോർട്ട് ചെയ്യുക.
- Analyze your bundle: ഏത് ഫയലുകളാണ് കൂടുതൽ സ്ഥലം എടുക്കുന്നത് എന്ന് കാണാൻ ടൂളുകൾ ഉപയോഗിക്കുക.
- Use production builds: ഡെവലപ്മെന്റ് ബിൽഡുകൾക്ക് പകരം എപ്പോഴും പ്രൊഡക്ഷൻ ബിൽഡുകൾ മാത്രം ഡിപ്ലോയ് ചെയ്യുക.
കുറഞ്ഞ എണ്ണം ചെറിയ ഫയലുകൾ നൽകുന്നതിലൂടെ ബണ്ട്ലറുകൾ നിങ്ങളുടെ ആപ്പുകൾ വേഗത്തിലാക്കുന്നു.
Source: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p