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