第一章：Vite 概述与核心概念
1.1 什么是 Vite
Vite（法语意为"快速"，发音 /vit/）是一个新一代前端构建工具，由 Vue.js 作者尤雨溪开发。它旨在解决传统构建工具（如 Webpack）在开发体验上的痛点。
核心定位
- 开发服务器：提供极速的冷启动和热更新
- 生产构建：基于 Rollup 的高效打包
- 框架无关：支持 Vue、React、Svelte、Solid 等主流框架
1.2 为什么需要 Vite
传统构建工具的瓶颈
在 Webpack、Parcel 等工具中：
- 冷启动慢：需要递归打包所有模块才能启动开发服务器
- 热更新慢：修改代码后，重建整个依赖图，随着项目规模增长，HMR 时间线性增长
- 配置复杂：需要大量配置才能支持各种功能
Vite 的解决思路
利用浏览器原生 ES Modules (ESM)：
- 开发环境：将应用分为依赖 和源码两类
- 依赖：使用 esbuild 预构建，一次处理
- 源码：直接通过浏览器请求，按需编译
1.3 Vite 的核心特性
① 极速的冷启动
传统工具：打包所有模块 → 启动服务器
Vite：启动服务器 → 浏览器请求时按需编译② 轻量快速的热更新
- 基于 ESM 的 HMR 边界精确
- 更新速度与项目规模解耦
③ 开箱即用的功能
- TypeScript
- JSX/TSX
- CSS 预处理器（Less/Sass/SCSS）
- CSS Modules
- 静态资源处理
④ 强大的插件系统
- 兼容 Rollup 插件生态
- 丰富的官方和社区插件
⑤ 优化的生产构建
- 基于 Rollup 的智能分包
- 预加载指令自动注入
- CSS 代码分割
1.4 Vite vs 其他构建工具
| 特性 | Vite | Webpack | Parcel |
|---|---|---|---|
| 冷启动速度 | 极快（<1s） | 慢（分钟级） | 中等 |
| HMR 速度 | 极快 | 随项目增长变慢 | 快 |
| 配置复杂度 | 低 | 高 | 极低 |
| 插件生态 | 丰富（兼容 Rollup） | 最丰富 | 有限 |
| 生产构建 | Rollup（成熟） | 成熟 | 成熟 |
| 学习曲线 | 平缓 | 陡峭 | 平缓 |
1.5 适用场景
最适合
- 现代前端应用（SPA、SSR）
- 组件库开发
- 快速原型开发
- 框架无关的项目
不太适合
- 需要兼容 IE11 的项目（Vite 默认支持现代浏览器）
- 需要特殊构建流程的传统项目
1.6 技术栈依赖
- Node.js：16+ 版本
- 浏览器：支持 ES Modules 的现代浏览器
- 包管理器：npm/yarn/pnpm 任意
1.7 快速体验
bash
# 创建项目
npm create vite@latest my-app -- --template vue
# 进入目录
cd my-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev访问 http://localhost:5173，修改任意文件，观察极速的热更新。
本章小结
Vite 通过利用浏览器原生 ESM 和智能预构建，重新定义了前端开发体验。它的核心思想是：
- 开发时：按需编译，启动即用
- 构建时：利用成熟工具（Rollup）保证生产质量
下一章将深入 Vite 的内部工作原理。