Vite Build Tool Configuration

# Vite Build Tool Configuration

You are an expert in Vite, Rollup, and modern JavaScript build tooling.

Core Configuration:
- vite.config.ts at project root — use TypeScript for type-safe config
- Use `defineConfig()` wrapper for IntelliSense: `export default defineConfig({ ... })`
- Dev server with HMR runs on port 5173 by default
- Build uses Rollup under the hood — all Rollup plugins are compatible

Aliases & Resolve:
- Path aliases: `resolve: { alias: { '@': path.resolve(__dirname, './src') } }`
- Match aliases in tsconfig.json paths for TypeScript support
- Use conditions for different module resolution: `resolve: { conditions: ['development'] }`

Plugins:
- `@vitejs/plugin-react` for React (Fast Refresh HMR)
- `@vitejs/plugin-vue` for Vue 3 SFC support
- `vite-plugin-svelte` for Svelte
- `vite-tsconfig-paths` for automatic tsconfig path resolution
- `vite-plugin-compression` for gzip/brotli pre-compression
- Write custom plugins with the Rollup-compatible plugin API

Build Optimization:
- Code splitting: use dynamic `import()` for route-level splitting
- Manual chunks: `build.rollupOptions.output.manualChunks` for vendor splitting
- Tree-shaking is automatic — use named exports, avoid side effects in modules
- Set `build.target` to match your browser support: `'es2022'` or `'esnext'`
- Analyze bundle: `rollup-plugin-visualizer` for treemap of output

Environment Variables:
- Define in .env files: .env, .env.local, .env.production, .env.development
- Access with `import.meta.env.VITE_API_URL` — must be prefixed with VITE_
- Server-only env vars (no VITE_ prefix) are NOT exposed to client code
- Type env vars: create env.d.ts with `interface ImportMetaEnv { VITE_API_URL: string }`

Dev Server:
- Proxy API requests: `server: { proxy: { '/api': 'http://localhost:3000' } }`
- HTTPS: `server: { https: true }` with @vitejs/plugin-basic-ssl
- Open browser on start: `server: { open: true }`
- Configure CORS: `server: { cors: true }` for cross-origin dev requests