Lazy Loading and Dynamic Imports
Some features are expensive but not needed immediately. Examples include charting libraries, rich text editors, code editors, maps, and large administrative widgets.
These features can often be loaded only when the user reaches the relevant interaction or page.
Lazy loading is most useful when it removes meaningful work from the critical path rather than merely splitting arbitrary components.
Dynamic Import
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('./HeavyChart'), {
loading: () => <p>Loading chart...</p>
});
export default function Analytics() {
return <HeavyChart />;
}💡 The heavy component can be loaded separately instead of being part of the initial client bundle.
Key Takeaways
- Lazy-load genuinely expensive, non-critical features.
- Measure bundle impact before and after changes.
- Do not split components simply because dynamic imports exist.