核心特性
Vite 的设计哲学和关键技术特性
极速开发服务器
基于ESM的开发服务器，无需打包，冷启动时间极快。支持热模块替换(HMR)，修改代码后立即更新。
优化构建
生产环境使用Rollup进行打包，支持代码分割、Tree Shaking、CSS代码分割等优化特性。
原生ES模块
开发时直接使用浏览器原生ES模块，无需打包，启动速度极快。按需编译，只编译当前页面需要的模块。
丰富的插件系统
基于Rollup插件接口，同时扩展了Vite特有的API。支持React、Vue、Svelte等框架的官方插件。
生态系统
围绕 Vite 构建的完整工具链
框架支持
官方支持React、Vue、Svelte、Lit、Preact等主流框架。通过@vitejs/plugin-react等插件提供开箱即用的支持。
测试工具
Vitest是Vite原生测试框架，共享Vite的配置和插件系统。支持单元测试、组件测试，性能优异。
文档工具
VitePress是基于Vite的静态站点生成器，用于构建快速、美观的文档网站。Vue官方文档即使用VitePress构建。
CSS处理
内置CSS模块、PostCSS、Sass/Less/Stylus支持。支持CSS代码分割、CSS变量等现代CSS特性。
依赖优化
自动预构建依赖项（node_modules），将CommonJS模块转换为ESM，提升加载性能。
环境变量
支持.env文件加载环境变量，区分开发和生产环境。支持TypeScript类型定义。
快速入门
# 创建Vite项目
npm create vite@latest my-app -- --template react
# 进入项目目录
cd my-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run preview配置示例
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
},
build: {
outDir: 'dist',
sourcemap: true
},
css: {
modules: {
localsConvention: 'camelCase'
}
}
})学习资源
与其他构建工具对比
vs Webpack
Vite开发服务器启动时间比Webpack快10-100倍。HMR更新速度更快，配置更简单。Webpack生态更成熟，适合复杂项目。
vs Parcel
两者都是零配置构建工具。Vite基于ESM，Parcel基于多核编译。Vite性能更好，Parcel配置更简单。
vs esbuild
esbuild是底层打包器，Vite使用esbuild进行依赖预构建。Vite提供完整开发体验，esbuild专注打包性能。