Dynamically import below-the-fold and rarely-used components so the initial bundle stays small.
A large initial bundle delays interactivity (INP/TBT); splitting defers code until it is actually needed.
BeforeMerge scans your pull requests against this rule and dozens more. Get actionable feedback before code ships.
Shipping every component in one bundle forces the browser to parse and execute code the user may never see. Dynamic imports defer that cost until the feature is needed.
// bad: heavy modal always in the main bundle
import HeavyChart from "./HeavyChart";
// good: load it only when rendered
const HeavyChart = dynamic(() => import("./HeavyChart"), { ssr: false });Lazy-load below-the-fold widgets, modals, and route-level chunks; keep the critical path lean.