All 5 Code Splitting & Lazy Loading questions
More in Code Splitting & Lazy Loading
What happens if a lazy loaded component is not wrapped inside a Suspense component? How do React.lazy and Suspense work together to load a component only when it is needed? How would you code split routes in a React app using React Router? How would you preload a lazy loaded component before the user actually navigates to it?
Advertisement
React › Code Splitting & Lazy Loading

What is code splitting in React and why is it useful?

Beginner

Answer

Code splitting means breaking your app's JavaScript into smaller separate files instead of one huge file. The browser only downloads the small piece it needs for the current page, making the first page load much faster, especially for large apps with many different sections.
// Instead of importing everything upfront
import Dashboard from './Dashboard';

// Split it into its own file, loaded only when needed
const Dashboard = React.lazy(() => import('./Dashboard'));
Real-world example A large e commerce site splits its checkout page into its own chunk, so a visitor just browsing products never has to download the checkout code until they actually decide to buy something.

Common follow-ups: How much smaller does an app's initial load usually get after adding code splitting?;What tool shows you how big each split chunk actually is?

Build Tools & Bundlers (Vite Webpack & CRA);Suspense & Concurrent Rendering
All 5 Code Splitting & Lazy Loading questions