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 ...