# 什么是 Vite？

## 📖 概述

Vite 是新一代前端构建工具，由 Vue.js 作者尤雨溪创建。它利用浏览器原生 ES 模块和 esbuild 来实现极速的开发服务器和优化的生产构建。

## 🌟 核心特性

### 1. **极速开发服务器**
- 冷启动速度比 Webpack 快 10-50 倍
- 热模块替换（HMR）速度快
- 基于原生 ES 模块，无需打包

### 2. **优化的构建**
- 使用 esbuild 进行预构建，比传统打包器快 10-100 倍
- 代码分割和懒加载
- Tree Shaking 自动优化

### 3. **零配置**
- 开箱即用，无需复杂配置
- 合理的默认设置
- 支持 TypeScript、JSX、CSS 预处理器

### 4. **插件系统**
- 强大的插件生态
- 与 Rollup 兼容
- 可扩展性强

## 💻 基本使用

### 1. 创建项目

```bash
# 使用 npm
npm create vite@latest my-app -- --template vue
cd my-app
npm install

# 使用 pnpm
pnpm create vite my-app --template vue
```

### 2. 开发模式

```bash
npm run dev
# 启动开发服务器
```

### 3. 构建生产版本

```bash
npm run build
# 构建优化后的代码
```

### 4. 预览构建结果

```bash
npm run preview
# 本地预览构建产物
```

## ⚙️ 配置

### vite.config.js

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})
```

## 🎯 与其他工具对比

| 特性 | Vite | Webpack | Parcel |
|------|------|---------|--------|
| 冷启动 | 快 | 中 | 快 |
| HMR | 快 | 中 | 中 |
| 构建速度 | 快 | 慢 | 中 |
| 配置复杂度 | 低 | 高 | 低 |
| 生态 | 丰富 | 非常丰富 | 丰富 |

## ✅ 优缺点

### 优点
- ✅ 开发启动速度极快
- ✅ 构建性能优秀
- ✅ 配置简单
- ✅ 原生 ES 模块支持
- ✅ 插件系统强大
- ✅ Vue 官方推荐

### 缺点
- ❌ 相对较新，生态不如 Webpack 成熟
- ❌ 部分插件需要适配
- ❌ 生产构建基于 Rollup，需学习其生态

## 🎯 适用场景

- Vue 3 项目
- 需要快速开发的单页应用
- 对构建速度要求高的项目
- 现代化前端项目

## 📚 学习资源

- [Vite 官方文档](https://vitejs.dev/)
- [Vite 中文文档](https://cn.vitejs.dev/)
- [awesome-vite](https://github.com/vitejs/awesome-vite)

## 🔗 相关链接

- 在线预览：[Vite Demo](what-is-vite-demo.html)
- GitHub：[vitejs/vite](https://github.com/vitejs/vite)
- 官网：[vitejs.dev](https://vitejs.dev/)