Code Splitting & Lazy Loading

Loading Only What's Needed

Code splitting breaks your bundle into smaller chunks loaded on demand, improving initial load time.

Dynamic Imports

// Load module when needed
const module = await import('./heavy-module.js');

// React lazy component
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// With Suspense
<Suspense fallback={<Loading />}>
  <HeavyComponent />
</Suspense>

Splitting Strategies

• Route-based: Each page is a separate chunk
• Component-based: Heavy components loaded on demand
• Vendor splitting: Separate node_modules bundle

Bundle Analysis

# Analyze bundle size
npx vite-bundle-visualizer
npx source-map-explorer build/static/js/*.js

Tree Shaking

• Remove unused code at build time
• Use ES modules (not CommonJS)
• Avoid side effects in modules
• Use /* @__PURE__ */ annotations