Vite

Vite

Overview

Vite is a next-generation frontend build tool providing instant dev server startup via native ES modules and optimized Rollup-based production builds. It supports React, Vue, Svelte, and vanilla TypeScript projects with advanced bundling strategies, plugin extensibility, and library mode.

Instructions

• When setting up a project, create vite.config.ts with the appropriate framework plugin (@vitejs/plugin-react, @vitejs/plugin-vue), configure resolve.alias with @ mapping to src/, and set environment variables with VITE_ prefix.
• When configuring the dev server, set up API proxying with server.proxy, enable HTTPS with @vitejs/plugin-basic-ssl, and use server.watch polling for containers or VMs.
• When optimizing builds, configure manual chunks with build.rollupOptions.output.manualChunks for vendor splitting, enable CSS code splitting, and set build.target for browser compatibility.
• When creating plugins, use the Rollup-compatible plugin API with resolveId, load, and transform hooks, and leverage virtual modules with the virtual: prefix.
• When building libraries, configure build.lib with entry point and output formats (es, cjs, umd), externalize peer dependencies, and use vite-plugin-dts for TypeScript declaration generation.
• When migrating from Webpack, replace webpack.config.js with vite.config.ts, swap loaders for Vite plugins, and update REACT_APP_* env vars to VITE_*.
• When integrating testing, use Vitest which shares Vite config and provides instant HMR for tests.

Examples

Example 1: Migrate a Create React App project to Vite

User request: "Convert my CRA project to use Vite instead"

Actions:

1. Install Vite and @vitejs/plugin-react, remove react-scripts
2. Create vite.config.ts with React plugin and path aliases
3. Rename REACT_APP_* environment variables to VITE_*
4. Update index.html to reference the entry module directly

Output: A Vite-powered React project with faster dev startup and HMR.

Example 2: Configure optimized production build

User request: "Set up Vite build with vendor chunk splitting and source maps for Sentry"

Actions:

1. Configure build.rollupOptions.output.manualChunks to separate vendor libraries
2. Enable build.sourcemap for error monitoring integration
3. Set build.target appropriate to browser support requirements
4. Add build.assetsInlineLimit tuning for small asset optimization

Output: An optimized production build configuration with proper chunk splitting and debugging support.

Guidelines

• Always use import.meta.env.VITE_* for client-exposed env vars, never process.env.
• Configure resolve.alias with @ prefix mapping to src/ for clean imports.
• Split vendor chunks manually when default chunking produces too many small files.
• Use build.target: "esnext" for modern-only apps, @vitejs/plugin-legacy for legacy browser support.
• Enable build.sourcemap in production for error monitoring tools.
• Keep vite.config.ts clean by extracting complex plugin configs into separate files.
• Use optimizeDeps.include to pre-bundle problematic dependencies that break during dev.