What is Code Splitting in React?

Code Splitting is a performance optimization technique where the JavaScript bundle is divided into smaller chunks and loaded only when needed instead of loading the entire application at once.

Interview Answer

Code Splitting is a technique used to split a large JavaScript bundle into smaller chunks that are loaded only when required. In React, it is commonly implemented using React.lazy() and Suspense, while Next.js provides automatic route-based code splitting. It improves application performance by reducing the initial bundle size and speeding up page load times.

Problem Without Code Splitting

Imagine your application has:

• Dashboard
• Users
• Reports
• Settings
• Admin Panel

Without code splitting:

app.js (5 MB)

Dashboard
Users
Reports
Settings
Admin

When the user opens the Home page, React downloads all 5 MB even though the user may never visit Admin or Reports.

This increases:

• Initial page load time
• Bandwidth usage
• Time to Interactive (TTI)

---

Solution: Code Splitting

Load only the required code.

Home Page
   |
   +-- Home Bundle

Users Page
   |
   +-- Users Bundle

Admin Page
   |
   +-- Admin Bundle

The Admin code is downloaded only when the user visits the Admin page.

---

React.lazy() Example

Users Component

function Users() {
  return <h1>Users Page</h1>;
}

export default Users;

Lazy Loading

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

const Users = lazy(() => import("./Users"));

function App() {
  return (
    <Suspense fallback={<h2>Loading...</h2>}>
      <Users />
    </Suspense>
  );
}

What Happens?

1. App loads.
2. Users component is not downloaded initially.
3. When React needs it, it downloads the chunk.
4. Loading UI is shown until download completes.

---

Route-Based Code Splitting

Most common in real projects.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { lazy, Suspense } from "react";

const Dashboard = lazy(() => import("./Dashboard"));
const Users = lazy(() => import("./Users"));
const Reports = lazy(() => import("./Reports"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<h2>Loading...</h2>}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/users" element={<Users />} />
          <Route path="/reports" element={<Reports />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Each route gets its own bundle.

---

Dynamic Import

JavaScript feature used behind the scenes.

import("./Users")
  .then(module => {
    console.log(module.default);
  });

React.lazy uses this dynamic import mechanism.

---

Code Splitting in Next.js

Next.js automatically performs route-based code splitting.

Example:

app/
 ├─ page.tsx
 ├─ jobs/page.tsx
 ├─ users/page.tsx

Bundles generated:

Home Bundle
Jobs Bundle
Users Bundle

Only the visited page’s code is loaded.

---

Dynamic Component Loading in Next.js

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <p>Loading...</p>,
});

Usage:

export default function Dashboard() {
  return <Chart />;
}

The Chart component loads only when required.

---

Benefits

✅ Faster page load

✅ Smaller initial bundle size

✅ Better performance

✅ Improved SEO (especially with Next.js)

✅ Better user experience

---

Real Project Example

Suppose your Job Portal has:

Home
Jobs
Resume Parser
Admin
Reports

You can lazy-load heavy modules:

const ResumeParser = lazy(() => import("./ResumeParser"));
const Reports = lazy(() => import("./Reports"));

Users who only browse jobs won’t download Resume Parser or Reports code.