Bundle Optimization

Code splitting and dynamic imports to reduce bundle size.

Quick Reference

CRITICAL priority - Reduces Time to Interactive and Largest Contentful Paint. Key patterns:

Dynamic imports (next/dynamic or React.lazy)
Defer third-party scripts
Conditional module loading
Preload on hover for perceived speed

When to split:

Components >50KB bundled
Heavy libraries (Monaco, Chart.js, PDF viewers)
Behind user interaction (modals, tabs)

Dynamic Imports

Vite Apps (React.lazy)

Next.js Apps (next/dynamic)

Defer Third-Party Libraries

Load analytics and tracking after hydration: Next.js:

Vite:

Conditional Module Loading

Load modules only when features are activated:

Preload on Hover

Improve perceived performance by preloading on hover:

Measuring Bundle Size

Vite

Next.js

Common Heavy Libraries

Split these aggressively:

Monaco Editor (~300KB)
Chart.js (~200KB)
PDF.js (~150KB)
Rich text editors (Slate, Draft.js)
Video players
Map libraries (Mapbox, Leaflet)

Route-Based Splitting

Vite

Next.js

Routes are automatically code-split in Next.js App Router:

Manual Chunk Configuration (Vite)

Eliminating Waterfalls - Async optimization
Making a Feature - Dynamic imports

Reference Files

For more detailed technical guidance, see these reference files:

Performance / Eliminating Waterfalls

Performance / Re-render Optimization

On this page

Quick Reference

Dynamic Imports

Vite Apps (React.lazy)

Next.js Apps (next/dynamic)

Defer Third-Party Libraries

Conditional Module Loading

Preload on Hover

Measuring Bundle Size

Vite

Next.js

Common Heavy Libraries

Route-Based Splitting

Vite

Next.js

Manual Chunk Configuration (Vite)

Bundle Optimization

Code splitting and dynamic imports to reduce bundle size.

Quick Reference

CRITICAL priority - Reduces Time to Interactive and Largest Contentful Paint. Key patterns:

Dynamic imports (next/dynamic or React.lazy)
Defer third-party scripts
Conditional module loading
Preload on hover for perceived speed

When to split:

Components >50KB bundled
Heavy libraries (Monaco, Chart.js, PDF viewers)
Behind user interaction (modals, tabs)

Dynamic Imports

Vite Apps (React.lazy)

Next.js Apps (next/dynamic)

Defer Third-Party Libraries

Load analytics and tracking after hydration: Next.js:

Vite:

Conditional Module Loading

Load modules only when features are activated:

Preload on Hover

Improve perceived performance by preloading on hover:

Measuring Bundle Size

Vite

Next.js

Common Heavy Libraries

Split these aggressively:

Monaco Editor (~300KB)
Chart.js (~200KB)
PDF.js (~150KB)
Rich text editors (Slate, Draft.js)
Video players
Map libraries (Mapbox, Leaflet)

Route-Based Splitting

Vite

Next.js

Routes are automatically code-split in Next.js App Router:

Manual Chunk Configuration (Vite)

Eliminating Waterfalls - Async optimization
Making a Feature - Dynamic imports

Reference Files

For more detailed technical guidance, see these reference files:

Performance / Eliminating Waterfalls

Performance / Re-render Optimization

On this page

Quick Reference

Dynamic Imports

Vite Apps (React.lazy)

Next.js Apps (next/dynamic)

Defer Third-Party Libraries

Conditional Module Loading

Preload on Hover

Measuring Bundle Size

Vite

Next.js

Common Heavy Libraries

Route-Based Splitting

Vite

Next.js

Manual Chunk Configuration (Vite)