Vite 生态全景：从构建工具到前端基座

Vite 发布三年，围绕它已经长出一整套生态。盘点一下当前版图。

核心能力回顾

• 开发：原生 ESM 按需编译 + esbuild 依赖预构建
• 构建：Rollup 生产打包，开箱支持 TS、JSX、CSS 代码分割
• 统一的插件 API（兼容 Rollup 插件接口），dev 和 build 共用逻辑

上层框架整合

几乎所有主流框架的官方脚手架都已切到 Vite：

• Vue：create-vue、Nuxt 3/4（Nitro）
• React：各种模板、Next.js 仍自研但 Remix、其他 SSG 大量使用
• Svelte：SvelteKit
• Solid：SolidStart；Preact、Qwik 等也都以 Vite 为底层

npm create vite@latest 选框架即得标准化模板，社区认知已统一。

SSR / SSG 方案

• SSR：Vite 提供 ssrLoadModule 和服务端构建模式，Vue/React 官方指南都有示例
• SSG：VitePress（Vue 驱动的文档站，本博客文档也可以用）、Astro（群岛架构，内容站首选之一）、iles
• 全栈元框架：Nuxt、SvelteKit、Analog（Angular）等在 Vite 之上补齐路由、服务端、部署

后端与全栈

• Vite 的能力被用于 dev server 中间件模式，可接入自定义后端（express、Nest 等）
• 环境模式 .env、多环境构建已标准化

测试

• Vitest：与 Vite 同配置、同转换管线的单测框架，watch 极快，API 兼容 Jest，已成为 Vite 系项目测试标配
• 组件测试配合 @vue/test-utils、Testing Library；E2E 仍交给 Playwright/Cypress

插件生态

官方和社区插件覆盖：PWA、压缩、legacy 浏览器支持（@vitejs/plugin-legacy 自动注入 polyfill）、imagemin、checker（类型检查独立进程）、bundle 分析（rollup-plugin-visualizer）等。写插件就是配置一组 Rollup 风格钩子，门槛很低。

选型提醒

• Vite 适合绝大多数应用；极致特殊的构建需求再评估其他方案
• 库开发用 Vite 的 library mode 很方便（多格式输出 + dts）
• monorepo 中 Vitest + Vite 的组合能大幅提速

三年时间，Vite 完成了从"尤大的实验项目"到"整个前端行业的公共基座"的转变。理解它的插件和配置模型，投入产出比非常高。