Learn the concept
Bundling & Code Splitting
Code splitting breaks your bundle into smaller chunks that load on demand. Use it for route-based splitting, heavy components, and vendor libraries. This reduces initial load time by only loading code when it's needed.
Code Splitting Methods:\n\n1. Route-based splitting:\n - Each page/route is a separate chunk\n - Most impactful for large apps\n - Easy to implement\n\n2. Component-based splitting:\n - Heavy components load on demand\n - Modals, charts, editors\n - User interaction triggers load\n\n3. Vendor splitting:\n - Separate third-party code\n - Changes less often (better caching)\n - Common chunks shared\n\nWhen to Split:\n- Large components rarely used\n- Features behind user interaction\n- Admin/auth-only sections\n- Heavy libraries\n\nBest Practices for User Experience:\n- Provide Fallbacks: Use loading indicators (e.g., <Suspense fallback="...">) for dynamically loaded content.\n- Prefetch/Preload: Strategically prefetch (likely needed) or preload (definitely needed) chunks to improve perceived load times.\n- Error Handling: Implement error boundaries or catch blocks for dynamic imports to gracefully handle loading failures.
// React Router with lazy loading
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// Each route is a separate chunk
const Home = lazy(() => import('./pages/Home'));
const Products = lazy(() => import('./pages/Products'));
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
const Admin = lazy(() => import('./pages/Admin'));
const Settings = lazy(() => import('./pages/Settings'));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<PageSkeleton />}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/products/:id" element={<ProductDetail />} />
<Route path="/admin/*" element={<Admin />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}
// Named chunks for better debugging
const Analytics = lazy(() =>
import(/* webpackChunkName: "analytics" */ './pages/Analytics')
);By splitting the JavaScript bundle so that code for specific product categories or features (e.g., checkout process) is only loaded when the user navigates to those sections, improving initial page load for the homepage.
By lazy loading heavy charting libraries, data tables, or specialized UI components only when they become visible or are actively interacted with by the user.
By splitting language-specific bundles so that users only download the translations for their selected language, reducing the overall size of the initial download.
Implement a simple multi-page React application that uses `React.lazy()` and `Suspense` with React Router for route-based code splitting.
Create a generic React component that can dynamically import and render other components based on a prop, demonstrating component-level code splitting.
Netflix uses extensive code splitting to deliver its streaming platform efficiently. Different parts of the UI, user profiles, and content recommendations are loaded on demand as the user navigates, ensuring a fast and smooth experience.
Gmail utilizes sophisticated code splitting to manage its large and complex codebase. Features like email composition, contact management, and calendar integration are loaded as separate chunks, reducing the initial load time and improving responsiveness.