Vite
Based on Vite 8.0 stable (March 2026). Vite 8 uses Rolldown bundler and Oxc transformer, replacing esbuild + Rollup.
Vite is a next-generation frontend build tool with fast dev server (native ESM + HMR) and optimized production builds powered by Rolldown.
Key Vite 8 Changes
Vite 8 replaces the dual esbuild+Rollup architecture with Rolldown (unified Rust-based bundler) and Oxc (transformer/minifier). A compatibility layer auto-converts old esbuild and rollupOptions configs, but both are deprecated — always use the new names in new code:
| Deprecated (still works) | Replacement |
|---|
build.rollupOptions | build.rolldownOptions |
esbuild | oxc |
optimizeDeps.esbuildOptions | optimizeDeps.rolldownOptions |
build.minify: 'esbuild' | build.minify: 'oxc' (default) |
Preferences
- Use TypeScript: prefer
vite.config.ts - Always use ESM — avoid CommonJS
- Use
import.meta.dirname (ESM) not __dirname (CJS) in config files - Use
rolldownOptions not rollupOptions in new code - Use
oxc not esbuild in new code
Core
| Topic | Description | Reference |
|---|
| Configuration | vite.config.ts, defineConfig, conditional configs, loadEnv, new v8 options | core-config |
| Features | import.meta.glob, asset queries, import.meta.env, HMR API, CSS modules | core-features |
| Plugin API | Vite/Rolldown hooks, virtual modules, hook filters, plugin ordering | core-plugin-api |
Build & SSR
| Topic | Description | Reference |
|---|
| Build & SSR | Library mode, SSR middleware, ssrLoadModule, multi-page apps, JavaScript API | build-and-ssr |
Advanced
| Topic | Description | Reference |
|---|
| Environment API | Vite 6+ multi-environment support, custom runtimes | environment-api |
| Rolldown Migration | Vite 8 migration: complete esbuild→oxc and rollupOptions→rolldownOptions mapping, breaking changes | rolldown-migration |
Quick Reference
CLI Commands
vite # Start dev server
vite build # Production build
vite preview # Preview production build
vite build --ssr # SSR build
Common Config (Vite 8)
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [],
resolve: {
alias: { '@': '/src' },
tsconfigPaths: true, // New in v8: auto-resolve TS path aliases
},
server: {
port: 3000,
proxy: { '/api': 'http://localhost:8080' },
forwardConsole: true, // New in v8: browser logs → terminal
},
build: {
target: 'esnext',
outDir: 'dist',
rolldownOptions: {}, // NOT rollupOptions
},
oxc: { // NOT esbuild
jsx: {
runtime: 'automatic',
importSource: 'react',
},
},
})
Official Plugins
@vitejs/plugin-react v6 — React with Oxc transforms (Babel removed)@vitejs/plugin-react-swc — React with SWC@vitejs/plugin-vue — Vue 3 SFC support@vitejs/plugin-vue-jsx — Vue 3 JSX@vitejs/plugin-legacy — Legacy browser support
Oxc JSX Quick Reference
// React (automatic runtime — default)
oxc: { jsx: { runtime: 'automatic', importSource: 'react' } }
// Preact (automatic)
oxc: { jsx: { runtime: 'automatic', importSource: 'preact' } }
// Preact (classic with h/Fragment)
oxc: { jsx: { runtime: 'classic', pragma: 'h', pragmaFrag: 'Fragment' } }
// Auto-inject React import (legacy patterns)
oxc: { jsxInject: `import React from 'react'` }
