Heavy libraries use dynamic imports (not loaded on every page)

A charting library like Recharts (180KB gzipped) or a rich text editor like Monaco (2MB) statically imported in a shared layout loads on every page — even the marketing homepage, authentication screens, and error pages that never render a chart or editor. This adds hundreds of milliseconds of unnecessary parse time to routes where the library is invisible. ISO 25010 performance-efficiency.time-behaviour requires time-behaviour to be proportionate to the task being performed; serving 2MB of editor JavaScript to a user reading a blog post is not proportionate.

Move heavy library imports from static top-level imports to dynamic imports scoped to the component or route that actually uses them. Use next/dynamic in Next.js or React.lazy elsewhere, combined with a skeleton placeholder.

// Before — loads Monaco on every page
import MonacoEditor from '@monaco-editor/react'

// After — loads only on /editor route
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
  loading: () => <Skeleton className="h-64 w-full" />,
  ssr: false // Monaco doesn't support SSR
})

// Before — Recharts in layout.tsx
import { BarChart, BarChartData } from 'recharts'

// After — in the specific dashboard component
const AnalyticsChart = dynamic(
  () => import('./AnalyticsChart'), // AnalyticsChart wraps recharts
  { loading: () => <Skeleton />, ssr: false }
)

Verify the split worked by confirming recharts/monaco no longer appears in the main chunk in your bundle analyzer output.