Vite 构建链路：开发服务器、预构建与生产产物

主题边界

Vite 的核心是把开发服务器和生产打包拆成两条链路：开发态按需转换，生产态交给 Rollup 构图与优化。
它不仅是 Vue 工具，也是一种现代前端构建组织方式。

机制与流程

开发态中，浏览器直接请求 ESM 模块；Vite 拦截请求，按插件链即时 transform 源文件。
依赖预构建使用 esbuild 把 CommonJS / 大量小模块转换成浏览器易消费的 ESM，降低冷启动与重复解析成本。
生产构建交给 Rollup 做模块图分析、代码分割、资源清单生成和产物优化；Vue SFC 通过插件拆成 script/template/style 多段参与处理。

关键差异

Webpack 更偏打包器主导的一体化开发体验；Vite 则让浏览器原生 ESM 承担开发期模块加载。
esbuild 在 Vite 中主要负责快，Rollup 主要负责最终产物质量和生态兼容。

边界条件

并不是所有依赖都适合原样作为开发态 ESM 暴露，CommonJS 包与深层依赖图经常需要预构建兜底。
插件执行顺序、虚拟模块和 SSR 构建模式会让调试复杂度明显上升。

工程落点

理解 Vite 链路可以解释冷启动慢、HMR 失效、依赖预构建缓存问题和生产包异常。
在大型项目中，别把 Vite 当黑盒；模块边界、别名、插件、副作用标记都会影响最终体验。

相关主题