Vite 官方中文文档

下一代前端工具链的核心定位

Vite（法语意为“快速”）是一个面向现代浏览器的前端构建工具。它由 Vue.js 作者尤雨溪主导开发，但并不仅限于 Vue 生态，React、Svelte、Lit 等框架均可无缝接入。其核心设计思路是：利用浏览器原生 ES Module 支持，将开发环境的启动速度与热更新效率提升到传统打包工具难以企及的水平。

开发服务器：按需编译而非全量打包

传统构建工具（如 Webpack）在启动开发服务器前，需要先将整个应用打包成一个或多个 bundle。随着项目规模增长，这一过程的耗时呈线性甚至超线性上升。Vite 的做法是：

• 依赖预构建：使用 esbuild 将 node_modules 中的第三方依赖预先转换为 ESM 格式并缓存，这一过程通常在几十毫秒到数秒内完成。
• 源码按需服务：应用源码以原生 ESM 形式直接提供给浏览器，仅在浏览器请求某个模块时才进行编译，而非启动时全量处理。
• 热模块替换（HMR）：仅失效并重新请求受影响的模块链，更新速度与项目总规模基本解耦。

这种架构带来的直接结果是：即使在中大型项目中，开发服务器的冷启动通常也能控制在数百毫秒级别。

生产构建：Rollup 驱动的优化输出

开发阶段的“快”并不意味着生产输出的妥协。Vite 的生产构建默认基于 Rollup，负责完成以下工作：

构建配置通过 vite.config.js 统一管理，开发与生产环境共享同一份基础配置，减少上下文切换成本。

插件生态与框架支持

Vite 的插件 API 基于 Rollup 扩展而来，同时兼容大部分 Rollup 插件。核心插件由官方维护，包括：

• @vitejs/plugin-vue：Vue 单文件组件支持
• @vitejs/plugin-react：React Fast Refresh 与自动 JSX 运行时
• @vitejs/plugin-legacy：传统浏览器兼容

社区插件覆盖了从 CSS 预处理器、图片压缩到 PWA 支持等常见需求。此外，Vitest（基于 Vite 的测试框架）和 VitePress（静态站点生成器）进一步将同一套工具链延伸至测试与文档场景。

适用场景与接入建议

Vite 最适合以下情况：

1. 新项目启动：无历史包袱，可直接享受原生 ESM 开发体验。
2. 中大型单页应用：开发服务器性能不随项目规模显著退化。
3. 组件库 / 库开发：提供库模式（Library Mode），可输出 ESM 与 UMD 格式。
4. 框架无关的轻量项目：即使不使用前端框架，也可作为纯静态资源服务器与构建工具使用。

对于已有 Webpack 项目的迁移，Vite 提供了 @vitejs/plugin-legacy 与渐进式迁移路径，但迁移成本取决于项目对 Webpack 特有 loader 和配置的依赖深度。建议先在独立分支或子应用中验证兼容性，再决定是否全面切换。