What is code splitting and how does it make a React app load faster?
Code splitting breaks the JavaScript bundle into smaller chunks that load on demand, for example per route. Users download only what the first screen needs, so the page becomes interactive sooner.
Explain it simply
A single huge bundle is like the college sending you the entire year's syllabus on day one. Code splitting sends today's chapter first and the rest when you need it.
Bundlers such as Vite, webpack and Next.js split code wherever they see a dynamic import(). In React you usually combine this with React.lazy and Suspense, loading each route's component only when the user visits it.
Good split points are routes, heavy libraries like charts or rich-text editors, and rarely used modals. Splitting very small pieces creates too many requests and gives no gain.
Example
import { lazy, Suspense } from "react";
const Reports = lazy(() => import("./Reports"));
function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<Reports />
</Suspense>
);
}What to say in the interview
"Code splitting divides the bundle into chunks loaded on demand using dynamic import. In React I use lazy and Suspense, usually per route or for heavy widgets. It reduces initial download and parse time. I verify the effect with the bundle analyser rather than guessing."
Common mistakes
- Splitting tiny components, creating many small requests.