Route-based code splitting is configured

Without route-based code splitting, every user downloads the JavaScript for every page in the application — including admin panels, dashboard views, and features they will never visit. A monolithic bundle of 800KB means a user loading the marketing homepage pays the parse cost for the checkout flow and settings page. Next.js, SvelteKit, and Nuxt split routes automatically; overriding this behavior or building a custom SPA without dynamic imports forces that full cost onto every visitor. ISO 25010 performance-efficiency.time-behaviour requires that system response time be proportionate to the work being done — loading unused code violates this.

Verify that your framework's automatic code splitting is active and not overridden. For Next.js (App Router or Pages Router), each route file produces a separate chunk by default — no configuration needed. For custom Webpack or Rollup setups, add dynamic imports for each route.

// Next.js App Router — automatic, nothing to configure
// app/dashboard/page.tsx is split automatically from app/page.tsx

// React Router with Vite — use lazy()
import { lazy, Suspense } from 'react'
const Dashboard = lazy(() => import('./pages/Dashboard'))

function Router() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route
        path="/dashboard"
        element={
          <Suspense fallback={<Spinner />}>
            <Dashboard />
          </Suspense>
        }
      />
    </Routes>
  )
}

Confirm splitting is working by checking build output: each route should produce a distinct chunk file.