Intermediate LevelReact JS & React 19
How do dynamic imports with React.lazy reduce initial Total Blocking Time (TBT)?
❓ Interview Prompt: Explain Code Splitting, dynamic imports (`import()`), `React.lazy()`, route-based bundle splitting, and Total Blocking Time (TBT) reduction.
Single Page Applications bundled into a single massive JavaScript file degrade initial load performance (Total Blocking Time / TTI). Code Splitting splits code into smaller chunk files loaded on demand:
'React.lazy()':
Dynamically imports components when rendered: 'const Modal = React.lazy(() => import('./Modal'));'.
•
Wrapped inside '<Suspense fallback={<Spinner />}>' to render fallback UI while the JavaScript chunk downloads over the network.
Code Implementation Example
jsx
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// Code split heavy route components into separate JavaScript chunks!
const AnalyticsDashboard = lazy(() => import('./AnalyticsDashboard'));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<div>Loading Page Chunk...</div>}>
<Routes>
<Route path="/analytics" element={<AnalyticsDashboard />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}💡Route-based code splitting using React.lazy and dynamic imports.
🎯 Interview Key Takeaway
Use React.lazy and dynamic imports to split heavy component chunks and reduce initial JavaScript bundle download sizes.
#Code Splitting#React.lazy#Performance#Suspense#Intermediate
Back to all React JS & React 19 Questions→