Vite 6 Released - Environment API and Next-Generation Build Optimization

Vite 6 Overview

Vite 6 is a new milestone for frontend build tools. With the introduction of the Environment API, you can now handle different execution environments such as SSR, client, and workers in a unified way.

flowchart TB
    subgraph Vite6["Vite 6 Architecture"]
        subgraph EnvAPI["Environment API (New)"]
            Client["Client<br/>Environment"]
            SSR["SSR<br/>Environment"]
            Worker["Worker<br/>Environment"]
        end

        ModuleGraph["Module Graph<br/>Manages independent module graph for each env"]

        subgraph Bundlers["Bundlers"]
            esbuild["esbuild<br/>(dev)"]
            Rollup["Rollup<br/>(build)"]
            Rolldown["Rolldown<br/>(future)"]
        end

        EnvAPI --> ModuleGraph
        ModuleGraph --> esbuild
        ModuleGraph --> Rollup
        ModuleGraph --> Rolldown
    end

Environment API

The biggest change in Vite 6 is the introduction of the Environment API.

Traditional Approach vs New Approach

// Vite 5 and earlier: SSR was treated specially
export default defineConfig({
  ssr: {
    noExternal: ['some-package'],
    target: 'node',
  },
});

// Vite 6: Unified management with Environment API
export default defineConfig({
  environments: {
    client: {
      // Client-specific configuration
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/entry-client.ts',
        },
      },
    },
    ssr: {
      // SSR-specific configuration
      build: {
        outDir: 'dist/server',
        rollupOptions: {
          input: 'src/entry-server.ts',
        },
      },
      resolve: {
        noExternal: ['some-package'],
      },
    },
    worker: {
      // Web Worker-specific configuration
      build: {
        outDir: 'dist/worker',
      },
    },
  },
});

Creating Custom Environments

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

export default defineConfig({
  environments: {
    // Custom environment for Edge Runtime, etc.
    edge: createEnvironment({
      name: 'edge',
      consumer: 'server',
      webCompatible: true,
      build: {
        outDir: 'dist/edge',
        target: 'esnext',
        rollupOptions: {
          external: ['node:*'],
        },
      },
      resolve: {
        conditions: ['edge-light', 'worker', 'import', 'module'],
      },
    }),
  },
});

Environment Support in Plugins

// Custom plugin
function myPlugin(): Plugin {
  return {
    name: 'my-plugin',

    // Different processing per environment
    transform(code, id, options) {
      const environment = this.environment;

      if (environment.name === 'ssr') {
        // SSR-specific transformation
        return transformForSSR(code);
      }

      if (environment.name === 'client') {
        // Client-specific transformation
        return transformForClient(code);
      }

      return code;
    },

    // When environment is initialized
    configureEnvironment(environment) {
      console.log(`Configuring environment: ${environment.name}`);
    },

    // Hot update
    hotUpdate({ environment, modules }) {
      if (environment.name === 'client') {
        // HMR for client only
        return modules;
      }
      // Restart for SSR
      return [];
    },
  };
}

Performance Improvements

Performance Comparison

Optimization Configuration

// vite.config.ts
export default defineConfig({
  // Dependency pre-bundling optimization
  optimizeDeps: {
    include: ['lodash-es', 'react', 'react-dom'],
    exclude: ['your-local-package'],

    // Multiple entry point optimization
    entries: ['src/main.tsx', 'src/worker.ts'],

    // esbuild options
    esbuildOptions: {
      target: 'esnext',
      supported: {
        'top-level-await': true,
      },
    },
  },

  // Build optimization
  build: {
    // Target
    target: 'esnext',

    // Chunk splitting strategy
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns'],
        },
      },
    },

    // CSS code splitting
    cssCodeSplit: true,

    // Source maps
    sourcemap: 'hidden',

    // Minification
    minify: 'esbuild',
  },
});

CSS Improvements

Enhanced Lightning CSS Integration

// vite.config.ts
export default defineConfig({
  css: {
    // Use Lightning CSS by default
    transformer: 'lightningcss',

    lightningcss: {
      // Browser targets
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15,
      },

      // CSS Modules
      cssModules: {
        pattern: '[hash]_[local]',
      },

      // Feature flags
      drafts: {
        customMedia: true,
      },
    },
  },
});

CSS Modules Type Generation

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      // Auto-generate type definition files
      localsConvention: 'camelCaseOnly',
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },

  plugins: [
    // CSS Modules type generation plugin
    cssModulesTyped(),
  ],
});

/* styles.module.css */
.button {
  background: blue;
}

.buttonPrimary {
  composes: button;
  background: green;
}

// styles.module.css.d.ts (auto-generated)
declare const styles: {
  readonly button: string;
  readonly buttonPrimary: string;
};
export default styles;

New Configuration Options

JSON Configuration Improvements

// vite.config.ts
export default defineConfig({
  json: {
    // Enable named exports
    namedExports: true,

    // Convert JSON to ES modules
    stringify: false,
  },
});

// Usage example
import { version, name } from './package.json';
console.log(`${name}@${version}`);

Glob Import Improvements

// Dynamic import patterns
const modules = import.meta.glob('./modules/*.ts', {
  // Immediate import
  eager: true,

  // Specific exports only
  import: 'default',

  // Query parameters
  query: { raw: true },
});

// Type-safe glob imports
const pages = import.meta.glob<{
  default: React.ComponentType;
  meta: { title: string };
}>('./pages/**/*.tsx');

Handling Breaking Changes

Node.js Minimum Version

// package.json
{
  "engines": {
    "node": ">=18.0.0"
  }
}

CJS Node API Deprecated

// Vite 5 and earlier: CJS also supported
const { createServer } = require('vite');

// Vite 6: ESM only
import { createServer } from 'vite';

Migration Script

# Auto migration
npx vite-migrate@latest

# Manual verification
npx vite --version

Rolldown Integration Preparation

Vite 6 lays the foundation for future Rolldown integration.

flowchart TB
    subgraph Current["Current (Vite 6)"]
        esbuild_cur["esbuild<br/>(dev)"]
        Rollup_cur["Rollup<br/>(build)"]
    end

    subgraph Future["Future (Vite 7+)"]
        Rolldown["Rolldown (Rust)<br/>• Speed of esbuild<br/>• Compatibility of Rollup<br/>• Unified build pipeline"]
    end

    Current --> Future

Expected Benefits:

• Improved dev/prod consistency
• 3-5x build speed improvement
• Reduced memory usage

Framework Support

React + Vite 6

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      // React Compiler support
      babel: {
        plugins: [['babel-plugin-react-compiler', {}]],
      },
    }),
  ],
  environments: {
    client: {
      build: {
        target: 'esnext',
      },
    },
  },
});

Vue + Vite 6

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  environments: {
    client: {
      resolve: {
        alias: {
          '@': '/src',
        },
      },
    },
  },
});

Reference Links

• Vite 6.0 Release Notes
• Environment API RFC
• Rolldown Project
• Vite Migration Guide