Code Splitting

Code Splitting is a technique used in React applications to improve the performance and reduce the loading time of the applications.

What is Code Splitting?

Code splitting is the process of breaking down a large codebase into smaller chunks, which can be loaded independently based on the specific needs of the application. By breaking down the codebase into smaller chunks, the application can reduce the time it takes to load and render the page. In a React application, code splitting can be implemented using dynamic imports, which allows developers to load components and modules asynchronously.

Why is Code Splitting Important?

In a typical React application, all the code is bundled together into a single file, which is loaded when the application is accessed. As the application grows it also increases its loading time. This can result in a poor user experience.

Code splitting can help to address this issue by breaking down the code into smaller chunks that can be loaded on-demand. That can improve the performance of the application.

Implementing Code Splitting in a React Application

The best way to implement code splitting in react app is a dynamic import()

Here is an example...

By this, we can use that only function. We don't have to render the whole page.

React.lazy

React.lazy is a built-in function in React that allows developers to lazily load components. With React.lazy(), you can load a component and its related code only when it's needed. This can help to reduce the amount of JavaScript that the browser needs to download initially, improving the performance of the application.

Here's an example of how to use React.lazy() to lazy load a component:

In this example, we're using React.lazy() to load the LazyComponent component. We're passing a function that returns an import() statement that specifies the location of the component. We're also using the Suspense component to handle the loading of the lazy-loaded component. The fallback prop specifies the component to display while the LazyComponent is being loaded.

Route-based code splitting

Many times it is a bit tricky to understand which component is loading lazily and where the function takes time.

So, it's better to use code splitting in routes. By loading only the code that is necessary for a particular route or page, you can reduce the amount of code that needs to be downloaded and parsed by the browser, resulting in faster load times and a better user experience.

Here's an example of how to implement route-based code splitting in a React application:

In this example, we're using React.lazy() to load the Home and About components asynchronously. We're also using React Router to define the routes of the application.

We're wrapping the routes in the Suspense component to handle the loading of the lazy-loaded components. The fallback prop specifies the component to display while the components are being loaded.

Overall, code splitting is a powerful and valuable technique for optimizing the performance of React applications. There are several benefits to using code splitting in React applications, including improved performance, better scalability, reduced bundle size, and code encapsulation.