Code Splitting in React using React.lazy and Suspense
In this article, we will talk about the Code splitting in React using React.lazy and Suspense. In other words, you can also say that the lazy loading in React.
What is code splitting?
When you are working with a large scale application, you may have noticed that all your code is attached to a single bundle file. So whenever you run an application in a browser you have to wait until all the code is downloaded and your bundle file becomes large. So to avoid it, we need to split our code into different chunks.
The React.lazy and Suspense are built-in components to manage the code splitting functionality. Let’s try to understand it with an example.
Steps to implement lazy loading in React
- Create react application
- Implement routing
- Output before code splitting
- Add lazy loading in react component
- Output after code splitting
1. Create react application
Let’s create a simple application using create-react-app. Following article will help you to set up the application.
2. Implement routing
In order to show you the demo, first we will implement the routing in react application. Follow the article to get more information about the implementation of the Routing in React JS.
Here, we will create three different pages and add the link in the main component for navigation.
Home.js
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; const Home = () => { return ( <div> <h4>Home Page</h4> <div>This is home page.</div> </div> ) } export default Home; |
About.js
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; const About = () => { return ( <div> <h4>About Page</h4> <div>This is about page.</div> </div> ) } export default About; |
Contact.js
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; const Contact = () => { return ( <div> <h4>Contact Page</h4> <div>This is contact page.</div> </div> ) } export default Contact; |
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import React from 'react'; import { Link, Switch, Route, BrowserRouter } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; function App() { return ( <BrowserRouter> <div className="App"> <h3>Code Splitting in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> </BrowserRouter> ); } export default App; |
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | body { margin: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } h3 { color: #333333; } ul { list-style-type: none; margin-bottom: 20px; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } |
3. Output before code splitting
The above code will create a single bundle for the entire application and download it during the first load when you run a project in the browser. Check out the below image for your reference.
4. Add lazy loading in react component
Now we will add the lazy loading in application. First we have to import lazy & Suspense from the react and re-import the three components Home, About & Contact using React.lazy.
Use the Suspense component with fallback attribute to pass the loading component.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import React, { lazy, Suspense } from 'react'; import { Link, Switch, Route, BrowserRouter } from 'react-router-dom'; const Home = lazy(() => import('./Home')); const About = lazy(() => import('./About')); const Contact = lazy(() => import('./Contact')); function App() { return ( <BrowserRouter> <div className="App"> <h3>Code Splitting in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> <Suspense fallback={<small>Loading...</small>}> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Suspense> </div> </BrowserRouter> ); } export default App; |
5. Output after code splitting
Let’s check the output after the code splitting. You will see that the bundle will be downloaded on demand.
That’s it for today.
Thank you for reading. Happy Coding..!!
