Reactలో Lazy Loading
పెద్ద React యాప్లు భారీ JavaScript బండిల్స్ను సృష్టిస్తాయి. పెద్ద బండిల్స్ మీ సైట్ను నెమ్మదింపజేస్తాయి. వినియోగదారులు మీ యాప్తో ఇంటరాక్ట్ అవ్వడానికి ఎక్కువ సమయం వేచి ఉండాల్సి వస్తుంది. ఇది మీ యూజర్ ఎక్స్పీరియన్స్ను దెబ్బతీస్తుంది.
Lazy loading దీనిని పరిష్కరిస్తుంది. ఇది వినియోగదారులకు అవసరమైనప్పుడు మాత్రమే కాంపోనెంట్లను లోడ్ చేస్తుంది. మీరు అన్నింటినీ ఒకేసారి లోడ్ చేయడం ఆపివేయవచ్చు.
Lazy loading వల్ల కలిగే ప్రయోజనాలు:
- చిన్న ప్రారంభ బండిల్ సైజ్
- వేగవంతమైన పేజీ లోడింగ్
- మెరుగైన యూజర్ ఎక్స్పీరియన్స్
- తక్కువ బ్యాండ్విడ్త్ వినియోగం
- మెరుగైన Core Web Vitals
React.lazy()ని ఎలా ఉపయోగించాలి
కాంపోనెంట్లను డైనమిక్గా ఇంపోర్ట్ చేయడానికి React lazy() అనే ఫంక్షన్ను అందిస్తుంది.
React ఆ కాంపోనెంట్ను రెండర్ చేసినప్పుడు మాత్రమే కోడ్ను డౌన్లోడ్ చేస్తుంది.
ఉదాహరణ కోడ్:
import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
మీరు lazy కాంపోనెంట్లతో పాటు తప్పనిసరిగా Suspenseని ఉపయోగించాలి. కాంపోనెంట్ లోడ్ అవుతున్నప్పుడు Suspense ఒక fallback UIని చూపుతుంది.
ఉదాహరణ కోడ్:
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 ఉపయోగిస్తున్నారా? కింద కామెంట్ చేయండి. నేను మీకు సమాధానం ఇస్తాను.