Vite 的工作流程

Vite 的工作流程基于其创新的 “预构建 + 按需加载” 机制，通过利用现代浏览器对原生 ES 模块的支持，显著提升了开发效率和构建速度。以下是其核心工作流程的详细分析：

一、开发环境工作流程

1. 启动开发服务器

冷启动：通过 npm run dev 命令启动本地开发服务器，Vite 会快速初始化并启动一个基于 Koa 的服务器，无需打包所有模块，因此启动速度极快。
预构建依赖：首次启动时，Vite 会对 node_modules 中的第三方依赖进行预构建（使用 esbuild），将 CommonJS 模块转换为 ESM 格式，并合并多个小文件以减少 HTTP 请求。预构建结果缓存到 node_modules/.vite 目录，后续启动直接复用。

2. 按需编译与请求拦截

入口解析：浏览器请求入口文件（如 index.html）时，Vite 解析 HTML 中的 <script type="module">，识别入口模块（如 main.js）。
动态编译：当浏览器请求某个模块（如 .vue 或 .ts 文件）时，Vite 拦截请求并根据文件类型实时编译：
- JavaScript/TypeScript：使用 esbuild 快速转换为浏览器兼容的 ESM 代码。
- Vue/Svelte 单文件组件：通过插件（如 @vitejs/plugin-vue）拆解模板、样式和逻辑，分别编译为 JavaScript 和 CSS。
- 静态资源：CSS、图片等文件通过特定插件处理（如添加哈希名或转换为 Base64）。

3. 热模块替换（HMR）

实时更新：修改文件后，Vite 仅重新编译变更的模块，并通过 WebSocket 通知浏览器更新，无需刷新页面。例如，修改 Vue 组件时，仅替换该组件的代码，保留应用状态。
优化策略：HMR 边界自动推断，避免 Webpack 中全量更新的性能问题。

二、生产环境工作流程

1. Rollup 打包

代码优化：通过 npm run build 触发 Rollup 打包，进行 Tree Shaking、代码压缩（Terser）和代码分割，生成优化的静态文件（输出至 dist 目录）。
静态资源处理：CSS 提取为独立文件，图片等资源根据配置选择内联或外部引用。

2. 预构建缓存复用

依赖复用：生产构建时复用开发环境预构建的依赖缓存，减少重复编译时间。

三、核心机制解析

1. 原生 ESM 支持

浏览器直接加载 ESM 模块，Vite 仅作为中间层处理模块请求，实现真正的按需加载。

2. 插件系统

扩展能力：通过插件（如 vite-plugin-pwa）支持 PWA、SSR 等场景。插件可拦截请求、修改编译结果或扩展配置。

常用插件示例：

// vite.config.js
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';export default defineConfig({plugins: [vue(),legacy({ targets: ['defaults'] }) // 兼容旧浏览器]
});

3. 配置灵活性

别名与路径解析：支持自定义别名（如 @ 指向 src 目录）和扩展名自动补全。

代理与服务器配置：开发服务器支持 HTTPS、端口设置和 API 请求代理。

// vite.config.js
export default defineConfig({server: {port: 3000,proxy: {'/api': { target: 'http://localhost:8000', changeOrigin: true }}}
});

四、Vite 与 Webpack 的对比

特性	Vite	Webpack
启动速度	毫秒级（按需编译）	慢（全量打包）
HMR 效率	仅更新变更模块	需重新打包依赖链
生产构建	Rollup（轻量高效）	自建打包（功能全面但较重）
生态兼容性	快速成长，支持主流框架	成熟，插件丰富