Why this matters
The production reason.
A heavy dependency imported into a shared layout can silently affect every page.
Measure bundles per route before optimizing tiny components. One charting library or editor can outweigh dozens of small UI files.
Move heavy code into dynamic imports or route-specific components when it is not needed globally.
Copy-ready example
import dynamic from "next/dynamic";
const ChartPanel = dynamic(() => import("./ChartPanel"), {
ssr: false,
loading: () => <p>Loading chart...</p>,
});