Code splitting is the technique of splitting your JavaScript bundle into smaller chunks that can be loaded on demand. This reduces the initial load time of your app, improving performance and user experience by only loading the necessary code for a particular page or feature.

In React, code splitting is commonly achieved through dynamic import() statements, which allows you to load components or libraries only when they are needed.

How It Works 🔧

React makes it easy to implement code splitting by using React.lazy() for dynamic imports and Suspense for handling loading states while the code is being fetched. These features enable you to split your app into multiple bundles and only load the relevant ones when the user navigates to that part of the app.

1️⃣ Using React.lazy() for Code Splitting

• React.lazy() allows you to load a component only when it’s needed (i.e., when it is rendered). This reduces the initial JavaScript load.

• Suspense is used to handle the loading state while the lazy-loaded component is being fetched.

Example: Code Splitting with React.lazy()

Let’s create a simple example where we split the app into multiple chunks and load them only when needed.

1. Set Up Components

• Home.js – The homepage component.
• About.js – A second component, which will be lazily loaded.

2. Using React.lazy() and Suspense

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

// Lazily load the About component only when it's needed
const About = lazy(() => import('./About'));

function App() {
return (
<div>
<h1>Welcome to the React App</h1>

{/* Code Splitting the About component */}
<Suspense fallback={<div>Loading...</div>}>
<About />
</Suspense>
</div>
);
}

export default App;

3. About.js Component

import React from 'react';

function About() {
return (
<div>
<h2>About Us</h2>
<p>This is the about page of the application.</p>
</div>
);
}

export default About;

Key Concepts in the Example 📚

• lazy():
  The About component is wrapped with React.lazy(), meaning it will only be loaded when it’s rendered for the first time.

• Suspense:
  Since lazy loading introduces a delay in loading the component, Suspense is used to display a fallback (like a loading spinner or text) while the component is being fetched.

2️⃣ Dynamic Import with Routes (React Router)

Code splitting is particularly useful in single-page applications (SPAs) when you’re using routing. With React Router, you can load routes lazily.

Example with React Router

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

// Lazy load components for each route
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>

<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</div>
</Router>


);
}

export default App;

In this example:

• The Home and About components are lazy-loaded when the user navigates to those routes, reducing the initial bundle size.
• Suspense is used around the routes to show a fallback during lazy loading.

Benefits of Code Splitting 🏎️

1. Faster Initial Load: Only the code for the currently viewed part of the app is loaded initially.
2. Improved Performance: Since less JavaScript is loaded initially, your app can load faster and be more responsive.
3. Optimized User Experience: You can show loading indicators for lazily loaded components, improving the perceived performance.

3️⃣ Advanced: Splitting Libraries and Vendors

Another common strategy is splitting third-party libraries into separate bundles so they are cached separately. For example, React and React Router can be bundled separately from your app’s code.

React does this automatically in production by separating runtime code, vendor code, and your app code into separate chunks using tools like Webpack.

Summary 💡

• React.lazy(): Dynamically import components to split code.
• Suspense: Handle the loading state while waiting for the lazy-loaded component.
• Use Case: Perfect for large applications or applications with multiple routes/pages.