React-ലെ Lazy Loading
വലിയ React ആപ്പുകൾ വലിയ JavaScript ബണ്ടിലുകൾ (bundles) സൃഷ്ടിക്കുന്നു. വലിയ ബണ്ടിലുകൾ നിങ്ങളുടെ സൈറ്റിന്റെ വേഗത കുറയ്ക്കുന്നു. ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ ആപ്പുമായി ഇടപഴകാൻ കൂടുതൽ സമയം കാത്തിരിക്കേണ്ടി വരുന്നു. ഇത് നിങ്ങളുടെ യൂസർ എക്സ്പീരിയൻസിനെ (user experience) ദോഷകരമായി ബാധിക്കുന്നു.
Lazy loading ഈ പ്രശ്നം പരിഹരിക്കുന്നു. ഉപയോക്താക്കൾക്ക് ആവശ്യമുള്ളപ്പോൾ മാത്രം ഇത് കോംപോണന്റുകൾ (components) ലോഡ് ചെയ്യുന്നു. എല്ലാം ഒരേസമയം ലോഡ് ചെയ്യുന്നത് ഇതിലൂടെ ഒഴിവാക്കാം.
Lazy loading കൊണ്ടുള്ള ഗുണങ്ങൾ:
- കുറഞ്ഞ പ്രാരംഭ ബണ്ടിൽ സൈസ് (initial bundle size)
- വേഗത്തിലുള്ള പേജ് ലോഡിംഗ്
- മെച്ചപ്പെട്ട യൂസർ എക്സ്പീരിയൻസ്
- കുറഞ്ഞ ബാൻഡ്വിഡ്ത്ത് ഉപയോഗം
- മെച്ചപ്പെട്ട Core Web Vitals
React.lazy() എങ്ങനെ ഉപയോഗിക്കാം
കോംപോണന്റുകൾ ഡൈനാമിക് ആയി ഇംപോർട്ട് ചെയ്യാൻ React lazy() എന്നൊരു ഫംഗ്ഷൻ നൽകുന്നു.
കോംപോണന്റ് റെൻഡർ ചെയ്യുമ്പോൾ മാത്രമാണ് React ആ കോഡ് ഡൗൺലോഡ് ചെയ്യുന്നത്.
Example code:
import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Lazy കോംപോണന്റുകൾക്കൊപ്പം നിങ്ങൾ తప్పമായും Suspense ഉപയോഗിക്കണം. കോംപോണന്റ് ലോഡ് ആയിക്കൊണ്ടിരിക്കുമ്പോൾ Suspense ഒരു fallback UI കാണിക്കുന്നു.
Example code:
import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductDetail />
</Suspense>
);
}
വിജയകരമായി ഉപയോഗിക്കാൻ രണ്ട് നിയമങ്ങൾ:
- നിങ്ങളുടെ കോംപോണന്റുകൾ default exports ഉപയോഗിച്ചിരിക്കണം.
- നിങ്ങളുടെ lazy imports കോംപോണന്റ് ഫംഗ്ഷനുകൾക്ക് പുറത്ത് ഡിക്ലയർ ചെയ്യുക.
നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ നിങ്ങൾ lazy loading ഉപയോഗിക്കാറുണ്ടോ? താഴെ ഒരു കമന്റ് രേഖപ്പെടുത്തൂ. ഞാൻ മറുപടി നൽകാം.