Code Splitting & Lazy Loading
React.lazy(() => import('./Component')), EK, COMPONENT, KO, "LAZILY" LOAD, KARTA, hai — USKA, JavaScript, CODE, TABHI, DOWNLOAD, HOTA, hai, JAB, WOH, PEHLI, BAAR, RENDER, HONE, WALA, HO, NA, KI, INITIAL, PAGE, LOAD, PAR — INITIAL, BUNDLE, SIZE, KAAFI, KAM, HO, SAKTA, hai.
<Suspense fallback={<Spinner />}>, LAZY, COMPONENT, KO, WRAP, KARTA, hai — JAB, TAK, COMPONENT, KA, CODE, LOAD, HO, RAHA, HAI, fallback, (jaise, LOADING, SPINNER) DIKHAYA, JAATA, hai.
const Dashboard = React.lazy(() => import("./Dashboard"));
const Settings = React.lazy(() => import("./Settings"));
function App() {
return (
<Suspense fallback={<Spinner />}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
);
}
// Dashboard.js aur, Settings.js, ALAG, "chunks" mein, bundle, HOTE, HAIN —
// user, jis route par, JAAYE, SIRF, WOH, chunk, download, hoga- React.lazy() = component, KO, LAZILY, LOAD, karta hai (initial bundle, KAM)
- Suspense = lazy component, LOAD, HONE, TAK, fallback, UI, DIKHATA, hai
- Route-based, splitting = MOST, COMMON, PATTERN — har, page, ALAG, chunk
EK, LAZY, COMPONENT, KO, "PRELOAD" KIYA, JA, SAKTA, hai, USER, KE, USKO, ACTUALLY, NEED, KARNE, SE, PEHLE — jaise, EK, BUTTON, KE, onMouseEnter, PAR, import() CALL, KARKE, TAAKI, CLICK, KARNE, TAK, CODE, ALREADY, LOADED, HO.
function preloadDashboard() { import("./Dashboard"); }
<Link onMouseEnter={preloadDashboard} to="/dashboard">Dashboard</Link>Bade, LIBRARIES, (jaise, CHARTING, LIBRARY) KO, bhi, React.lazy() SE, SPLIT, KIYA, JA, SAKTA, hai — SIRF, WOH, PAGES, JO, ACTUALLY, CHART, DIKHATE, HAIN, USKA, JavaScript, LOAD, KARENGE, NA, KI, POORI, APP.