Efficient Code Splitting in React

In this blog, we will try to understand what code splitting is and
why we should implement it. With Code splitting, we can reduce the
initial bundle size, app loading time, and enhance its performance
and optimise our code.

When we create an application, we write code in several files. It
includes many modules and third-party libraries. When we build, it
converts these many files into a single large file(bundle), well,
not literally, but for understanding, yes. And this bundle is used
by a web browser to load the application.

Initially, when our application is small, the bundle size is small.
As the application grows and becomes more complex, the bundle size
grows simultaneously. And the bigger the bundle size is, the more
time it takes for the application to load. Therefore, we can say
that a bigger bundle size is an issue and affects the application
performance.

Now, what if there is a definite way to load the necessary files to
start the application and later load other files, as well, when
required. This way, we can keep our initial bundle size small and
get our applications to load faster.

React has this feature, It is called Code-Splitting. Code splitting
is a way/feature to split up your code from a large file or
component into various bundles. These can then be requested on
demand or in parallel. Some common use cases of code/bundle
splitting and lazy loading, are:

• As the user moves to a new view of the application, you can lazy
  load more code.
• Loading may also be tied to a particular movement, such as
  scrolling or pressing a button.
• You might also try to guess what the user would try to do next and
  load the code accordingly.
• As the user attempts to access the functionality, it will already
  be there. Now we’ll see how code splitting works and how you can do
  it well.

Code Splitting in a React Codebase

Some common ways to do code splitting are listed below:

1. Dynamic imports using Webpack

Webpack allows you to import modules during runtime dynamically.
Here is an example. Whenever we import a module or third party
library, we generally import it like this and it imports the file in
a synchronous way.

 
  import { homeComponent } from './home;
             

It means that the initial bundle file will have this import. Here
comes the dynamic import method to import files asynchronously.

 
  import('./home).then(home => {    console.log(home.renderHome())})
             

This syntax will let the Webpack file that’s to be code split and
bundled be generated accordingly.

2.Using React.lazy and React.Suspense

Another way of splitting the code is using the React.lazy()
method.This is a feature provided directly by React. This function
lets you render a dynamic import as a regular component. It means
that we can define components that can be imported dynamically in
the application. This helps us reduce the bundle size because we are
delaying the loading of the component that might be used later in
the application. Let’s understand this by an example.

 import React, { useState } from 'react'; import homeComponent from './home;

    export default function App() {
    const [showDetails, setShowDetails] = useState(false);
    return (
        <>
        <h1>Home</h1>
        <button onClick={() => 
        setShowDetails(true)}>Show Details
        </button>
        {showDetails ? <homeComponent /> : null }
        </>
    )};
     

As we can see in the above example that component homeComponent will
only render when the user clicks on the button Show Details. Here we
can use lazy loading to load the component homeComponent. Let’s do
it with the help of React.lazy().
This method takes a function that calls a dynamic import().

  const ProjectDetails = React.lazy(() => import('./home)); 

But there is a catch, what if our import takes time to load? The
React.Suspense comes into the picture. The lazy component is always
used within the Suspense component. It allows us to specify loading
indicators as fallback content until our lazy component is ready to
render.

  import React, { Suspense } from 'react';
    const OtherComponent = React.lazy(() => import('./OtherComponent'));

    function MyComponent() {
    return (
        <div> <Suspense fallback={<div>Loading...</div>}>
            <OtherComponent /> </Suspense> </div>
    )}
            

The fallback props take any React
element that we want to show while the lazy component is loading.
You can also use a single Suspense component to wrap several lazy
components.

  import React, { Suspense } from 'react';
    const OtherComponent = React.lazy(() => import('./OtherComponent'));
    const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

    function MyComponent() {
    return (
        <div> <Suspense fallback={<div>Loading...</div>}>
            <OtherComponent /> <AnotherComponent /> </Suspense> </div>
    )}
            

3.Route Level Splitting

Now we know how to split our code to reduce the bundle size, so we
can do it in the application so it doesn’t hinder the way the user
interacts with the application.

Therefore, routes are a good place to start with because generally,
users are familiar with delays when they transit from one route to
another.

Let’s see how we can set up route-based code splitting into your app
using libraries like React Router with React.lazy.

  import React, { Suspense, lazy } from 'react';
    import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
    import Home from "./home";
    const Profile = lazy(() => import('./profile'));
    const ContactUs = lazy(() => import('./contact'));

    const App = () => (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/contact" element={<ContactUs />} />
        </Routes>
        </Suspense>
    </Router>
    );
            

To read more about code-splitting, please check official
React documentation.