Vite Build Optimizer Guide

Vite uses Rollup for production builds — blazing fast in dev, highly optimizable in prod. Learn how to analyze bundle composition, configure code splitting, and squeeze maximum performance from your Vite output.

Bundle Visualization with rollup-plugin-visualizer

npm install --save-dev rollup-plugin-visualizer

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

export default defineConfig({
  plugins: [
    visualizer({
      open: true,              // auto-open browser after build
      filename: 'dist/stats.html',
      gzipSize: true,          // show gzip sizes
      brotliSize: true,        // show brotli sizes (most accurate)
      template: 'treemap',     // 'treemap' | 'sunburst' | 'network'
    }),
  ],
});

Production Build Configuration

// vite.config.ts
import { defineConfig, splitVendorChunkPlugin } from 'vite';

export default defineConfig({
  plugins: [splitVendorChunkPlugin()],  // auto vendor splitting
  build: {
    target: 'es2020',          // modern browsers only
    minify: 'esbuild',         // fastest; use 'terser' for max compression
    cssCodeSplit: true,        // separate CSS per chunk
    sourcemap: false,          // disable in prod for smaller output
    chunkSizeWarningLimit: 500, // warn if chunk > 500KB

    rollupOptions: {
      output: {
        // Manual vendor chunk splitting
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
          'query': ['@tanstack/react-query'],
          'ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
        // Asset file naming
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
  },
});

Dynamic Imports for Code Splitting

// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings  = lazy(() => import('./pages/Settings'));
const Admin     = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  {
    path: '/dashboard',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Dashboard />
      </Suspense>
    ),
  },
]);

// Vue Router lazy loading
const routes = [
  {
    path: '/dashboard',
    component: () => import('./pages/Dashboard.vue'),
  },
];

Pre-Compression at Build Time

npm install --save-dev vite-plugin-compression

// vite.config.ts
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    // Generate .gz files
    viteCompression({ algorithm: 'gzip', ext: '.gz' }),
    // Generate .br files (Brotli — 10–15% smaller than gzip)
    viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),
  ],
});

// Configure nginx to serve pre-compressed files:
// gzip_static on;
// brotli_static on;  (requires ngx_brotli module)

Build Performance Benchmarks