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.

• ID: performance-load.bundle.code-splitting

• Severity: high

• What to look for: Count all routes/pages in the project. For each, determine whether it produces a separate chunk in the build output or shares a single monolithic bundle. In Next.js, this is automatic by route. In Vite/Webpack projects, check for dynamic imports and route-based chunking. Enumerate: "X routes detected, Y produce separate chunks."

• Pass criteria: At least 90% of routes produce separate chunks in the build output. The main bundle loads only code needed for the initial page. Other routes load their code on demand. For frameworks with automatic code splitting (Next.js, Nuxt, SvelteKit), verify the framework is configured correctly and not overridden. Report: "X of Y routes produce separate build chunks."

• Fail criteria: The entire application code is in a single bundle, or fewer than 50% of routes produce separate chunks.

• Skip (N/A) when: Never — code splitting is essential for scalable performance.

• Detail on fail: "1 of 12 routes has a separate chunk — all routes bundled into a single 2MB main.js" or "0 of 8 routes use code splitting — SPA bundles everything into vendor.js + app.js"

• Remediation: Configure automatic code splitting:

  // Next.js (automatic, no config needed)
  // Each page/route file is automatically code-split
  
  // Vite (automatic for routes with dynamic imports)
  // app/pages/dashboard.tsx is split automatically
  
  // For custom routes in Webpack/other tools:
  // Use dynamic imports explicitly
  const Dashboard = dynamic(() => import('./Dashboard'), { loading: () => <Spinner /> })