Code Splitting is a technique to optimize the performance of React applications by breaking down the JavaScript bundle into smaller chunks. React provides React.lazy as a built-in way to implement code splitting at the component level. This allows you to load parts of your application dynamically as they are needed.
const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> ); }
import React from "react"; import HeavyComponent from "./HeavyComponent"; function App() { return ( <div> <h1>Main App</h1> <HeavyComponent /> </div> ); } export default App;
In this approach, the entire HeavyComponent is bundled with the main app, even if it’s not immediately needed.
import React, { Suspense } from "react"; const HeavyComponent = React.lazy(() => import("./HeavyComponent")); function App() { return ( <div> <h1>Main App</h1> <Suspense fallback={<div>Loading...</div>}> <HeavyComponent /> </Suspense> </div> ); } export default App;
Now, HeavyComponent is only loaded when it is rendered. This reduces the size of the initial bundle.
Code splitting works seamlessly with React Router to load route components dynamically.
import React, { Suspense } from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; const Home = React.lazy(() => import("./Home")); const About = React.lazy(() => import("./About")); const Contact = React.lazy(() => import("./Contact")); function App() { return ( <Router> <Suspense fallback={<div>Loading Page...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </Suspense> </Router> ); } export default App;
Lazy-load multiple components in a single app with logical splitting.
import React, { Suspense, useState } from "react"; const ComponentA = React.lazy(() => import("./ComponentA")); const ComponentB = React.lazy(() => import("./ComponentB")); function App() { const [showA, setShowA] = useState(false); const [showB, setShowB] = useState(false); return ( <div> <button onClick={() => setShowA(true)}>Load Component A</button> <button onClick={() => setShowB(true)}>Load Component B</button> <Suspense fallback={<div>Loading...</div>}> {showA && <ComponentA />} {showB && <ComponentB />} </Suspense> </div> ); } export default App;
React doesn’t provide built-in error handling for failed imports. You can use an Error Boundary to handle such cases.
const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> ); }
Code splitting with React.lazy is a powerful way to improve your app's performance. By dynamically loading components, you can reduce the initial load time and enhance the user experience. When combined with Suspense and proper error handling, it provides a robust solution for building efficient, scalable React applications.
The above is the detailed content of Code Splitting with React.lazy: Enhance Your App's Performance. For more information, please follow other related articles on the PHP Chinese website!