Split your bundle by route

Approach

Load each route's component on demand with React Router's lazy route property (or React.lazy + Suspense). Keep shared layout code in the main bundle, show a lightweight fallback, and prefetch likely next routes on hover.

Solution

import { createBrowserRouter, RouterProvider } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    Component: RootLayout,                       // in the main bundle
    children: [
      { index: true, Component: Home },
      { path: "reports", lazy: async () => ({ Component: (await import("./routes/Reports")).default }) },
      { path: "settings", lazy: async () => ({ Component: (await import("./routes/Settings")).default }) },
    ],
  },
]);

export function App() {
  return <RouterProvider router={router} />;
}

// Prefetch on hover
export function ReportsLink() {
  return <Link to="/reports" onMouseEnter={() => import("./routes/Reports")}>Reports</Link>;
}

Pitfalls

• Splitting tiny components (more requests, no gain).
• No handling for chunk load failures after deploys.
• Lazy-loading the above-the-fold landing page.

Variations

• React.lazy for heavy widgets (charts, editors) within a page.
• Analyze bundles with rollup-plugin-visualizer / vite-bundle-visualizer.

Further reading: React Router: lazy routes