---
tags: [DEV, VITE, build-tool, frontend]
create time: 2026-04-18
---

# Vite 构建工具

[配置详解](./配置详解.md) | [架构原理](./架构原理.md) | [优化实践](./优化实践.md)

## 概述

Vite 是下一代前端构建工具，以其极快的开发体验和优秀的生产构建性能著称。不同于传统构建工具的全量打包，Vite 利用浏览器原生 ES Module 能力，实现了真正的按需编译。

## 核心优势

🚀 **极速启动** - 无全量打包，启动时间 < 1s  
⚡ **闪电 HMR** - 模块级热更新，保持应用状态  
🎯 **统一工具链** - 开发/生产环境一致，配置简化  
🔌 **丰富生态** - 官方插件支持主流框架

## 快速开始

### 项目创建

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev
```

### 核心命令

| 命令 | 功能 | 使用场景 |
|------|------|----------|
| `npm run dev` | 启动开发服务器 | 日常开发调试 |
| `npm run build` | 生产环境构建 | 部署准备 |
| `npm run preview` | 预览构建产物 | 本地测试生产版本 |

## 核心概念

### 开发环境 vs 生产环境

```mermaid
graph LR
    A[浏览器请求] --> B{环境判断}
    B -->|开发| C[Dev Server]
    B -->|生产| D[静态文件]
    C --> E[ESM 按需编译]
    E --> F[即时响应]
    D --> G[CDN/HTTP 服务器]
```

### 构建流程对比

| 特性 | Vite | Webpack |
|------|------|---------|
| 启动速度 | < 1s | 10-30s |
| 热更新 | 模块级 < 100ms | 全量重编译 |
| 配置复杂度 | 低 | 高 |
| 构建产物 | Rollup 优化 | Webpack 打包 |

## 技术栈支持

### 前端框架
- ✅ React + TypeScript
- ✅ Vue 3 + TypeScript  
- ✅ Svelte + TypeScript
- ✅ Preact + TypeScript

### 构建特性
- 📦 ES Modules 原生支持
- 🎨 CSS 预处理器
- 🔧 TypeScript 开箱即用
- 📡 Asset 资源处理
- 🔄 Dynamic Import 支持

## 项目结构建议

```
project/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 组件
│   ├── hooks/           # 自定义 Hooks  
│   ├── lib/             # 工具库
│   ├── types/           # TypeScript 类型
│   ├── App.tsx          # 根组件
│   └── main.tsx         # 入口文件
├── public/              # 公共资源
├── vite.config.ts       # Vite 配置
└── tsconfig.json        # TypeScript 配置
```

## 基础配置示例

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components')
    }
  },
  server: {
    port: 3000,
    open: true
  }
})
```

## 常见配置场景

### TypeScript 项目
```typescript
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}
```

### 环境变量
```typescript
// .env.development
VITE_API_URL=http://localhost:8080/api
VITE_DEBUG_MODE=true
VITE_MOCK_DATA=true

// 使用方式
const apiUrl = import.meta.env.VITE_API_URL
```

## 生态工具

### 官方插件
- `@vitejs/plugin-vue` - Vue 支持
- `@vitejs/plugin-react` - React 支持  
- `@vitejs/plugin-legacy` - 传统浏览器兼容

### 推荐工具链
- **代码质量**: ESLint + Prettier
- **状态管理**: Zustand / Redux Toolkit
- **UI 组件**: Ant Design / MUI
- **路由**: React Router v6
- **HTTP 客户端**: Axios

## 学习路径

### 基础阶段
1. 掌握基本命令和配置
2. 理解开发/生产环境差异
3. 熟悉环境变量使用

### 进阶阶段  
1. 深入构建配置
2. 学习插件开发
3. 性能优化实践

### 高级阶段
1. 理解底层架构原理
2. 定制化解决方案
3. 大型项目工程化

## 技术特点

### 为什么选择 Vite？

1. **开发效率提升**
   - 零配置启动，开箱即用
   - 热更新速度快，大幅提升开发体验
   - 现代工具链，学习成本低

2. **构建性能优异**
   - 基于 Rollup 的高质量产出
   - 智能代码分割和 Tree-shaking
   - 生产环境高度优化

3. **生态社区活跃**
   - 官方支持和持续更新
   - 丰富的插件生态
   - 广泛的行业采用

## 与其他工具对比

| 工具 | 启动速度 | HMR 性能 | 构建质量 | 学习曲线 |
|------|----------|----------|----------|----------|
| Vite | ⚡⚡⚡ | ⚡⚡⚡ | ⚡⚡⚡ | ⚡⚡⚡ |
| Webpack | ⚡ | ⚡⚡ | ⚡⚡⚡ | ⚡ |
| Next.js | ⚡⚡ | ⚡⚡⚡ | ⚡⚡⚡ | ⚡⚡ |
| Parcel | ⚡⚡⚡ | ⚡⚡ | ⚡⚡ | ⚡⚡⚡ |

## 适用场景

### 推荐使用
- ✅ SPA 单页应用开发
- ✅ React/Vue 项目构建
- ✅ 中大型前端项目
- ✅ 需要快速开发迭代

### 需要评估
- 🤔 复杂的构建需求 (Web Workers, WASM)
- 🤔 高度定制化构建流程
- 🤔 遗留项目迁移成本

## 相关文档

- [[DEV/VITE/配置详解.md]] - 详细配置说明
- [[DEV/VITE/架构原理.md]] - 技术实现原理
- [[DEV/VITE/优化实践.md]] - 性能优化指南
- [[DEV/REACT/README.md]] - React 开发指南

## 技术资源

- [Vite 官方文档](https://vitejs.dev/)
- [Vite GitHub 仓库](https://github.com/vitejs/vite)
- [Vite 生态插件](https://github.com/vitejs/awesome-vite)

## 下一步行动

1. 创建一个新的 React + TypeScript 项目
2. 配置开发和生产环境
3. 实现 HMR 功能
4. 进行第一次生产构建