Code splitting and dynamic imports for features.
Code splitting strategies:
- Vite apps: Use
React.lazy + Suspense
- Next.js apps: Use
next/dynamic
- Wrap in ErrorBoundary for resilience
- Load heavy components on-demand (modals, editors, charts)
When to split:
- Components > 50KB bundled
- Not needed on initial render
- Behind user interaction (modals, tabs)
Dynamic Imports (Vite Apps)
Use React.lazy with Suspense for lazy-loading in Vite apps:
Dynamic Imports (Next.js Apps)
Use next/dynamic for lazy-loading in Next.js apps:
Load features only when needed:
Vite with React Router:
Next.js (automatic route splitting):
Split these:
- ✅ Large components (>50KB bundled)
- ✅ Modals and dialogs
- ✅ Rich text editors (Monaco, Slate)
- ✅ Charts and visualizations
- ✅ File uploaders
- ✅ PDF viewers
- ✅ Video players
- ✅ Route pages
Don't split these:
- ❌ Small components (<10KB)
- ❌ Above-the-fold content
- ❌ Critical UI (buttons, inputs, forms)
- ❌ Layout components
- ❌ Navigation
Vite:
Next.js:
Preload on hover for perceived speed:
Import features dynamically:
For more detailed technical guidance, see these reference files:
