第一章：Vite 简介¶

什么是 Vite？¶

Vite 是由 Vue 作者尤雨溪开发的下一代前端构建工具。

┌─────────────────────────────────────────────────────────────┐
│                    Vite 架构                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  开发模式：                                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │               浏览器                                  │   │
│  │  ┌───────────────────────────────────────────────┐ │   │
│  │  │  ES Module 原生加载                            │ │   │
│  │  │  按需编译                                      │ │   │
│  │  └───────────────────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                 │
│                           ▼                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │               Dev Server                             │   │
│  │  ┌───────────────────────────────────────────────┐ │   │
│  │  │  esbuild (Go) - 极速编译                       │ │   │
│  │  │  HMR 热更新                                    │ │   │
│  │  └───────────────────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  生产模式：                                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │               Rollup                                 │   │
│  │  ┌───────────────────────────────────────────────┐ │   │
│  │  │  Tree-shaking                                  │ │   │
│  │  │  代码分割                                      │ │   │
│  │  │  CSS 代码分割                                  │ │   │
│  │  └───────────────────────────────────────────────┘ │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

特点¶

开发模式¶

开发模式特点：
- 极速冷启动：无需打包，直接启动
- 即时热更新：HMR 毫秒级响应
- 按需编译：只编译当前页面需要的代码
- ES Module：利用浏览器原生模块

生产模式¶

生产模式特点：
- Rollup 打包：优化的生产构建
- Tree-shaking：自动移除未使用代码
- 代码分割：自动分割代码块
- CSS 代码分割：优化 CSS 加载

快速开始¶

创建项目¶

# npm
npm create vite@latest my-app

# yarn
yarn create vite my-app

# pnpm
pnpm create vite my-app

选择模板¶

# Vue
npm create vite@latest my-vue-app -- --template vue

# React
npm create vite@latest my-react-app -- --template react

# TypeScript
npm create vite@latest my-app -- --template vue-ts

启动项目¶

cd my-app
npm install
npm run dev

与 Webpack 对比¶

特性	Vite	Webpack
启动速度	毫秒级	秒级
HMR 速度	极快	较慢
配置复杂度	简单	复杂
生态系统	较新	成熟

小结¶

Vite 基础概念：

架构：开发模式用 esbuild，生产模式用 Rollup
特点：极速冷启动、即时热更新、按需编译
快速开始：npm create vite@latest
对比：比 Webpack 更快更简单

下一章我们将学习项目配置。