Vite 6 Released - Environment API and New Architecture

Vite 6 Overview

In November 2024, Vite 6 was released. This version introduces a new architecture called Environment API, laying the foundation for future migration to Rolldown.

Reference: Vite 6.0 Announcement

Environment API

Concept

Client, SSR, edge workers, and other different environments can now be handled uniformly.

// vite.config.js
export default {
  environments: {
    client: {
      // Client configuration
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/entry-client.js'
        }
      }
    },
    ssr: {
      // SSR configuration
      build: {
        outDir: 'dist/server',
        rollupOptions: {
          input: 'src/entry-server.js'
        }
      }
    },
    edge: {
      // Edge worker configuration
      resolve: {
        conditions: ['edge', 'worker']
      }
    }
  }
}

Framework Integration

// API for framework developers
import { createServer } from 'vite'

const server = await createServer({
  environments: {
    client: {},
    ssr: {},
  }
})

// Load modules per environment
const clientModule = await server.environments.client.moduleGraph.getModuleById('/src/App.vue')
const ssrModule = await server.environments.ssr.moduleGraph.getModuleById('/src/App.vue')

Reference: Vite Environment API

Rolldown Preparation

Background

Vite is Rollup-based, but plans to migrate to Rust-based Rolldown in the future.

// Current: Rollup
// vite.config.js
export default {
  build: {
    rollupOptions: {
      // Compatibility will be maintained
    }
  }
}

// Future: Rolldown (will work with same configuration)

Gradual Migration

# Currently provided as experimental feature
VITE_USE_ROLLDOWN=true vite build

New Default Settings

resolve.conditions

// Vite 5
// resolve.conditions = ['module', 'browser', 'development|production']

// Vite 6 (new default)
export default {
  resolve: {
    conditions: ['module', 'browser', 'import']
  }
}

JSON stringify

// Vite 5: stringify by default
// Vite 6: off by default
export default {
  json: {
    stringify: false  // Import as object
  }
}

// Usage
import data from './data.json'
console.log(data.key)  // Tree-shaking works

Reference: Vite Configuration

CSS Improvements

CSS Modules

// vite.config.js
export default {
  css: {
    modules: {
      // More fine-grained control possible
      localsConvention: 'camelCase',
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
}

Lightning CSS

// Lightning CSS is now standard support
export default {
  css: {
    lightningcss: {
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15
      }
    }
  }
}

/* Native CSS nesting */
.card {
  background: white;

  &:hover {
    background: #f0f0f0;
  }

  & .title {
    font-size: 1.5rem;
  }
}

Performance Improvements

Build Speed

Dev Server

// Startup time improvement
// Vite 5: ~500ms
// Vite 6: ~350ms

// HMR improvement
// Vite 5: ~50ms
// Vite 6: ~30ms

Breaking Changes

Node.js Requirements

// package.json
{
  "engines": {
    "node": ">=18.0.0"  // Node.js 18+ required
  }
}

Deprecated API Removal

// Removed APIs
// - server.fs.strict (default true now)
// - optimizeDeps.disabled (use noDiscovery instead)

// New way
export default {
  optimizeDeps: {
    noDiscovery: true  // Disable automatic dependency discovery
  }
}

Plugin API

New Hooks

// vite-plugin-example.js
export default function myPlugin() {
  return {
    name: 'my-plugin',

    // New per-environment hooks
    configEnvironment(name, config) {
      if (name === 'ssr') {
        return {
          // SSR-specific configuration
        }
      }
    },

    // Environment resolution hook
    resolveId: {
      order: 'pre',
      handler(id, importer, options) {
        const { environment } = options
        if (environment.name === 'edge') {
          // Edge-specific resolution
        }
      }
    }
  }
}

Reference: Vite Plugin API

Migration

1. Update Dependencies

npm install vite@6

2. Check Configuration

// vite.config.js
export default {
  // json.stringify is now false by default
  json: {
    stringify: true  // To maintain previous behavior
  },

  // Explicit conditions specification recommended
  resolve: {
    conditions: ['module', 'browser', 'import']
  }
}

3. Run Codemod

npx @vite/codemod upgrade

Summary

Vite 6 is an important step toward next-generation build infrastructure.

• Environment API: Unified multi-environment support
• Rolldown Preparation: Preparation for migration to Rust-based bundler
• Performance: 15-25% build speed improvement
• CSS Improvements: Lightning CSS standard support

This is a particularly important release for framework developers, and end users should feel the performance improvements.