Making a Feature

Code splitting and dynamic imports for features.

Quick Reference

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:

With Error Boundaries

Dynamic Imports (Next.js Apps)

Use next/dynamic for lazy-loading in Next.js apps:

With SSR Support

Conditional Loading

Load features only when needed:

Tab-Based Loading

Route-Based Splitting

Vite with React Router:

Next.js (automatic route splitting):

When to Code Split

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

Measuring Bundle Size

Vite:

Next.js:

Preloading

Preload on hover for perceived speed:

Feature Organization

Import features dynamically:

Component Patterns - Component organization
Your First Page - Page routing
Bundle Optimization - Advanced bundle patterns

Reference Files

For more detailed technical guidance, see these reference files:

Working on features / Your First Page

Working on features / Forms

On this page

Quick Reference

Dynamic Imports (Vite Apps)

With Error Boundaries

Dynamic Imports (Next.js Apps)

With SSR Support

Conditional Loading

Tab-Based Loading

Route-Based Splitting

When to Code Split

Measuring Bundle Size

Preloading

Feature Organization

Making a Feature

Code splitting and dynamic imports for features.

Quick Reference

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:

With Error Boundaries

Dynamic Imports (Next.js Apps)

Use next/dynamic for lazy-loading in Next.js apps:

With SSR Support

Conditional Loading

Load features only when needed:

Tab-Based Loading

Route-Based Splitting

Vite with React Router:

Next.js (automatic route splitting):

When to Code Split

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

Measuring Bundle Size

Vite:

Next.js:

Preloading

Preload on hover for perceived speed:

Feature Organization

Import features dynamically:

Component Patterns - Component organization
Your First Page - Page routing
Bundle Optimization - Advanced bundle patterns

Reference Files

For more detailed technical guidance, see these reference files:

Working on features / Your First Page

Working on features / Forms

On this page

Quick Reference

Dynamic Imports (Vite Apps)

With Error Boundaries

Dynamic Imports (Next.js Apps)

With SSR Support

Conditional Loading

Tab-Based Loading

Route-Based Splitting

When to Code Split

Measuring Bundle Size

Preloading

Feature Organization