vite

config

vite.config.ts: defineConfig({ plugins: [react()], resolve: { alias: { '@': '/src' } }, build: { rollupOptions: {...} } }). Type-safe with defineConfig helper. Environment mode via --mode.

plugins

Official: @vitejs/plugin-react, @vitejs/plugin-vue, @vitejs/plugin-legacy. Community: vite-plugin-pwa, vite-plugin-svgr, vite-tsconfig-paths. vite.config.ts plugins array order matters.

HMR

Native ESM dev server — instant module updates. Full page reload only on file addition/deletion. import.meta.hot API for custom HMR boundaries. accept(), dispose(), invalidate().

CSS

PostCSS config auto-detected (postcss.config.js). CSS modules: *.module.css → styles.className. Pre-processors: npm i -D sass then *.scss. @import resolution built-in.

TypeScript

ESBuild transpilation (no type-checking). Use tsc --noEmit for type checking in CI. isolatedModules: true required. Path aliases mirror in tsconfig.json and vite.config.ts.

build optimizations

Rollup-based production build. Code splitting via manualChunks. CSS code splitting (per-entry CSS). Asset hashing. Tree-shaking. build.target for browser targets. build.minify (esbuild/terser).

SSR

vite.ssr() export. Node.js-compatible build. ssrLoadModule() for dev. ssrManifest for preload directives. Framework integrations: vike, @vitejs/plugin-react with react-dom/server.

environment variables

VITE_* prefix exposed via import.meta.env. Modes: development, production, custom. .env, .env.local, .env.[mode]. import.meta.env.SSR for server check.

multi-page

build.rollupOptions.input = { main: '/index.html', admin: '/admin/index.html' }. Shared config via build.rollupOptions. HTML entry points must be real files.

best practices

Use build.chunkSizeWarningLimit. Leverage optimizeDeps for pre-bundling. Enable build.sourcemap only in dev. Prefer import() for lazy routes. Use vite preview to test production build.