Vite 初体验：开发服务器为什么能秒开

Vue 作者尤雨溪发布了新构建工具 Vite，npm run dev 几乎瞬间起来，改代码热更新也飞快，被震撼到了。

传统打包的痛点

Webpack 启动时要先从入口打包整个应用的所有模块，项目越大冷启动越慢，几十秒很常见。哪怕有 HMR，改一个文件也要重新构建相关依赖链。

Vite 的两条思路

1. 开发环境不打包，直接用浏览器原生 ESM

<script type="module" src="/main.js"></script>

浏览器自己会发起请求加载模块，Vite 只起一个 dev server 在中间做按需编译和返回——访问到哪个模块才编译哪个，启动时间与项目总规模解耦。

2. 依赖预构建用 esbuild

node_modules 里的第三方库（CommonJS、成百上千个小文件）不适合直接走原生 ESM，Vite 用 Go 写的 esbuild 提前打包成单个 ESM 模块，速度比 JS 写的打包器快 10~100 倍：

请求 /src/main.js      → Vite 即时编译返回
请求 .vue 文件         → 即时编译 SFC
请求 node_modules/vue  → 返回预构建好的单文件

HMR 为什么也快

热更新只让改动模块本身及其 HMR 边界失效，不用重新打包，与项目大小无关。

现状与边界

• 生产环境 Vite 仍用 Rollup 打包（ESM、成熟的代码分割），开发与生产两套引擎
• 目前必须用支持原生 ESM 的现代浏览器
• 不同依赖的 CJS/ESM 混用偶尔需要手动配 optimizeDeps

虽然还在早期，但开发体验是质变。已决定下一个新项目就用它。