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.

1. Create react application

Let’s create a simple application using `create-react-app`. Following article will help you to set up the application.

Create React 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

import React from 'react';

const Home = () => {
  return (
    <div>
      <h4>Home Page</h4>
      <div>This is home page.</div>
    </div>
  )
}

export default Home;

About.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h4>About Page</h4>
      <div>This is about page.</div>
    </div>
  )
}

export default About;

Contact.js

import React from 'react';

const Contact = () => {
  return (
    <div>
      <h4>Contact Page</h4>
      <div>This is contact page.</div>
    </div>
  )
}

export default Contact;

App.js

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 class="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
          </li>
          <li>
            <link to="/about">About
          </li>
          <li>
            <link to="/contact">Contact
          </li>
        </ul>
        <switch>
          <route exact="" path="/" component={Home}>
          <route path="/about" component={About}>
          <route path="/contact" component={Contact}>
        </route></route></route></switch>
      </div>
    </browserrouter>
  );
}

export default App;

index.css

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.

Output before code splitting - Clue Mediator

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

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 class="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
          </li>
          <li>
            <link to="/about">About
          </li>
          <li>
            <link to="/contact">Contact
          </li>
        </ul>
        <suspense fallback="{<small">Loading...}>
          <switch>
            <route exact="" path="/" component={Home}>
            <route path="/about" component={About}>
            <route path="/contact" component={Contact}>
          </route></route></route></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.

Output after code splitting - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project