Code splitting implemented at route level

Without route-level code splitting, your admin dashboard, settings page, and checkout flow all ship to users who visit only your landing page. A monolithic bundle forces every visitor to download and parse code for routes they will never reach in that session. ISO 25010:2011 time-behaviour flags the slowdown; the practical result is a Time to Interactive that scales with your total codebase size rather than the complexity of the current page.

In Next.js App Router, each file in app/ already produces a separate chunk automatically. For client components or shared heavy components that are route-specific, use next/dynamic.

// app/admin/reports/page.tsx — heavy report component split off
import dynamic from 'next/dynamic'
const ReportChart = dynamic(() => import('@/components/report-chart'), { loading: () => <Skeleton /> })

Verify route splitting worked by checking .next/static/chunks/ — you should see per-route files, not a single app.js.