Code splitting

Code splitting reduces initial JavaScript by moving less urgent code into chunks loaded by route, component, capability, or interaction. It works best when chunk boundaries follow user journeys and cache reuse. Over-splitting creates request waterfalls, duplicate dependencies, and delayed interactions.

					const AdminPanel = lazy(() => import('./AdminPanel'));
// prefetch likely next route on hover or idle
				

Shared vendor chunks improve cache hits; too many tiny chunks add RTT overhead. Surface chunk load failures to users with retry.

On interviews: how bundle splitting affects TTI, caching, prefetching, and error/loading states.

Common pitfalls: splitting a component used immediately can only add overhead. Dynamic import failures need visible recovery paths.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Split along real user journeys.
• Avoid sequential chunk waterfalls.
• Prefetch likely next routes.
• Handle and display chunk errors.