Bundle splitting

Bundle splitting loads JavaScript on demand via dynamic `import()`, usually wrapped in `React.lazy` and `Suspense` for route or feature chunks. Smaller initial bundles improve time-to-interactive; the cost is loading spinners and runtime chunk coordination.

Split at route boundaries first, then heavy modals or editors. Prefetch on hover or intent when UX allows. Monitor chunk sizes in build output — duplicate dependencies across chunks still happen without dedupe configuration.

					const Settings = React.lazy(() => import('./Settings'));
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Lazy load routes and heavy features.
• Suspense fallback for chunk loading.
• Watch for duplicate deps across chunks.