vite 通过浏览器原生 esm、按需编译和依赖预构建三层机制实现极速开发体验：仅编译当前请求模块，预构建缓存第三方依赖，结合智能文件监听与精准 hmr，冷启动约1–2秒，变更响应达毫秒级。
Vite 实现增量构建提升速度，核心不靠“全量重编”，而是利用浏览器原生 ESM + 按需编译 + 依赖预构建三层机制协同工作。它在开发阶段根本不存在传统意义上的“增量构建”概念——因为压根没做全量打包，也就无所谓“增量”。真正起效的是按需转换和缓存复用。
按需编译：只处理当前请求的模块
浏览器访问页面时发起 ES import 请求（如 import { useStore } from '@/store'），Vite 开发服务器会实时拦截该请求，仅对 src/store/index.ts 及其直接依赖做类型检查、TS 编译、CSS 处理等，返回转换后的 ESM 模块。其他未被引用的代码完全不参与编译流程。
- 修改一个组件文件，只有该组件及其被 import 的子模块重新处理，不影响其余 99% 的源码
- 路由懒加载（
const Home = () => import('./Home.vue')）进一步隔离影响范围，未访问的页面模块永不编译 - 热更新（HMR）也是基于此机制：只推送变更模块的更新补丁，无需刷新整个页面
依赖预构建缓存：跳过重复转换
node_modules 中的第三方依赖（尤其是 CommonJS 格式）首次启动时由 esbuild 统一转成 ESM，并缓存到 node_modules/.vite。后续启动只要满足以下任一条件未变，就直接复用缓存：
-
package.json中dependencies版本或列表未变动 - 对应依赖包内文件内容未被修改（如本地 patch 或 symlink）
-
vite.config.js中影响预构建的配置项（如define、resolve.alias、optimizeDeps）未更改
这个缓存不是“构建产物缓存”，而是“转换结果缓存”，复用后冷启动可稳定控制在 1–2 秒内。
精准控制预构建范围：避免无效工作
默认预构建可能漏掉动态导入的子路径（如 monaco-editor/esm/vs/editor/editor.api），或误处理已为 ESM 的轻量包（如 vue、dayjs）。通过显式配置可大幅缩短首次启动耗时：
- 在
optimizeDeps.include中添加确需预构建的大体积/CJS 包（如'lodash-es'、'@ant-design/icons-vue'） - 在
optimizeDeps.exclude中排除已支持 ESM 且无副作用的包（查package.json的"type": "module"或"exports"字段） - 避免模糊写法（如
'monaco-editor'），改用精确子路径，防止整包打包拖慢首次构建
文件系统监听与快速响应
Vite 使用高效的文件监听库（如 chokidar），结合依赖图关系做智能脏检查：
- 仅当某模块内容变化时，才标记其所有下游依赖为“待更新”
- HMR 更新链路极短：源码变更 → 触发模块重编译 → 推送更新 → 浏览器执行 HMR 回调
- 不依赖 webpack 那种递归遍历整个依赖图的分析过程，响应延迟通常在毫秒级
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
