vitejs/vite-plugin-react 是什么？

vite-plugin-react 是 Vite 官方维护的 React 插件仓库，包含 @vitejs/plugin-react、@vitejs/plugin-react-swc 和 @vitejs/plugin-rsc 三个包。本文基于仓库文档和发布记录，说明它们各自解决什么问题、如何配置，以及哪些场景下不该选它。

vitejs/vite-plugin-react 可以商用吗？

可以。MIT 是宽松许可证：你可以使用、修改并销售基于它的软件，只需保留版权和许可证声明。

vitejs/vite-plugin-react 还在维护吗？

在维护。仓库最近一次提交在 1 天前。

vitejs/vite-plugin-react 是用什么编程语言写的？

主要是 TypeScript（依据 GitHub 的语言统计）。

vite-plugin-react 官方插件解析：Babel、SWC 与 RSC 的职责边界

Q: vitejs/vite-plugin-react 还在维护吗？

在维护。仓库最近一次提交在 1 天前。

秒懂

它是什么？: vite-plugin-react 是 Vite 官方维护的 React 插件仓库，包含 @vitejs/plugin-react、@vitejs/plugin-react-swc 和 @vitejs/plugin-rsc 三个包。本文基于仓库文档和发布记录，说明它们各自解决什么问题、如何配置，以及哪些场景下不该选它。
适合谁用？: 如果你是 Vite 用户且项目基于 React，官方插件是默认选择。@vitejs/plugin-react 适合需要 Babel 插件生态或自定义 JSX 转换的团队，@vitejs/plugin-react-swc 适合追求编译速度且依赖较少的项目，@vitejs/plugin-rsc 则只面向 React Server Components 的实验性探索。
能商用吗？: 可以。MIT 是宽松许可证：你可以使用、修改并销售基于它的软件，只需保留版权和许可证声明。
还在维护吗？: 在维护。仓库最近一次提交在 1 天前。
用什么语言写的？: 主要是 TypeScript（依据 GitHub 的语言统计）。

以上回答依据项目的 GitHub 数据（最近同步于 2026年9月14日）和我们的分析，不构成法律意见。

开源项目深度解析

Hysen Labs 编辑部 · 2026年8月8日 · vitejs/vite-plugin-react

一个仓库，三个包，各自解决不同问题

vitejs/vite-plugin-react 不是单一插件，而是一个包含三个独立 npm 包的仓库。@vitejs/plugin-react 提供基于 Babel 的 JSX/TSX 转换和 Fast Refresh，@vitejs/plugin-react-swc 用 SWC 替代 Babel 做同样的工作，@vitejs/plugin-rsc 则针对 React Server Components。仓库根 README 只列出包名和链接，没有额外说明，这意味着每个包的文档才是真正的使用入口。对工程师来说，第一步要决定的不是用不用这个仓库，而是选哪个包。

Fast Refresh 是核心，但实现路径不同

两个 React 插件都提供 Fast Refresh，但底层机制完全不同。@vitejs/plugin-react 依赖 Babel 对 JSX 和 TSX 进行转换，在编译过程中注入 Fast Refresh 所需的运行时标识。@vitejs/plugin-react-swc 则用 SWC 完成同样的转换，SWC 是用 Rust 写的，编译速度通常更快。README 没有给出性能对比数字，但从实现语言可以推断，SWC 版本的目标是减少编译耗时。代价是 SWC 的插件生态远不如 Babel 丰富，如果你依赖某个 Babel 插件做代码转换，@vitejs/plugin-react 是唯一选择。

配置方式：从安装到接入的实际命令

两个包的 README 都位于 packages 子目录下，仓库根 README 没有给出安装命令。根据 npm 包的一般用法，你需要在 Vite 配置文件中引入插件。以 @vitejs/plugin-react 为例，典型做法是安装后在 vite.config.ts 中导入 react 函数并加入 plugins 数组。@vitejs/plugin-react-swc 的接入方式类似，只是导入路径不同。具体配置键如 jsxRuntime、babel 或 swc 选项，都写在各包自己的 README 里，本文无法引用未提供的细节。实际使用时，请以对应包的文档为准，而不是依赖仓库根 README。

plugin-rsc：面向 React Server Components 的实验通道

@vitejs/plugin-rsc 是仓库中的第三个包，版本号 0.5.34，前缀 0.x 说明它尚未稳定。这个包针对 React Server Components，这是 React 团队提出的服务端组件模型，与传统的客户端渲染完全不同。RSC 涉及服务端与客户端的边界划分，插件需要处理组件在不同环境下的编译方式。由于版本号仍为 0.x，API 可能随时变化，生产环境采用需要谨慎。如果你的项目没有使用 RSC，这个包完全不需要。

维护节奏与版本信号

仓库最近一次推送是 2026 年 8 月 28 日，同一天发布了 plugin-react@6.1.1，一周前发布 6.1.0。plugin-rsc 在 8 月 7 日发布 0.5.34。这种发布频率说明仓库处于活跃维护状态。6.x 版本号意味着 plugin-react 已经过了大版本迭代，API 相对稳定。但注意，仓库根 README 没有列出 Node.js 版本要求、Vite 版本兼容范围或 React 版本限制，这些信息只能从各包的 README 或 CHANGELOG 中获取。升级插件前，你应该检查 CHANGELOG 中是否有破坏性变更。

许可证和采用成本

整个仓库以 MIT 许可证发布，这意味着你可以自由使用、修改和分发，包括商业用途。许可证文本在根目录的 LICENSE 文件中。采用这些插件没有额外的授权费用，但维护成本体现在版本跟进上。Vite 和 React 都在快速迭代，插件需要同步适配。如果 Vite 发布新主版本，插件可能需要更新才能兼容。你的团队需要定期关注这些包的发布记录，并测试升级后的构建结果。对于不熟悉 Babel 或 SWC 配置的开发者，调试转换层的问题可能比调试业务代码更耗时。

替代方案：直接使用 Vite 原生能力或 Next.js

如果你不想引入这些插件，Vite 本身对 React 的支持并不完整，JSX 转换和 Fast Refresh 需要插件提供。另一个替代方案是使用 Next.js，它内置了 React 编译和 RSC 支持，不需要单独配置 Vite 插件。但 Next.js 是完整的框架，带来路由、数据获取等约定，比 Vite 加插件的组合更重。如果你的项目只需要 Vite 的轻量构建，且不想学习框架约定，那么官方插件是合理路径。如果项目已经使用 Next.js，那么 vite-plugin-react 几乎没有用武之地。

编辑结论

如果你是 Vite 用户且项目基于 React，官方插件是默认选择。@vitejs/plugin-react 适合需要 Babel 插件生态或自定义 JSX 转换的团队，@vitejs/plugin-react-swc 适合追求编译速度且依赖较少的项目，@vitejs/plugin-rsc 则只面向 React Server Components 的实验性探索。不需要 React 的 Vite 项目、或者已经深度使用其他构建链的团队，都不该引入这些包。采用前先确认你的 React 版本与 Vite 版本是否在插件支持的范围内，并查看对应包的 README 和 CHANGELOG，因为 Fast Refresh 的边界条件和 SWC 的配置项会随版本变化。

官方来源

社区笔记