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. 进行第一次生产构建
|