Vite 学习路线 MOC
从零基础到可独立配置 Vite 开发与生产构建的系统学习路线：六阶段、依赖关系、逐篇目录与完成标准。
#type / moc
#type / synthesis
#status / growing
#tech / dev
#tech / dev / frontend
#resource / javascript
[!info] related notes
- 所属总入口：Vite MOC
- 对象介绍：Vite
- 阶段地图：Vite 基础 MOC · Vite 开发服务器与 HMR MOC · Vite 构建与优化 MOC · Vite 插件与 SSR MOC
- 相邻：前端工程化 MOC · JavaScript 学习路线 · React · Vue
Vite 学习路线 MOC
这个概念为什么出现
把 Vite 当成“更快的 webpack 替代品口诀”会制造假进度：会 pnpm dev 却不懂原生 ESM 按需编译，会配 proxy 却分不清 mode 与 NODE_ENV，会上插件却不懂 Rollup 钩子边界。本路线把「从零到可交付前端工程构建」拆成六个阶段。
[!abstract] 路线结论 先建立“开发用原生 ESM + 依赖预构建，生产用 Rollup 打包”的双路径模型，再掌握环境变量与 mode、路径别名与静态资源；随后进入 HMR 模块图与代理联调，再学生产构建优化与库模式，最后按需进入插件与 SSR。
整条路线围绕五个问题：
- 为什么冷启动可以快：按需编译而不是先打整包
- 依赖预构建（esbuild）解决什么兼容与性能问题
mode、.env*与import.meta.env如何协作- 开发服务器能力（HMR、proxy）与生产构建为何不是同一条管线
- 插件系统如何同时服务 dev 与 build
如何使用这份路线
| 场景 | 做法 |
|---|---|
| 从零开始 | 按阶段顺序；每步用官方模板跑通再改配置 |
| 已有 webpack 经验 | 重点补原生 ESM 开发模型，不要把 loader 思维硬套 |
| 框架使用者 | React/Vue 插件在阶段一后接入，细节回框架路线 |
| 只抓主干 | 看文末主干主题 |
难度标记
- L1 入门 · L2 基础 · L3 核心心智 · L4 工程优化 · L5 插件/SSR
依赖关系总图
flowchart TD
S1["阶段一 定位与双路径"] --> S2["阶段二 项目与环境"]
S2 --> S3["阶段三 开发服务器与 HMR"]
S3 --> S4["阶段四 生产构建与优化"]
S4 --> S5["阶段五 插件体系"]
S4 --> S6["阶段六 SSR 与库模式"]
S5 --> S6阶段与子 MOC 对照
| 阶段 | 目标 | 主要子 MOC |
|---|---|---|
| 一 | Vite 是什么、dev/build 分工 | Vite 基础 MOC |
| 二 | 脚手架、配置、别名、env/mode | Vite 基础 MOC |
| 三 | 开发服务器、代理、HMR | 开发服务器与 HMR MOC |
| 四 | Rollup 构建、分包、资源 | 构建与优化 MOC |
| 五 | 插件钩子与常用插件 | 插件与 SSR MOC |
| 六 | SSR、库模式、Monorepo 注意点 | 插件与 SSR MOC |
阶段一：定位与双路径模型
目标：能一句话说清 Vite 为什么快、生产为何仍打包。
完成标准：
- 能区分开发服务器与生产构建管线
- 能解释依赖预构建的动机
- 能创建并运行官方模板项目
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 1.1 | Vite | Vite 是什么、适合什么 | L1 | 否 |
| 1.2 | Vite 的设计动机 | 为何出现、相对打包器开发模式 | L2 | 建议 |
| 1.3 | 开发与构建双路径 | esbuild/原生 ESM vs Rollup | L3 | 建议 |
| 1.4 | Vite 概览（既有） | 能力清单速览 | L1 | 否 |
| 1.5 | Vite 基础知识（既有） | 生态对照 | L2 | 否 |
阶段二：项目结构、配置与环境
目标：能读懂并修改 vite.config，正确使用环境变量。
完成标准：
- 能配置
resolve.alias并与 TS paths 同步 - 能说明
mode与.env.[mode]加载顺序 - 能区分
import.meta.env.PROD与自定义VITE_*
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 2.1 | 安装 Vite 并运行第一个应用 | 脚手架闭环 | L1 | 否 |
| 2.2 | 配置与路径别名 | defineConfig 与 alias | L2 | 否 |
| 2.3 | Mode 模式（既有） | mode 指令开关 | L2 | 否 |
| 2.4 | 环境变量与 import.meta.env | 环境注入规则 | L3 | 建议 |
| 2.5 | 静态资源处理 | import 资源 vs public | L2 | 否 |
阶段三：开发服务器与 HMR
目标：会联调与理解热更新边界。
完成标准：
- 能配置 proxy 解决本地跨域联调
- 能解释模块图失效（invalidate）直觉
- 知道何时 HMR 会退化为整页刷新
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 3.1 | 开发服务器与代理 | server 配置 | L2 | 否 |
| 3.2 | HMR 与模块图 | 热更新如何精确失效 | L3 | 建议 |
| 3.3 | 依赖预构建 | optimizeDeps 动机 | L3 | 建议 |
阶段四：生产构建与优化
目标：能产出可部署产物并做基础体积治理。
完成标准：
- 能解释生产构建为何走 Rollup
- 能配置基础
build.rollupOptions分包意识 - 会用可视化工具观察 chunk
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 4.1 | 生产构建 | build 主线 | L2 | 否 |
| 4.2 | 代码分割与 chunk | 动态 import 与拆包 | L3 | 否 |
| 4.3 | 构建分析与优化 | 体积与缓存 | L3 | 否 |
阶段五：插件体系
目标：理解插件是 Vite 扩展点，会选不会造轮子优先。
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 5.1 | 插件系统 | Rollup 插件超集 | L4 | 建议 |
| 5.2 | 常用插件与框架集成 | React/Vue 等 | L2 | 否 |
阶段六：SSR、库模式与协作
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 6.1 | SSR 概览 | middlewareMode 等 | L4 | 建议 |
| 6.2 | 库模式构建 | 组件库产物 | L3 | 否 |
| 6.3 | Nx 与 env 冲突（既有） | monorepo 实战坑 | L3 | 否 |
如果只抓主干，优先这 6 个主题
0 到 1 的完成标准
- 能从官方模板启动 React 或 Vue 项目
- 能配置 alias、proxy 与多 mode 环境变量
- 能解释 dev 快与 prod 打包的原因
- 能完成一次生产构建并定位最大 chunk
- 知道插件扩展点，不把业务逻辑塞进魔法配置
认知跳跃提醒
- 把 Vite 只当 CLI 封装 → 先 1.2 / 1.3
- 混淆 mode 与 NODE_ENV → 先 2.3 / 2.4
- 未理解预构建就乱改 optimizeDeps → 先 3.3
- 未分析产物就谈微前端拆包 → 先 4.1 / 4.2
相关入口
自测题
- 为什么开发不预打包全部源码，却要预构建依赖？
import.meta.env.VITE_API未定义时行为是什么？
答案
- 源码按需编译可保持启动快；依赖往往是 CJS/大量模块图，预构建可转换格式并合并请求。
- 值为
undefined（不会自动抛错），因此需要约定与类型声明。