Vite 的设计动机

从打包器开发模式的启动与 HMR 瓶颈解释 Vite 为何采用原生 ESM 开发服务器与依赖预构建。

#synthesis #growing #frontend #javascript

[!info] related notes

对象：Vite

路线：Vite 学习路线 MOC

后续：开发与构建双路径 · 依赖预构建 · HMR 与模块图

Vite 的设计动机

这个概念为什么出现

当应用从“几个 jQuery 文件”长成“数千模块的组件树”后，传统打包器开发模式（先打包再服务）会在两个体验上失真：

冷启动：改一行也要等整图构建思路的残余成本，或至少处理巨大依赖图
热更新：模块变了却难以精确只让相关边界失效，HMR 变慢甚至整页刷新

Vite 的回答不是“把同一条打包管线优化 10%”，而是承认：开发时浏览器已经能理解 ESM，源码可以按需编译；生产环境才需要为缓存、兼容与部署做打包。

[!abstract] 一句话理解 Vite 把“开发反馈速度”和“生产产物约束”拆开优化：开发以原生 ESM 按需服务源码，预构建依赖；生产生成可部署的 bundle。

最小可对照示例

场景：订单后台从 3 个页面长到 300 个路由模块

在需要先构建完整入口依赖图的开发模式中，模块数量增长可能拉长冷启动；HMR 的成本还取决于缓存与更新边界，不能仅按工具名称判断。下面不是完整 Vite 源码，而是开发请求路径的对照模型：浏览器直接请求模块，工具按请求转换源码及其导入链，也可能提前预热模块。

传统打包器开发（简化）:
  源码 + 依赖 ──打包/构建图──> 大 bundle ──> 浏览器

Vite 开发（简化）:
  浏览器 ──GET /src/pages/OrderList.tsx──> Vite 按需转换 ──> 浏览器
  浏览器 ──GET /node_modules/.vite/deps/vue.js──> 预构建依赖（缓存）

建议观察：

pnpm create vite demo-order --template vue-ts
cd demo-order && pnpm i && pnpm dev
# 打开 Network：Vue 模板源码以 .ts/.vue 模块形式请求，而非单一 app.js 巨包

期望现象：

首屏只转换入口链路相关模块；
修改单个组件时，多数情况下局部 HMR，而不是全量重打包心智。

结合场景再看三个关注点

按需：使用动态 import 的路由可延后加载；静态导入的页面即使尚未访问，也在入口依赖链中。
依赖预构建：node_modules 里 CJS/巨型包不适合直接当上千次 ESM 请求。
生产仍打包：上线要少请求、强缓存、tree-shake——这是生产构建路径的职责。

核心概念与准确模型

压力	设计选择	直接收益	代价/边界
冷启动慢	源码原生 ESM + 按需编译	启动与页面切换反馈快	需现代浏览器/dev 目标
依赖请求风暴	依赖预构建	合并与转换依赖	要理解 optimizeDeps 缓存
HMR 不准	模块图精确失效	局部更新	特定边界仍会 full reload
生产质量	生产打包	生态与拆包成熟	dev/prod 行为可能有差，需验证

设计动机

承认平台能力变化：浏览器 ESM 已足够支撑 dev 主路径。
用对的工具做对的阶段：Vite 7 及以前标准实现使用 esbuild + Rollup；Vite 8 用 Rolldown 统一预构建与打包，并用 Oxc 转换 JS/TS，双路径职责仍保留。
统一插件体验：尽量让插件在 dev/build 间复用，降低工具分裂。

常见误区

[!warning] 常见误区：Vite = 只是更快的 Webpack 速度是结果；模型变化才是原因。把 loader 全家桶心智原样搬来，会错过 ESM 按需与预构建边界。

工程实践

新建项目优先官方模板，先跑通再加代理与别名。
任何“dev 正常 prod 挂”优先对比双路径差异，而不是只调一个 flag。
与框架集成时，Vite 核心支持 JS/TS/JSX 转换；框架插件补充 Vue SFC 编译、React Fast Refresh 等集成。

本节总结

Vite 的设计起点是开发服务器模型的换代，不是皮肤级性能补丁。理解动机后，再读双路径、预构建与 HMR 才不会变成配置备忘录。

自测题

为什么依赖要预构建，而业务源码开发时按需编译？
为什么生产还需要打包？

参考答案

业务源码常改、应按需；依赖少改但模块多/格式杂，预构建可缓存并降请求。
生产要考虑 HTTP 请求数、缓存粒度、tree-shaking 与部署兼容，打包仍更合适。

延伸阅读与资料来源

资料	类型	支撑内容
Vite Guide	官方文档	为什么构建、主特性
Vite Features	官方文档	能力边界