# vite原理：启动与构建流程
# 先看结论
Vite 的核心思想是：
- 开发环境：利用浏览器原生 ESM，按需编译，不做整包打包
- 生产环境：交给 Rollup 做完整打包优化
这就是它「开发快、生产稳」的底层原因。
# 开发启动时发生了什么
# 1）启动 Dev Server
vite dev 启动一个 Koa 风格中间件服务器（Connect 体系），监听请求。
# 2）浏览器先请求 index.html
Vite 会把 index.html 当作入口，不只是静态文件，还会注入 dev client：
- HMR 客户端脚本
- 资源路径重写逻辑
# 3）浏览器继续按 ESM 规则请求模块
例如 main.ts -> App.tsx -> utils.ts，浏览器会逐个发请求。
Vite 在服务端“实时转换”这些模块后返回。
# 4）依赖走预构建结果
像 react、vue 这类第三方依赖会先被 esbuild 预构建到 node_modules/.vite，避免反复解析 CommonJS 和深层依赖图。
# 为什么开发阶段更快
传统 bundler 启动时就要“全量打包”。
Vite 只转换浏览器当前访问到的模块，首屏只处理必要依赖，启动速度自然更快。
# 生产构建流程（vite build）
# 1）读取配置 + 插件
先把用户配置、插件链、环境变量全部归一化。
# 2）交给 Rollup 构建模块图
Rollup 做：
- Tree-shaking
- Chunk 划分
- 代码压缩
- 资源输出
# 3）输出 dist
生成带 hash 的 js/css/assets 文件，便于浏览器长期缓存。
# 开发与构建的职责分离
这点非常关键：
- esbuild：快，适合开发期转译和预构建
- Rollup：产物优化能力强，适合生产打包
Vite 不是二选一，而是把两者放到最合适的位置。
# 小结
理解 Vite 的关键不是背配置，而是理解这条主线：
开发期按需转换 + 生产期集中优化。
这一点决定了它和传统 webpack 全量编译模式的根本差异。