Code Splitting
Cutting one huge JavaScript bundle into chunks so a visitor downloads only the code this page needs and grabs the rest later.
See it
What it is
Code splitting slices one giant bundle into chunks that load on demand. Someone landing on your pricing page should not download the chart library, the rich text editor, and the admin dashboard that live on other routes. The switch is the dynamic import: a static import is welded into the main chunk, while import('./Editor') becomes its own file fetched the moment that line runs.
Two useful cuts. Route-based splitting gives every page its own chunk, and most frameworks (Next.js, SvelteKit, TanStack Router) do it for free. Component-based splitting isolates the heavy things a page rarely needs: a modal, a map, a WYSIWYG editor, a date library. In React that is React.lazy plus a Suspense boundary with a real fallback.
Two gotchas. Split too finely and you trade one big download for a waterfall of small ones, each waiting on the last, which is slower. And after a fresh deploy, an open tab still holding old chunk URLs will get a 404 when it tries to load one, so catch that dynamic import failure and prompt a reload instead of showing a white screen.
Ask AI for it
Code-split this React app. Convert every route component to React.lazy with a dynamic import and wrap the router outlet in a Suspense boundary with a skeleton fallback that matches the page layout, not a bare spinner. Also lazy-load any component pulling in a heavy dependency (charts, editors, maps, date libraries) so it only downloads when the component actually mounts. Keep shared UI in the main chunk to avoid a request waterfall, add an error boundary that offers a reload when a chunk fails to fetch, and tell me the before and after size of the initial bundle.