Optimizing React Apps With Code Splitting and Lazy Loading
Large React applications can become sluggish if the JavaScript bundle grows too big. Code splitting and lazy loading are powerful techniques to break your app into smaller chunks, improving load times and performance. Here’s how to apply them effectively.
Why Code Splitting?
React apps are often bundled into a single large JavaScript file. This increases initial load time. Code splitting breaks that file into smaller pieces that load only when needed.
Step 1: Use React.lazy and Suspense
React provides built-in support for code splitting using React.lazy and Suspense. Here's a basic setup:
import React, { Suspense } from "react";
const HeavyComponent = React.lazy(() => import("./HeavyComponent"));
function App() {
return (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
</div>
);
}
export default App;
This tells React to split HeavyComponent into its own bundle, which loads only when it’s rendered.
Step 2: Dynamic Imports for Routes
For routing-based apps (like with React Router), you can lazy load entire routes:
import { BrowserRouter, Routes, Route } from "react-router-dom";
const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));
function App() {
return (
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}
Step 3: Combine With Webpack or Vite
Modern bundlers like Webpack and Vite handle code splitting automatically when using dynamic imports. Just make sure your setup supports ES modules and dynamic import() syntax.
Bonus: Preloading for UX
You can preload modules to make navigation smoother:
const About = React.lazy(() => import(/* webpackPrefetch: true */ "./pages/About"));
This tells Webpack to download the chunk in the background.
Conclusion
Code splitting and lazy loading are essential tools for building fast, efficient React applications. With just a few lines of code, you can reduce bundle size and significantly improve the user experience.
If this post helped you, consider supporting me: buymeacoffee.com/hexshift