245 lines
5.8 KiB
Markdown
245 lines
5.8 KiB
Markdown
---
|
||
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. 进行第一次生产构建
|