Vite ലളിതമായി മനസ്സിലാക്കാം

Webpack അല്ലെങ്കിൽ Create React App പോലുള്ള പഴയ ടൂളുകൾ ആദ്യം നിങ്ങളുടെ മുഴുവൻ പ്രോജക്റ്റും ബണ്ടിൽ (bundle) ചെയ്തുകൊണ്ടാണ് പ്രവർത്തിക്കുന്നത്. ഈ ടൂൾ ഓരോ ഫയലും വായിച്ച് അവയെ ഒരൊറ്റ വലിയ JavaScript ഫയലാക്കി മാറ്റുന്നു. ഇത് ചെറിയ പ്രോജക്റ്റുകൾക്ക് അനുയോജ്യമാണ്. എന്നാൽ വലിയ പ്രോജക്റ്റുകളിൽ ഇത് പരാജയപ്പെടുന്നു. വലിയ പ്രോജക്റ്റുകളിൽ ഈ പ്രക്രിയയ്ക്ക് പല സെക്കൻഡുകൾ എടുക്കും. നിങ്ങൾ ഓരോ തവണ ഒരു ഫയൽ സേവ് ചെയ്യുമ്പോഴും, ടൂൾ ആ ജോലിയുടെ വലിയൊരു ഭാഗം വീണ്ടും ചെയ്യേണ്ടി വരുന്നു.

Vite വ്യത്യസ്തമായാണ് പ്രവർത്തിക്കുന്നത്. ആധുനിക ബ്രൗസറുകൾ ES modules നേരിട്ട് (natively) പിന്തുണയ്ക്കുന്നു. ഇതിനർത്ഥം ബ്രൗസറിന് തന്നെ imports, exports എന്നിവ കൈകാര്യം ചെയ്യാൻ കഴിയും എന്നാണ്. ഡെവലപ്‌മെന്റ് സമയത്ത് Vite നിങ്ങളുടെ കോഡ് ബണ്ടിൽ ചെയ്യുന്നില്ല. ബ്രൗസർ ആവശ്യപ്പെടുമ്പോൾ മാത്രം ഓരോ ഫയലും ഒരു പ്രത്യേക മോഡ്യൂളായി അത് നൽകുന്നു.

ഒരു ബഫെ റെസ്റ്റോറന്റ് (buffet restaurant) സങ്കൽപ്പിക്കുക. റെസ്റ്റോറന്റ് തുറക്കുന്നതിന് മുമ്പ് തന്നെ ഷെഫ് എല്ലാ വിഭവങ്ങളും പാകം ചെയ്തു വെക്കുന്നു. നിങ്ങൾക്ക് ഒരു ചെറിയ മാറ്റം വേണമെന്നുണ്ടെങ്കിൽ, ഷെഫിന് ആ ബഫെ മുഴുവനും വീണ്ടും തയ്യാറാക്കേണ്ടി വരും. ഇതാണ് Webpack പ്രവർത്തിക്കുന്ന രീതി. പ്രോജക്റ്റ് വലുതാകുന്തോറും നിങ്ങൾ കൂടുതൽ സമയം കാത്തുനിൽക്കേണ്ടി വരും.

Vite ഒരു à la carte റെസ്റ്റോറന്റ് പോലെയാണ്. വാതിലുകൾ ഉടൻ തന്നെ തുറക്കുന്നു. നിങ്ങൾ ഒരു വിഭവം ഓർഡർ ചെയ്യുന്നു. ഷെഫ് ആ വിഭവം മാത്രം തയ്യാറാക്കുന്നു. നിങ്ങൾക്ക് പിന്നീട് ഒരു ഡെസേർട്ട് (dessert) വേണമെന്നുണ്ടെങ്കിൽ, ഷെഫ് അത് മാത്രം തയ്യാറാക്കുന്നു. മുഴുവൻ മെനുവും തയ്യാറാകാൻ നിങ്ങൾ കാത്തുനിൽക്കേണ്ടതില്ല.

രണ്ട് വ്യത്യസ്ത ആവശ്യങ്ങൾക്കായി Vite രണ്ട് വ്യത്യസ്ത തന്ത്രങ്ങൾ ഉപയോഗിക്കുന്നു:

Development (vite dev) • തന്ത്രം: ബണ്ട്ലിംഗ് ഇല്ലാതെ തന്നെ native ESM modules നൽകുന്നു. • സ്റ്റാർട്ട് സ്പീഡ്: പെട്ടെന്ന് (Instant). ഇത് പ്രോജക്റ്റിന്റെ വലുപ്പത്തെ ആശ്രയിച്ചല്ല ഇരിക്കുന്നത്. • കാരണം: നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ ലോക്കൽ HTTP റിക്വസ്റ്റുകൾ വളരെ വേഗതയുള്ളതാണ്.

Production (vite build) • തന്ത്രം: Rolldown ഉപയോഗിച്ച് എല്ലാം ബണ്ടിൽ ചെയ്യുന്നു. • സ്റ്റാർട്ട് സ്പീഡ്: പ്രോജക്റ്റിന്റെ വലുപ്പത്തിനനുസരിച്ച് സമയം കൂടും. • കാരണം: നൂറുകണക്കിന് പ്രത്യേക ഫയലുകൾ ഉപയോക്താക്കൾക്ക് അമിതമായ HTTP റിക്വസ്റ്റുകൾ ഉണ്ടാക്കും. ബണ്ട്ലിംഗ് ഇത് പരിഹരിക്കുന്നു.

കോഡിംഗ് സമയത്ത് വേഗതയും ലോഞ്ച് ചെയ്യുമ്പോൾ കാര്യക്ഷമതയും Vite നിങ്ങൾക്ക് നൽകുന്നു.

ഉറവിടം: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62