dynamic-import

To reduce initial bundle size with dynamic import in React, use React.lazy to lazily load non-critical JavaScript modules and wrap them in a Suspense boundary with a fallback UI for on-demand rendering.

Lazy loading is a technique to load components on demand rather than upfront. Use it for non-critical UI features like modals, pickers, or heavy widgets triggered by user interaction instead of initial render.

React Suspense does not fully support server-side rendering for code splitting. Use loadable-components as an SSR-friendly alternative to achieve dynamic import semantics and on-demand module loading in SSR scenarios.

To show a fallback UI while waiting for a dynamically imported module, wrap your React.lazy component inside a Suspense component and provide a meaningful fallback prop that renders until the module is loaded.

The best way to optimize bundle performance for heavy widgets is applying code splitting via dynamic import semantics. This prevents loading rarely used UI components upfront, reducing initial bundle size and improving load performance.