Vite
下一代前端构建工具：开发期用原生 ESM 按需编译，生产期交给 Rollup 打包。
Vite
Vite 把工作拆成两半来绕开「应用越大启动越慢」的老问题：
| 阶段 | 对象 | 做法 |
|---|---|---|
| 开发 | 依赖（几乎不变的库） | 用原生工具预构建一次，之后一直复用 |
| 开发 | 源码（频繁改动的业务代码） | 走原生 ESM，浏览器要哪个模块才编哪个 |
| 生产 | 全部 | 交给 Rollup 打包，做 tree-shaking / 压缩 / 分包 |
为什么快
传统打包器要在浏览器看到任何东西之前把整个应用处理一遍 —— 应用越大等得越久。 Vite 开发期不打包：启动时几乎不做工作，改一行只重新编译那一个模块。
依赖预构建（Dependency Pre-Bundling）
浏览器不认识裸模块导入：
import { someMethod } from 'my-dep' // 浏览器里会直接报错Vite 会扫描源码里所有这类导入，然后：
- 把 CommonJS / UMD 转成 ESM（浏览器只认 ESM）；
- 把多个小模块合并成一个文件（比如 lodash 内部几百个文件 → 一次请求）；
- 把导入路径重写成合法 URL，如
/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd。
缓存
· 文件系统缓存：node_modules/.vite/deps，依赖没变就不重复预构建；
· 浏览器缓存：预构建结果带内容 hash 的查询参数，依赖变了 URL 就变，天然破缓存。
强制重建
vite --force # 或直接删掉 node_modules/.vite依赖出错、装了新包却没生效时用这个。