Vite

定义

Vite 是一款现代前端构建工具,由 Vue 作者尤雨溪发起,但其设计与具体框架无关。它由开发服务器与生产构建两部分组成,核心目标是在开发阶段提供近乎即时的启动与热更新体验,同时输出经过优化的生产产物。[1]

原理

Vite 在开发模式下利用浏览器对原生 ES 模块(ESM)的支持,采用按需编译策略:不预先打包整个应用,而是在浏览器请求某个模块时才即时转换并返回该模块,因此项目规模对启动时间影响极小。第三方依赖则由 esbuild 预先打包以减少请求数。其热模块替换(HMR)基于 ESM,更新精准且快速。在生产构建阶段,Vite 默认使用 Rollup 进行打包,以获得更成熟的代码分割与优化能力。

特点

优点包括:开发服务器启动迅速、热更新延迟低;配置简洁、开箱即用;通过插件机制兼容 Rollup 生态;对 TypeScript、JSX、CSS 预处理器等支持完善。其权衡在于:开发与生产分别由不同工具链驱动(esbuild/原生 ESM 与 Rollup),少数情况下需关注两者行为差异;对极旧浏览器的开发期支持有限。

应用

Vite 已成为众多框架的默认或推荐构建工具,广泛用于 Vue、React、Svelte、Solid 等项目,并被 SvelteKit、Astro、Nuxt 等元框架采用为底层构建基础。它适合从小型组件库到大型单页应用的广泛场景。