Vite 6 New Features - Evolution of Next-Generation Build Tool

Vite 6 Overview

Vite 6, with the introduction of the Environment API, enables more flexible control over builds for server-side rendering and edge environments.

Environment API

Individual configurations are now possible for different execution environments (browser, Node.js, edge).

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

export default defineConfig({
  environments: {
    client: {
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/client/entry.ts'
        }
      }
    },
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true
      }
    },
    edge: {
      build: {
        outDir: 'dist/edge',
        target: 'esnext'
      }
    }
  }
});

Dev Server Improvements

Faster HMR

Hot Module Replacement has become even faster.

Vite 5: Update detection → Transform → Apply: 50-100ms
Vite 6: Update detection → Transform → Apply: 20-50ms

Improved Dependency Pre-bundling

export default defineConfig({
  optimizeDeps: {
    // Fine-grained control over pre-bundling targets
    include: ['react', 'react-dom'],
    exclude: ['@my-org/internal-lib'],
    // ESBuild option customization
    esbuildOptions: {
      target: 'esnext'
    }
  }
});

Build Optimization

Rollup 4 Support

Vite 6 adopts Rollup 4, improving build performance.

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Smarter chunk splitting
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns']
        }
      }
    }
  }
});

CSS Processing Improvements

export default defineConfig({
  css: {
    // Full Lightning CSS support
    transformer: 'lightningcss',
    lightningcss: {
      targets: {
        chrome: 100
      }
    }
  }
});

New Plugin API

Additional Hooks

const myPlugin = () => ({
  name: 'my-plugin',
  // New hooks
  hotUpdate({ file, modules }) {
    // Custom processing during HMR
  },
  // Per-environment configuration
  configEnvironment(name, config) {
    if (name === 'ssr') {
      config.resolve.conditions.push('node');
    }
  }
});

Migration Guide

Major Breaking Changes

Configuration Migration

// Vite 5
export default defineConfig({
  ssr: {
    target: 'node'
  }
});

// Vite 6
export default defineConfig({
  environments: {
    ssr: {
      build: {
        ssr: true
      }
    }
  }
});

Summary

Vite 6, with the Environment API, enables more flexible management of complex build configurations. Projects utilizing SSR or edge computing will see particularly significant benefits.