[!info] related notes

• 所属：插件与 SSR MOC
• 前置：插件系统
• 相邻：React · Vue

Vite 常用插件与框架集成

这个概念为什么出现

Vite 核心不绑定 UI 框架。核心已支持 JSX 转换；React Fast Refresh、Vue SFC 编译与框架 HMR 由相应插件集成。插件选错或叠加过多，会导致转换顺序混乱与启动变慢。

[!abstract] 一句话理解 框架官方插件补充框架编译与更新边界；工程插件只补缺口，保持最小集。

常见类别

类别	例子	职责
框架	@vitejs/plugin-react、@vitejs/plugin-vue	JSX/SFC/HMR
路径/资源	SVG 组件化等	资源变模块
质量分析	visualizer	产物观察
开发中间件	mock	按插件配置限制作用阶段，不假定自动排除生产

实践

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

1. 先选官方框架插件，核对其 Vite 版本范围；Vite 8 的 Rolldown 兼容层不保证所有旧 Rollup 插件行为不变
2. 再加确诊需要的分析/资源插件
3. 业务逻辑不要塞进插件

本节总结

插件是扩展点；默认集越小，行为越可预测。

自测题

1. 为什么 Vue SFC 不能“无插件硬跑”？

参考答案

.vue 不是浏览器原生模块，需要编译成 JS/render 函数并由 HMR 运行时协作。