Vite 开发启动为什么快

Vite 开发启动为什么快

Vite 在开发环境不会对所有 .vue 文件做“全量编译”，而是采用按需编译（on-demand / lazy transform）。下面说明 Vite 启动时做了什么、以及 .vue 文件何时编译。

Vite 启动时到底做了什么

1. 初始化 Dev Server

• 创建 Koa/Connect 中间件
• 注册插件（包含 @vitejs/plugin-vue）
• 构建依赖预打包缓存（optimizeDeps 可能会运行）
• 建立文件监听（HMR）

不会去处理任何源代码。

2. 不编译 .vue 文件，也不打包代码

只有当浏览器实际请求某个文件时，Vite 才会即时编译它。

• 不会提前把所有 Vue SFC 全部转换
• 不会像 Webpack 那样扫描所有依赖然后打包
• 不会构建 bundle

什么时候 .vue 文件会被编译

当浏览器第一次访问：

• http://localhost:5173/
• 加载 main.js
• main.js import 了 App.vue
• App.vue import 了其他组件…

Vite 会在请求链路被触发时，把当前请求的 .vue 文件变成 JS。

Vue SFC 编译流程（按需）

.vue → parse → 分离 template/script/style

• script → ES module
• template → render 函数（使用 @vue/compiler-dom）
• style → 作为 CSS 注入

并且这一切都在浏览器请求该文件时才发生。

为什么 Vite 启动特别快

因为：

• 不做打包
• 不做全量编译
• 不预处理 .vue
• 依赖预打包也只做一次，而且通常很快

和 Webpack 对比

项目	Vite	Webpack
启动时是否扫描所有文件	❌ 不会	✔ 会
启动时是否编译所有文件	❌ 不会	✔ 会
模块是否按需处理	✔ 是	❌ 否
HMR 速度	🚀 极快，仅编译当前组件	🐢 慢，全量重新构建

总结（一句话）

Vite 在开发模式不会对所有 Vue 文件进行全部编译，而是浏览器请求一个才编译一个（按需转换）。

如果你想，我可以给你画一个 Vite Vue 开发模式的整体流程图（非常清晰）。