Optimizing Performance with Code Splitting in React

Most React apps bundle all dependencies into one single large file. Then it can be included on a webpage to entire app at once. This process is called as bundling. Webpack and Browserify are the tools which perform bundling for your application.

This kind of tools make it easy to insert dependencies to web page. However, is it worth add all dependencies at once? What do you think if bundler size is too large?

Yeah… You are correct , It can be hurt application after some certain bundle size. Lets find the solution using code splitting.

Code splitting is figuring out which part of code need to use different dependencies. Furthermore, Code splitting allows you to remove certain dependencies from bundle, then insert them only where they need.

Lets see what the ways that can be implemented code splitting in React.

Dynamic Imports

The simplest and best way to introduce code splitting into your application. Dynamic import uses “then” function to import only the code that is needed.

Create sum.js file in root directory and paste below code snippet.

// sum.js
export const sum = (a, b) => {
  return a + b;
};

At the first time we don’t use code splitting.

// App.js

import React from "react";
import { sum } from "./sum";

function App() {
  return (
    <div>
      <button onClick={() => alert(sum(5, 5))}>Add 5 + 5</button>
    </div>
  );
}

export default App;

Here, we use small code for understand purpose, when we click the button then popup alert with summation.

So, If user isn’t going to click button, Do we need to load code piece of sum function. No… but look at the browser, whether it uses or not browser downloaded the sum.js (inside src folder) at initial.

Now, Lets add code splitting,

// App.js

import React from "react";

function App() {
  return (
    <div>
      <button
        onClick={() =>
          import("./sum").then((module) => alert(module.sum(5, 5)))
        }
      >
        Add 5 + 5
      </button>
    </div>
  );
}

export default App;

See the browser,

sum.js is not there at the initial time. It is loaded when user click the button. It means sum.js insert into bundle when it needs.

React.lazy

The React.lazy function allows you to render a dynamic import as a regular component.

The lazy component should be rendered inside the Suspense component. It takes a fallback prop (loading indicator) that accepts the react element you need to render as the lazy component is being loaded.

Currently lazy only support for default export. If you want to import named exports, use re-import strategy. If you haven’t much idea about import-export in React check out my article.

// App.js

import React, { Suspense } from 'react';

// import any component which has been exported as default. 
const LazyHelloComponent = React.lazy(() => import('./HelloComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Route-based Code Splitting

This method is similar to previous one. The different is where we use it. Sometime it is little bit hard to find where in your app to introduce code splitting. It is good to start with routes.

Here’s an example of how to setup route-based code splitting.

// App.js

import React, { Suspense } from 'react';
import {Route, Switch, BrowserRouter } from 'react-router-dom';

// import any component which has been exported as default. 
const LazyHelloComponent = React.lazy(() => import('./HelloComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <BrowserRouter> 
      <Switch>
         <Route path={"/hello"}>
            <LazyHelloComponent/>
         </Route>
      </Switch> 
    </BrowserRouter>
  <Suspense/>
);

Resources

Code-Splitting - React

Frontend Performance Optimization with Code Splitting using React Lazy & Suspense 🔥