Dynamic imports for heavy UI components

Charting libraries (Recharts, Chart.js), code editors (Monaco), and rich-text editors routinely weigh 100–300KB gzipped each. Importing any of them statically means that weight lands in the initial bundle, inflating Time to Interactive for every page — including pages where the component never renders. ISO 25010:2011 time-behaviour captures the latency hit; the business impact is users abandoning a landing page because a chart used only on the analytics dashboard was eagerly loaded.

Wrap any component over 50KB gzipped in a dynamic import with a loading fallback. In Next.js, use next/dynamic with ssr: false for browser-only libraries like canvas-based charts.

// components/analytics-chart.tsx
import dynamic from 'next/dynamic'
const LineChart = dynamic(
  () => import('recharts').then((m) => m.LineChart),
  { ssr: false, loading: () => <Skeleton className="h-64 w-full" /> }
)