𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 വിശദീകരിക്കുന്നു
നിങ്ങൾ നിരവധി ഫയലുകൾ ഉപയോഗിച്ച് React അല്ലെങ്കിൽ Angular ആപ്പുകൾ എഴുതുന്നു. നിങ്ങൾക്ക് കോംപോണന്റുകൾ (components), സർവീസുകൾ (services), ലൈബ്രറികൾ (libraries) എന്നിവയുണ്ടാകും. ഈ ക്രമീകരണം നിങ്ങളെ സഹായിക്കുന്നു.
ബ്രൗസർ നിങ്ങളുടെ ഫോൾഡറുകളെ പരിഗണിക്കുന്നില്ല. നിങ്ങൾ 200 ഫയലുകൾ ലോഡ് ചെയ്യുകയാണെങ്കിൽ, ബ്രൗസർ 200 നെറ്റ്വർക്ക് റിക്വസ്റ്റുകൾ (network requests) നടത്തുന്നു. ഇത് നിങ്ങളുടെ ആപ്പിന്റെ വേഗത കുറയ്ക്കുന്നു.
ബണ്ട്ലറുകൾ (Bundlers) ഈ പ്രശ്നം പരിഹരിക്കുന്നു. ഒരു ബണ്ട്ലർ നിങ്ങളുടെ കോഡ്, ഇംപോർട്ടുകൾ (imports), മോഡ്യൂളുകൾ (modules) എന്നിവ എടുക്കുന്നു. അവയെ ഒന്നോ കുറച്ച് ചെറിയ ഫയലുകളാക്കി ഇത് സംയോജിപ്പിക്കുന്നു. ഇത് ലോഡിംഗ് കാര്യക്ഷമമാക്കുന്നു.
ആധുനിക ബണ്ട്ലറുകൾ ഫയലുകൾ സംയോജിപ്പിക്കുന്നതിനേക്കാൾ കൂടുതൽ കാര്യങ്ങൾ ചെയ്യുന്നു:
• Minification: ഇത് അധികമായ സ്പേസുകളും കമന്റുകളും നീക്കം ചെയ്യുന്നു. ഫയലുകൾ ചെറുതാക്കാൻ ഇത് വേരിയബിൾ പേരുകൾ ചുരുക്കുന്നു. • Tree shaking: നിങ്ങൾ ഒരിക്കലും ഉപയോഗിക്കാത്ത കോഡ് ഇത് നീക്കം ചെയ്യുന്നു. ലൈബ്രറികളിൽ നിന്ന് ഉപയോഗിക്കാത്ത ഫംഗ്ഷനുകൾ ഇത് ഒഴിവാക്കുന്നു. • Code splitting: ഇത് കോഡിനെ ചെറിയ കഷണങ്ങളായി (chunks) വിഭജിക്കുന്നു. ഉപയോക്താവിന് ഇപ്പോൾ ആവശ്യമുള്ളവ മാത്രമേ ബ്രൗസർ ലോഡ് ചെയ്യുകയുള്ളൂ.
ചെറിയ ഫയലുകൾ ആപ്പുകളുടെ വേഗത വർദ്ധിപ്പിക്കുന്നു.
പ്രധാനമായും രണ്ട് ടൂളുകൾ നിലവിലുണ്ട്: Webpack, Vite.
Webpack നിങ്ങളുടെ ആപ്പ് സർവ് ചെയ്യുന്നതിന് മുമ്പ് മുഴുവനായി ബണ്ടിൽ ചെയ്യുന്നു. ഇത് വലിയ ലെഗസി പ്രോജക്റ്റുകൾക്ക് (legacy projects) അനുയോജ്യമാണ്. ഇത് ഫ്ലെക്സിബിൾ ആണ്, എന്നാൽ വലിയ പ്രോജക്റ്റുകളിൽ വേഗത കുറഞ്ഞതായി തോന്നാം.
Vite ആണ് ആധുനികമായ തിരഞ്ഞെടുപ്പ്. ഡെവലപ്മെന്റ് സമയത്ത്, ഇത് ഫയലുകൾ നേരിട്ട് സർവ് ചെയ്യുന്നു. നിങ്ങൾ മാറ്റം വരുത്തുന്ന ഫയൽ മാത്രമേ ഇത് അപ്ഡേറ്റ് ചെയ്യുകയുള്ളൂ. ഇത് അപ്ഡേറ്റുകൾ പെട്ടെന്ന് നടക്കാൻ സഹായിക്കുന്നു. പ്രൊഡക്ഷന് (production) വേണ്ടി, വേഗതയേറിയ ബണ്ട്ലറുകൾ നിർമ്മിക്കാൻ Vite Rollup ഉപയോഗിക്കുന്നു.
താരതമ്യം:
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: ഇത് എല്ലാം സംയോജിപ്പിക്കുകയും മിനിഫൈ ചെയ്യുകയും ചെയ്ത് ഡിപ്ലോയ്മെന്റിനായി (deployment) ഒരു ഫോൾഡറിലേക്ക് മാറ്റുന്നു.
ഈ ഘട്ടങ്ങളിലൂടെ നിങ്ങളുടെ ബണ്ട്ലർ ലളിതമായി നിലനിർത്താം:
• Lazy loading: ഉപയോക്താക്കൾ അവയിലേക്ക് പോകുമ്പോൾ മാത്രം കോംപോണന്റുകൾ ലോഡ് ചെയ്യുക. • Partial imports: ഒരു മുഴുവൻ ലൈബ്രറിയും ഇംപോർട്ട് ചെയ്യരുത്. നിങ്ങൾക്ക് ആവശ്യമുള്ള പ്രത്യേക ഫംഗ്ഷൻ മാത്രം ഇംപോർട്ട് ചെയ്യുക. • Analyze: നിങ്ങളുടെ ബണ്ട്ലറിൽ കൂടുതൽ സ്ഥലം എടുക്കുന്നത് എന്താണെന്ന് കാണാൻ ടൂളുകൾ ഉപയോഗിക്കുക. • Production builds: എപ്പോഴും പ്രൊഡക്ഷൻ ബിൽഡുകൾ മാത്രം ഡിപ്ലോയ് ചെയ്യുക. ഡെവലപ്മെന്റ് ബിൽഡുകൾ വളരെ വലുതായിരിക്കും.
ബ്രൗസറിന് കുറഞ്ഞ എണ്ണം ചെറിയ ഫയലുകൾ നൽകുന്നതിലൂടെ ബണ്ട്ലിംഗ് നിങ്ങളുടെ ആപ്പിന്റെ പ്രവർത്തനം മെച്ചപ്പെടുത്തുന്നു.
Source: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p