Image by pch.vector on Freepik

Code Splitting in React (Lazy Loading)

React is one of the most popular JavaScript libraries used for building web applications, and it offers many powerful features that make it easy to build complex, interactive user interfaces. However, as applications become more complex, it’s important to consider performance optimizations like code splitting. Code splitting is a technique that can significantly improve the performance of a React application by reducing its initial load time.

In this article, we’ll explore what code splitting is, how it works, and how to implement it in a React application.

What is Code Splitting?

Code splitting is the process of breaking a large JavaScript file into smaller, more manageable files that can be loaded on-demand. This means that rather than loading the entire application’s code upfront, we can split the code into smaller chunks that are loaded only when they are needed. By doing this, we can reduce the amount of code that is initially loaded by the browser, which can improve the application’s load time and overall performance.

Code splitting is particularly important for large applications that have a lot of code, because it allows us to load only the code that is required for a particular feature or route, rather than loading all of the code upfront.

How Code Splitting Works in React

React provides built-in support for code splitting through the React.lazy function and the Suspense component. React.lazy allows us to load a component lazily, which means that it is loaded only when it is needed. The Suspense component is used to display a fallback UI while the lazily loaded component is being loaded.

When the LazyComponent is needed, React will load it asynchronously, which means that it won't block the main thread. Once the component is loaded, it will be rendered just like any other component.

Implementing Code Splitting in a React Application

To implement code splitting in a React application, we’ll need to make some changes to our build process. We’ll use Webpack, a popular build tool, to split our code into smaller chunks.

Step 1: Install Webpack

The first step is to install Webpack. We can do this by running the following command in our project directory:

npm install --save-dev webpack webpack-cli

This command installs Webpack and the Webpack command-line interface as development dependencies.

Step 2: Configure Webpack

Next, we need to configure Webpack to split our code into smaller chunks. We can do this by adding the following code to our webpack.config.js file:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

In this configuration, we’re telling Webpack to split our code into smaller chunks using the splitChunks optimization. We're also specifying the output path for our compiled code and using a content hash in the filename to ensure that the filename changes whenever the content of the file changes.

Step 3: Use React.lazy and Suspense

Now that we’ve configured Webpack to split our code into smaller chunks, we can use React.lazy and Suspense to lazily load our components.

Here’s an example of how we can use React.lazy and Suspense to load a component lazily:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./components/LazyComponent'));

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

export default App;

In this code snippet, we’re importing the React.lazy and Suspense components from the react package. We're also using React.lazy to lazily load a component called LazyComponent.

We’re then using the Suspense component to display a fallback UI while the LazyComponent is being loaded. In this case, we're displaying a simple "Loading..." message, but you could replace this with any kind of loading indicator that you like.

Step 4: Build the Application

With our configuration and code changes in place, we’re now ready to build our application. We can do this by running the following command:

npm run build

This command tells Webpack to build our application, which will result in several compiled JavaScript files, each containing a different chunk of our code.

Once the build process is complete, we can serve our application using any web server, or by running the following command:

npx serve dist

This command uses the serve package to serve our compiled code from the dist directory.

Conclusion

Code splitting is an important technique for improving the performance of React applications. By breaking our code into smaller chunks and loading them on-demand, we can reduce the amount of code that is initially loaded by the browser, which can significantly improve the application’s load time and overall performance.

In this article, we explored how to implement code splitting in a React application using the React.lazy and Suspense components, as well as how to configure Webpack to split our code into smaller chunks. With these techniques, we can build high-performing React applications that provide a great user experience.