React Code Splitting Explained — Reduce Bundle Size

In this tutorial, you will learn about React Code Splitting Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React code splitting splits your application bundle into smaller chunks loaded on demand, reducing initial load time by downloading only what the user needs.

What You'll Learn

• How dynamic import() works
• How to use React.lazy with Suspense
• How to split by routes
• How to split large components
• How to analyze bundle size

Why It Matters

Large bundles increase load time, hurting user experience and SEO. Code splitting ensures users download only the code for features they actually use.

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

const Dashboard = lazy(() => import(/* webpackChunkName: "dashboard" */ "./pages/Dashboard"));
const Analytics = lazy(() => import(/* webpackChunkName: "analytics" */ "./pages/Analytics"));
const Settings = lazy(() => import(/* webpackChunkName: "settings" */ "./pages/Settings"));

function App() {
  return (
    <Suspense fallback={<div className="skeleton" />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Expected output: Each page is a separate chunk. Navigating to /settings downloads only the settings chunk (plus shared vendor code).