Measure route-level bundles

Find heavy dependencies imported into shared layout code before chasing tiny wins.

Code example

Copy, adapt, and ship.

Read the numbered lines, copy the complete snippet, then adjust the values for your project.

Performance snippet

01import dynamic from "next/dynamic";02 03const ChartPanel = dynamic(() => import("./ChartPanel"), {04  ssr: false,05  loading: () => <p>Loading chart...</p>,06});

Production-ready starting point6 lines · copy with one click

Why this matters

The production reason.

01
A heavy dependency imported into a shared layout can silently affect every page.
02
Measure bundles per route before optimizing tiny components. One charting library or editor can outweigh dozens of small UI files.
03
Move heavy code into dynamic imports or route-specific components when it is not needed globally.

Platform notes03

How it holds up outside a demo.

Next.jsUse @next/bundle-analyzer for route-level visibility.
React dashboardsDynamically import charts, editors, and maps.
Marketing sitesKeep animation libraries out of the global layout if only one page needs them.