Performance Optimization by code-splitting | React lazy and Suspense

Each module or component will merged into a single file called bundle, which includes our whole webpage. But, as app grow bigger and bigger the initial loading time increase drastically, which create impact on user experience, SEO and all.

Example:

import { Profile } from ‘./profile’;
import { About } from './about';
import { Home } from './home';

When webpack sees these kind of import it just bundles them all together because we want to include them statically all together.

During initial loading of app all chunk is downloaded from server

Dynamic imports

Dynamically import means we only want to import file and then load it when necessary. One of the ways to split a code is using dynamic imports. To get feature of dynamic import in React, usually referred as route-based code-splitting, we use React lazy. But there are tons of popular package for code-splitting in React component called react-loadable and more.

React lazy

React lazy make easier to create components that are loaded using dynamic import() but rendered like normal components.

In react lazy we’re able to wrap our components inside of the lazy function that we got from react and we are able to use in react router because react-router default support code splitting which is what we’re trying to do split up our code into chunks. We will just end up replacing any place where we have route components with these new lazy loaded components.

Example:

import React, { lazy} from "react";
const Profile = lazy(() => import("./profile"));
const About = lazy(() => import("./about"));
const Home = lazy(() => import("./home"));

Decrease in first script load size while initially loaded

What will end up happening is that whenever user navigates to this route their we actually load this route webpack ahead of time during build step will have already chunked our code accordingly using that new lazy loaded function so that what happens is when they hit profile page they get profile page chunk. When they hit about page they get about page chunk. We actually can use them wherever there is route.

Load script when route is changed

The moment we need about page we pull about page from backend and lazy loaded to this route. So this is actually cool because we’re using react router. We get this route level loading right out of the box with react lazy and react router.

When we check out in network we see our chunk broken into two or more.

Now our page will be faster because our initial loading only dealed with smaller chunks. Less JS means our initial loading of our app is fast.

The problem is because these are synchronous during the given route, there might not be pages we want which depends on how fast our server is. If our server is slow, when we request for hour homepage, user might not see anything. So to eliminate these problem we can use React Suspense.

React Suspense

React suspense is for wrapping lazy loaded components.

Suppose a new component that react has released that allows you to wrap any part of our application that might be rendering asynchronous components which is lazy loaded components. Now we wrap suspense to our router.

Suspense, just render our fallback component and waits until components is finished being lazy loaded then it will automatically switch to right component for us.

Example:

<Suspense fallback={<div>Loading... <div/>}>
            <Route path="/" component={Home} exact />
            <Route path="/profile" component={Profile} />
            <Route path="/about" component={About} exact />      
</Suspense>

During route change it wait for component to completely loaded

P.S: You can use Loader or Spinner in these alternatives

For this test we change our network to Slow 3G

Because app is small we don’t see extreme differences so for this test we change to slow connection to display fallback component.

Hence, with the help of react lazy and suspense our page will be faster because there is less initial loading and we only download the needed script. Again, Less JS means our initial loading of our app is faster.

Thank you! for reading.

Keep coding :)

Follow me on: @beevekmgrz