What is code splitting in React?

In React, code splitting is a performance optimization technique where the application is broken into smaller chunks, and only the required code is loaded when needed instead of loading the entire app at once.

This makes the initial page load faster and improves user experience.

What is Code Splitting?

By default, a React app bundles all JavaScript into one large file. As the app grows, this bundle becomes heavy and slow to load.

Code splitting solves this by splitting the bundle into smaller pieces that are loaded on demand.

Instead of:

Load everything upfront ❌

You do:

Load only what is needed now, and load the rest later ✅

---

How Code Splitting Works

React supports code splitting using:

1. Dynamic import()

This tells the bundler:…