Code Splitting in React JS

Introduction

Websites that implement client-side routing take some time to load for the first time. If the website is especially large, then the loading time will be even longer, and the website’s performance may suffer. However, we can overcome this problem by splitting the bundle size of the website into more than one bundleWhen we deploy a website, we use a bundler to bundle all the code and assets into a single file.. This lesson will cover code-splitting, which will allow us to create more than one bundle for our React application.

What is code-splitting?

As we know, bundling tools like Webpack merge code into one bundle. A website without code-splitting has one big bundle, which loads all at once.

Remember: The process of creating multiple bundles that can be loaded dynamically at run time is called code-splitting.

ReactJS already has a feature for code-splitting. Libraries like loadable-components provide these features as well. In this lesson, we will learn to implement code-splitting using the loadable-components library.

Before implementing code-splitting, run the following npm command in the terminal below to build the bundle to determine its size: npm run build.