[!info] 关联笔记

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

Vite 常用插件与框架集成

这个概念为什么出现

Vite 核心不绑定 UI 框架。React 的 JSX/Refresh、Vue 的 SFC/HMR，都通过插件接入。插件选错或叠加过多，会导致转换顺序混乱与启动变慢。

[!abstract] 一句话理解 框架官方插件负责“语言/模板→JS”的主转换；工程插件只补缺口，保持最小集。

常见类别

类别	例子	职责
框架	@vitejs/plugin-react、@vitejs/plugin-vue	JSX/SFC/HMR
路径/资源	SVG 组件化等	资源变模块
质量分析	visualizer	产物观察
开发中间件	mock	仅 dev

实践

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

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

1. 先官方框架插件
2. 再加确诊需要的分析/资源插件
3. 业务逻辑不要塞进插件

本节总结

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

自测题

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

参考答案

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