0PricingLogin▼
React Academy · Lesson

Bundle Analysis & Code Splitting Strategy

Analyse bundle size with rollup-plugin-visualizer and set a code splitting strategy by route.

Why Bundle Size Matters

Large JavaScript bundles delay Time To Interactive. Every KB of JS must be downloaded, parsed, and executed before the page becomes interactive — especially on slow mobile networks.

Analyzing with rollup-plugin-visualizer

In Vite projects, use the visualizer plugin to generate a treemap of your bundle showing which modules take the most space.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({ open: true, gzipSize: true, brotliSize: true })
  ],
});

// After build, open the generated HTML file to explore the treemap

All lessons in this course

  1. Measuring Core Web Vitals in React Apps
  2. Bundle Analysis & Code Splitting Strategy
  3. Image & Font Optimisation in React
  4. Reducing INP: Event Handler Optimisation
← Back to React Academy