文章目录前言一、为什么要理解插件体系1.1 很多能力本质上都来自插件1.2 插件解决的不是“写法问题”而是“构建流程问题”二、Vite 插件和 Rollup 插件是什么关系2.1 Vite 插件兼容 Rollup 插件思路2.2 为什么 Vite 不能只用 Rollup 插件2.3 和 Webpack loader / plugin 的关系怎么理解三、常见插件钩子怎么理解3.1 config3.2 resolveId3.3 load3.4 transform3.5 transformIndexHtml3.6 configureServer四、Vue 项目里常见的官方与社区插件4.1 vitejs/plugin-vue4.2 vitejs/plugin-vue-jsx4.3 vitejs/plugin-legacy4.4 自动导入unplugin-auto-import4.5 组件自动注册unplugin-vue-components4.6 压缩与分析类插件五、自动导入和组件自动注册的原理5.1 自动导入不是魔法5.2 组件自动注册也类似六、写一个最小可用的自定义插件6.1 注入一个虚拟模块6.2 HTML 模板变量注入七、configureServer 能做什么7.1 给 dev server 挂一个本地接口7.2 它和 server.proxy 的区别八、插件使用时最常见的坑8.1 插件顺序影响结果8.2 不要把所有事都交给插件8.3 开发钩子和构建钩子不是一回事8.4 插件问题要先分清是 Vite、插件还是业务代码九、面试聚焦9.1 写过或读过 Vite 插件吗9.2 如何在 Vite 里做 HTML 模板变量注入9.3 自动导入 vue、components 的原理是什么十、易混淆点十一、思考与练习总结前言前两篇已经讲清楚了 Vite 的原理和常见配置但真正把 Vite 用顺手往往还要再往前一步理解插件体系。因为很多“开箱即用”的能力本质上都是插件在工作比如 Vue 单文件组件支持、老浏览器兼容、自动导入、组件按需加载。本篇聚焦Vite 的插件体系与常用插件实践讲清楚Vite 插件和 Rollup 插件是什么关系常见插件钩子各自负责什么阶段社区里高频插件怎么选、怎么理解它们在做什么一、为什么要理解插件体系1.1 很多能力本质上都来自插件很多人第一次接触 Vite会觉得它“配置少、开箱即用”但这并不意味着它什么都内建了。很多能力其实是通过插件完成的例如Vue 项目里的.vue文件解析React 项目里的 Fast Refresh老浏览器兼容自动导入ref、computed组件库按需引入也就是说插件体系就是 Vite 的扩展接口。1.2 插件解决的不是“写法问题”而是“构建流程问题”当你遇到下面这些需求时通常就已经进入插件的适用范围想在读取模块前改写导入路径想把某类文件转成 JS 模块想在 dev server 启动时挂一个自定义接口想在构建时注入变量、生成文件、分析产物这些都不是普通业务代码能解决的而是构建链路层面的工作。二、Vite 插件和 Rollup 插件是什么关系2.1 Vite 插件兼容 Rollup 插件思路Vite 的插件体系并不是完全凭空造的一套它很大程度上兼容了 Rollup 插件钩子。可以先记一句话Vite 插件服务于开发阶段 生产构建阶段Rollup 插件主要服务于打包阶段因为 Vite 的生产构建本来就基于 Rollup所以很多 Rollup 插件思路可以直接迁移过来。2.2 为什么 Vite 不能只用 Rollup 插件因为 Vite 不只有 build还有 dev server。Rollup 更偏向读取模块转换模块参与打包输出但 Vite 在开发环境还需要处理浏览器模块请求HMRdev server 中间件HTML 入口处理所以 Vite 在 Rollup 插件能力之上又补了一些更偏开发期的能力比如configureServer、transformIndexHtml。2.3 和 Webpack loader / plugin 的关系怎么理解如果你之前学过 Webpack可以这样类比Vite / Rollup 能力更像 Webpack 的什么load/transformloaderconfig/buildStart/generateBundlepluginconfigureServerdevServer扩展但这只是帮助理解不能一一机械对应。Vite 的插件模型比 Webpack 的 loader/plugin 分工更统一一些。三、常见插件钩子怎么理解3.1config这个钩子用于读取和修改 Vite 配置。importtype{PluginOption}fromvitefunctiondemoPlugin():PluginOption{return{name:demo-plugin,config(config,env){console.log(config)console.log(env.mode)}}}它适合做按环境补充配置修改默认配置为插件自身准备上下文3.2resolveId这个钩子负责“模块路径解析”。functionvirtualModulePlugin(){return{name:virtual-module-plugin,resolveId(id:string){if(idvirtual:app-info){returnid}returnnull}}}典型用途虚拟模块别名增强自定义导入路径规则3.3load如果resolveId告诉 Vite “这个模块我认识”那load就可以返回模块内容。functionvirtualModulePlugin(){return{name:virtual-module-plugin,resolveId(id:string){if(idvirtual:app-info)returnidreturnnull},load(id:string){if(idvirtual:app-info){returnexport const appName demo-app}returnnull}}}这样业务代码里就能直接写import{appName}fromvirtual:app-info3.4transform这是最常见的插件钩子之一用来改写模块源码。functionreplaceFlagPlugin(){return{name:replace-flag-plugin,transform(code:string,id:string){if(id.endsWith(.ts)){returncode.replace(/__APP_VERSION__/g,1.0.0)}returnnull}}}它适合做源码替换自定义语法转换编译时注入常量3.5transformIndexHtml这个钩子用于处理入口 HTML。functionhtmlTitlePlugin(title:string){return{name:html-title-plugin,transformIndexHtml(html:string){returnhtml.replace(titleVite App/title,title${title}/title)}}}它很适合注入 HTML 模板变量动态修改标题、meta插入脚本片段3.6configureServer这是 Vite 特有、很偏开发环境的钩子。functionmockTimePlugin(){return{name:mock-time-plugin,configureServer(server:any){server.middlewares.use(/__time,(_req,res){res.setHeader(Content-Type,application/json)res.end(JSON.stringify({now:Date.now()}))})}}}它适合本地 mock 接口添加开发调试中间件扩展 dev server 行为四、Vue 项目里常见的官方与社区插件4.1vitejs/plugin-vue这是 Vue 项目的基础插件。importvuefromvitejs/plugin-vueexportdefault{plugins:[vue()]}它主要负责解析.vue单文件组件模板编译SFC 的 HMR如果没有它Vite 不会自动认识.vue文件。4.2vitejs/plugin-vue-jsx如果项目里要写 Vue JSX / TSX可以加这个插件。importvuefromvitejs/plugin-vueimportvueJsxfromvitejs/plugin-vue-jsxexportdefault{plugins:[vue(),vueJsx()]}适合组件库渲染函数较多的项目TSX 场景4.3vitejs/plugin-legacy这个插件用于给旧浏览器提供兼容支持。importlegacyfromvitejs/plugin-legacyexportdefault{plugins:[legacy({targets:[defaults,not IE 11]})]}它常见于需要兼容较旧浏览器的后台系统对现代 ESM 环境不完全放心的项目但要注意兼容范围越大产物体积和复杂度通常也会增加。4.4 自动导入unplugin-auto-import很多项目不想在每个文件里都手动写import{ref,computed,onMounted}fromvue就会用自动导入插件importAutoImportfromunplugin-auto-import/viteexportdefault{plugins:[AutoImport({imports:[vue,vue-router,pinia]})]}它的本质不是“运行时自动存在”而是在编译阶段帮你补 import。4.5 组件自动注册unplugin-vue-componentsimportComponentsfromunplugin-vue-components/viteexportdefault{plugins:[Components()]}它适合组件数量多的项目UI 组件库按需引入希望减少重复 import 的团队配合 resolver还能自动引入 Element Plus、Naive UI 等组件库。4.6 压缩与分析类插件常见思路包括构建产物可视化分析gzip / brotli 压缩图片压缩比如产物分析常见的是import{visualizer}fromrollup-plugin-visualizerexportdefault{plugins:[visualizer()]}严格来说这类更偏构建阶段但在 Vite 里同样通过插件接入。五、自动导入和组件自动注册的原理5.1 自动导入不是魔法比如你在代码里写constcountref(0)却没有手动写import{ref}fromvue自动导入插件会在编译阶段扫描到ref然后给当前模块补上对应导入。可以把它理解成插件在transform阶段把源码改写成import{ref}fromvueconstcountref(0)5.2 组件自动注册也类似在模板里直接写template ElButton typeprimary提交/ElButton /template插件会分析模板和组件名根据配置自动补全导入逻辑或者配合 resolver 找到正确的组件路径。所以这类插件的核心都不是“运行时神奇识别”而是构建时做静态分析和代码注入。六、写一个最小可用的自定义插件6.1 注入一个虚拟模块这是理解插件最适合的例子之一。// plugins/appInfo.tsimporttype{PluginOption}fromviteexportfunctionappInfoPlugin():PluginOption{constvirtualModuleIdvirtual:app-inforeturn{name:app-info-plugin,resolveId(id){if(idvirtualModuleId){returnid}returnnull},load(id){if(idvirtualModuleId){returnexport const appName admin-system export const buildTime ${newDate().toISOString()}}returnnull}}}配置里接入// vite.config.tsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueimport{appInfoPlugin}from./plugins/appInfoexportdefaultdefineConfig({plugins:[vue(),appInfoPlugin()]})业务代码里使用import{appName,buildTime}fromvirtual:app-infoconsole.log(appName,buildTime)这类插件非常适合注入构建信息注入版本号注入环境描述6.2 HTML 模板变量注入如果你想在 Vite 里做 HTML 模板变量注入可以直接用transformIndexHtmlimporttype{PluginOption}fromviteexportfunctionhtmlEnvPlugin(title:string):PluginOption{return{name:html-env-plugin,transformIndexHtml(html){returnhtml.replace(%APP_TITLE%,title)}}}index.html!doctypehtmlhtmllangzh-CNheadmetacharsetUTF-8/title%APP_TITLE%/title/headbodydividapp/divscripttypemodulesrc/src/main.ts/script/body/html这比在运行时再改document.title更接近构建层面的处理方式。七、configureServer能做什么7.1 给 dev server 挂一个本地接口importtype{PluginOption}fromviteexportfunctionmockApiPlugin():PluginOption{return{name:mock-api-plugin,configureServer(server){server.middlewares.use(/api/mock-user,(_req,res){res.setHeader(Content-Type,application/json)res.end(JSON.stringify({id:1,name:Vite User}))})}}}这样开发时就能直接访问/api/mock-user7.2 它和server.proxy的区别server.proxy把请求转发给真实后端configureServer你自己在 dev server 内部接管逻辑所以要联调真实接口用proxy要做本地调试、mock、小工具接口用configureServer八、插件使用时最常见的坑8.1 插件顺序影响结果Vite 插件是有执行顺序的某些插件需要先于另一些插件工作。如果顺序不对可能出现导入没有被正确解析代码转换失效自动导入和组件解析打架所以遇到插件问题时除了看配置本身也要看顺序。8.2 不要把所有事都交给插件插件很强但不代表能无限堆。如果一个项目里自动导入很多层自动注册很多层构建期替换很多层分析、压缩、mock 全部堆满会带来两个问题配置理解成本高出问题时排查链路更复杂原则上插件是为了解决重复性和构建层问题不是为了炫技。8.3 开发钩子和构建钩子不是一回事有些钩子更偏开发期有些更偏构建期不能混着理解。例如configureServer开发期transformIndexHtml开发和构建都可能参与generateBundle更偏构建输出期如果你发现某个插件“开发生效构建不生效”很可能就是钩子选错了。8.4 插件问题要先分清是 Vite、插件还是业务代码调试时建议先问自己三件事这个能力是不是插件负责的是开发期有问题还是构建后有问题去掉插件后项目是否恢复正常这样比直接怀疑“Vite 有 bug”更高效。九、面试聚焦9.1 写过或读过 Vite 插件吗如果没实际写过完整插件至少要能讲清Vite 插件兼容很多 Rollup 钩子常见的resolveId、load、transform是做什么的configureServer可以扩展 dev server自动导入、组件按需本质上都是编译期转换9.2 如何在 Vite 里做 HTML 模板变量注入常见做法是用transformIndexHtml在构建或开发阶段对index.html进行字符串替换或标签注入。9.3 自动导入 vue、components 的原理是什么本质是插件在编译阶段扫描源码或模板自动补全 import 或组件解析逻辑不是运行时自动出现。十、易混淆点Vite 插件不等于只服务 build很多插件同时作用于开发和构建。Rollup 插件能复用不代表完全等价Vite 还有 dev server 和 HTML 处理能力。自动导入不是运行时全局变量它本质是编译期补 import。configureServer不是线上接口方案它只在本地开发服务器里生效。插件越多不一定越高级过度堆插件会增加维护和排错成本。十一、思考与练习1.为什么说很多 Vite 能力本质上都是插件在工作解析因为像 Vue SFC 解析、老浏览器兼容、自动导入、组件自动注册等能力并不是业务代码天然拥有的而是通过插件接入构建链实现的。2.resolveId、load、transform三个钩子可以怎么串起来理解解析resolveId负责认模块load负责给出模块内容transform负责改写模块代码它们共同参与模块处理流程。3.为什么自动导入插件不是“魔法”解析因为它不是运行时凭空拿到 API而是在编译阶段扫描标识符并补充真实的 import 语句。4.什么时候更适合用configureServer而不是proxy解析当你需要在本地开发环境里直接扩展 dev server比如做 mock、小型调试接口、开发中间件时更适合用configureServer。5.自定义插件最适合从什么类型的需求开始练手解析最适合从虚拟模块、构建信息注入、HTML 标题替换这类边界清晰、可验证的小需求开始。总结插件定位Vite 的扩展能力核心很多开箱能力本质上都来自插件理解主线先区分开发期与构建期再理解resolveId、load、transform等钩子常见实践Vue 插件、legacy、自动导入、组件自动注册、产物分析都是高频场景自定义插件入门优先从虚拟模块和 HTML 注入这类小插件开始实战原则插件解决构建层问题够用就好不要无节制堆叠
插件体系与常用插件
文章目录前言一、为什么要理解插件体系1.1 很多能力本质上都来自插件1.2 插件解决的不是“写法问题”而是“构建流程问题”二、Vite 插件和 Rollup 插件是什么关系2.1 Vite 插件兼容 Rollup 插件思路2.2 为什么 Vite 不能只用 Rollup 插件2.3 和 Webpack loader / plugin 的关系怎么理解三、常见插件钩子怎么理解3.1 config3.2 resolveId3.3 load3.4 transform3.5 transformIndexHtml3.6 configureServer四、Vue 项目里常见的官方与社区插件4.1 vitejs/plugin-vue4.2 vitejs/plugin-vue-jsx4.3 vitejs/plugin-legacy4.4 自动导入unplugin-auto-import4.5 组件自动注册unplugin-vue-components4.6 压缩与分析类插件五、自动导入和组件自动注册的原理5.1 自动导入不是魔法5.2 组件自动注册也类似六、写一个最小可用的自定义插件6.1 注入一个虚拟模块6.2 HTML 模板变量注入七、configureServer 能做什么7.1 给 dev server 挂一个本地接口7.2 它和 server.proxy 的区别八、插件使用时最常见的坑8.1 插件顺序影响结果8.2 不要把所有事都交给插件8.3 开发钩子和构建钩子不是一回事8.4 插件问题要先分清是 Vite、插件还是业务代码九、面试聚焦9.1 写过或读过 Vite 插件吗9.2 如何在 Vite 里做 HTML 模板变量注入9.3 自动导入 vue、components 的原理是什么十、易混淆点十一、思考与练习总结前言前两篇已经讲清楚了 Vite 的原理和常见配置但真正把 Vite 用顺手往往还要再往前一步理解插件体系。因为很多“开箱即用”的能力本质上都是插件在工作比如 Vue 单文件组件支持、老浏览器兼容、自动导入、组件按需加载。本篇聚焦Vite 的插件体系与常用插件实践讲清楚Vite 插件和 Rollup 插件是什么关系常见插件钩子各自负责什么阶段社区里高频插件怎么选、怎么理解它们在做什么一、为什么要理解插件体系1.1 很多能力本质上都来自插件很多人第一次接触 Vite会觉得它“配置少、开箱即用”但这并不意味着它什么都内建了。很多能力其实是通过插件完成的例如Vue 项目里的.vue文件解析React 项目里的 Fast Refresh老浏览器兼容自动导入ref、computed组件库按需引入也就是说插件体系就是 Vite 的扩展接口。1.2 插件解决的不是“写法问题”而是“构建流程问题”当你遇到下面这些需求时通常就已经进入插件的适用范围想在读取模块前改写导入路径想把某类文件转成 JS 模块想在 dev server 启动时挂一个自定义接口想在构建时注入变量、生成文件、分析产物这些都不是普通业务代码能解决的而是构建链路层面的工作。二、Vite 插件和 Rollup 插件是什么关系2.1 Vite 插件兼容 Rollup 插件思路Vite 的插件体系并不是完全凭空造的一套它很大程度上兼容了 Rollup 插件钩子。可以先记一句话Vite 插件服务于开发阶段 生产构建阶段Rollup 插件主要服务于打包阶段因为 Vite 的生产构建本来就基于 Rollup所以很多 Rollup 插件思路可以直接迁移过来。2.2 为什么 Vite 不能只用 Rollup 插件因为 Vite 不只有 build还有 dev server。Rollup 更偏向读取模块转换模块参与打包输出但 Vite 在开发环境还需要处理浏览器模块请求HMRdev server 中间件HTML 入口处理所以 Vite 在 Rollup 插件能力之上又补了一些更偏开发期的能力比如configureServer、transformIndexHtml。2.3 和 Webpack loader / plugin 的关系怎么理解如果你之前学过 Webpack可以这样类比Vite / Rollup 能力更像 Webpack 的什么load/transformloaderconfig/buildStart/generateBundlepluginconfigureServerdevServer扩展但这只是帮助理解不能一一机械对应。Vite 的插件模型比 Webpack 的 loader/plugin 分工更统一一些。三、常见插件钩子怎么理解3.1config这个钩子用于读取和修改 Vite 配置。importtype{PluginOption}fromvitefunctiondemoPlugin():PluginOption{return{name:demo-plugin,config(config,env){console.log(config)console.log(env.mode)}}}它适合做按环境补充配置修改默认配置为插件自身准备上下文3.2resolveId这个钩子负责“模块路径解析”。functionvirtualModulePlugin(){return{name:virtual-module-plugin,resolveId(id:string){if(idvirtual:app-info){returnid}returnnull}}}典型用途虚拟模块别名增强自定义导入路径规则3.3load如果resolveId告诉 Vite “这个模块我认识”那load就可以返回模块内容。functionvirtualModulePlugin(){return{name:virtual-module-plugin,resolveId(id:string){if(idvirtual:app-info)returnidreturnnull},load(id:string){if(idvirtual:app-info){returnexport const appName demo-app}returnnull}}}这样业务代码里就能直接写import{appName}fromvirtual:app-info3.4transform这是最常见的插件钩子之一用来改写模块源码。functionreplaceFlagPlugin(){return{name:replace-flag-plugin,transform(code:string,id:string){if(id.endsWith(.ts)){returncode.replace(/__APP_VERSION__/g,1.0.0)}returnnull}}}它适合做源码替换自定义语法转换编译时注入常量3.5transformIndexHtml这个钩子用于处理入口 HTML。functionhtmlTitlePlugin(title:string){return{name:html-title-plugin,transformIndexHtml(html:string){returnhtml.replace(titleVite App/title,title${title}/title)}}}它很适合注入 HTML 模板变量动态修改标题、meta插入脚本片段3.6configureServer这是 Vite 特有、很偏开发环境的钩子。functionmockTimePlugin(){return{name:mock-time-plugin,configureServer(server:any){server.middlewares.use(/__time,(_req,res){res.setHeader(Content-Type,application/json)res.end(JSON.stringify({now:Date.now()}))})}}}它适合本地 mock 接口添加开发调试中间件扩展 dev server 行为四、Vue 项目里常见的官方与社区插件4.1vitejs/plugin-vue这是 Vue 项目的基础插件。importvuefromvitejs/plugin-vueexportdefault{plugins:[vue()]}它主要负责解析.vue单文件组件模板编译SFC 的 HMR如果没有它Vite 不会自动认识.vue文件。4.2vitejs/plugin-vue-jsx如果项目里要写 Vue JSX / TSX可以加这个插件。importvuefromvitejs/plugin-vueimportvueJsxfromvitejs/plugin-vue-jsxexportdefault{plugins:[vue(),vueJsx()]}适合组件库渲染函数较多的项目TSX 场景4.3vitejs/plugin-legacy这个插件用于给旧浏览器提供兼容支持。importlegacyfromvitejs/plugin-legacyexportdefault{plugins:[legacy({targets:[defaults,not IE 11]})]}它常见于需要兼容较旧浏览器的后台系统对现代 ESM 环境不完全放心的项目但要注意兼容范围越大产物体积和复杂度通常也会增加。4.4 自动导入unplugin-auto-import很多项目不想在每个文件里都手动写import{ref,computed,onMounted}fromvue就会用自动导入插件importAutoImportfromunplugin-auto-import/viteexportdefault{plugins:[AutoImport({imports:[vue,vue-router,pinia]})]}它的本质不是“运行时自动存在”而是在编译阶段帮你补 import。4.5 组件自动注册unplugin-vue-componentsimportComponentsfromunplugin-vue-components/viteexportdefault{plugins:[Components()]}它适合组件数量多的项目UI 组件库按需引入希望减少重复 import 的团队配合 resolver还能自动引入 Element Plus、Naive UI 等组件库。4.6 压缩与分析类插件常见思路包括构建产物可视化分析gzip / brotli 压缩图片压缩比如产物分析常见的是import{visualizer}fromrollup-plugin-visualizerexportdefault{plugins:[visualizer()]}严格来说这类更偏构建阶段但在 Vite 里同样通过插件接入。五、自动导入和组件自动注册的原理5.1 自动导入不是魔法比如你在代码里写constcountref(0)却没有手动写import{ref}fromvue自动导入插件会在编译阶段扫描到ref然后给当前模块补上对应导入。可以把它理解成插件在transform阶段把源码改写成import{ref}fromvueconstcountref(0)5.2 组件自动注册也类似在模板里直接写template ElButton typeprimary提交/ElButton /template插件会分析模板和组件名根据配置自动补全导入逻辑或者配合 resolver 找到正确的组件路径。所以这类插件的核心都不是“运行时神奇识别”而是构建时做静态分析和代码注入。六、写一个最小可用的自定义插件6.1 注入一个虚拟模块这是理解插件最适合的例子之一。// plugins/appInfo.tsimporttype{PluginOption}fromviteexportfunctionappInfoPlugin():PluginOption{constvirtualModuleIdvirtual:app-inforeturn{name:app-info-plugin,resolveId(id){if(idvirtualModuleId){returnid}returnnull},load(id){if(idvirtualModuleId){returnexport const appName admin-system export const buildTime ${newDate().toISOString()}}returnnull}}}配置里接入// vite.config.tsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueimport{appInfoPlugin}from./plugins/appInfoexportdefaultdefineConfig({plugins:[vue(),appInfoPlugin()]})业务代码里使用import{appName,buildTime}fromvirtual:app-infoconsole.log(appName,buildTime)这类插件非常适合注入构建信息注入版本号注入环境描述6.2 HTML 模板变量注入如果你想在 Vite 里做 HTML 模板变量注入可以直接用transformIndexHtmlimporttype{PluginOption}fromviteexportfunctionhtmlEnvPlugin(title:string):PluginOption{return{name:html-env-plugin,transformIndexHtml(html){returnhtml.replace(%APP_TITLE%,title)}}}index.html!doctypehtmlhtmllangzh-CNheadmetacharsetUTF-8/title%APP_TITLE%/title/headbodydividapp/divscripttypemodulesrc/src/main.ts/script/body/html这比在运行时再改document.title更接近构建层面的处理方式。七、configureServer能做什么7.1 给 dev server 挂一个本地接口importtype{PluginOption}fromviteexportfunctionmockApiPlugin():PluginOption{return{name:mock-api-plugin,configureServer(server){server.middlewares.use(/api/mock-user,(_req,res){res.setHeader(Content-Type,application/json)res.end(JSON.stringify({id:1,name:Vite User}))})}}}这样开发时就能直接访问/api/mock-user7.2 它和server.proxy的区别server.proxy把请求转发给真实后端configureServer你自己在 dev server 内部接管逻辑所以要联调真实接口用proxy要做本地调试、mock、小工具接口用configureServer八、插件使用时最常见的坑8.1 插件顺序影响结果Vite 插件是有执行顺序的某些插件需要先于另一些插件工作。如果顺序不对可能出现导入没有被正确解析代码转换失效自动导入和组件解析打架所以遇到插件问题时除了看配置本身也要看顺序。8.2 不要把所有事都交给插件插件很强但不代表能无限堆。如果一个项目里自动导入很多层自动注册很多层构建期替换很多层分析、压缩、mock 全部堆满会带来两个问题配置理解成本高出问题时排查链路更复杂原则上插件是为了解决重复性和构建层问题不是为了炫技。8.3 开发钩子和构建钩子不是一回事有些钩子更偏开发期有些更偏构建期不能混着理解。例如configureServer开发期transformIndexHtml开发和构建都可能参与generateBundle更偏构建输出期如果你发现某个插件“开发生效构建不生效”很可能就是钩子选错了。8.4 插件问题要先分清是 Vite、插件还是业务代码调试时建议先问自己三件事这个能力是不是插件负责的是开发期有问题还是构建后有问题去掉插件后项目是否恢复正常这样比直接怀疑“Vite 有 bug”更高效。九、面试聚焦9.1 写过或读过 Vite 插件吗如果没实际写过完整插件至少要能讲清Vite 插件兼容很多 Rollup 钩子常见的resolveId、load、transform是做什么的configureServer可以扩展 dev server自动导入、组件按需本质上都是编译期转换9.2 如何在 Vite 里做 HTML 模板变量注入常见做法是用transformIndexHtml在构建或开发阶段对index.html进行字符串替换或标签注入。9.3 自动导入 vue、components 的原理是什么本质是插件在编译阶段扫描源码或模板自动补全 import 或组件解析逻辑不是运行时自动出现。十、易混淆点Vite 插件不等于只服务 build很多插件同时作用于开发和构建。Rollup 插件能复用不代表完全等价Vite 还有 dev server 和 HTML 处理能力。自动导入不是运行时全局变量它本质是编译期补 import。configureServer不是线上接口方案它只在本地开发服务器里生效。插件越多不一定越高级过度堆插件会增加维护和排错成本。十一、思考与练习1.为什么说很多 Vite 能力本质上都是插件在工作解析因为像 Vue SFC 解析、老浏览器兼容、自动导入、组件自动注册等能力并不是业务代码天然拥有的而是通过插件接入构建链实现的。2.resolveId、load、transform三个钩子可以怎么串起来理解解析resolveId负责认模块load负责给出模块内容transform负责改写模块代码它们共同参与模块处理流程。3.为什么自动导入插件不是“魔法”解析因为它不是运行时凭空拿到 API而是在编译阶段扫描标识符并补充真实的 import 语句。4.什么时候更适合用configureServer而不是proxy解析当你需要在本地开发环境里直接扩展 dev server比如做 mock、小型调试接口、开发中间件时更适合用configureServer。5.自定义插件最适合从什么类型的需求开始练手解析最适合从虚拟模块、构建信息注入、HTML 标题替换这类边界清晰、可验证的小需求开始。总结插件定位Vite 的扩展能力核心很多开箱能力本质上都来自插件理解主线先区分开发期与构建期再理解resolveId、load、transform等钩子常见实践Vue 插件、legacy、自动导入、组件自动注册、产物分析都是高频场景自定义插件入门优先从虚拟模块和 HTML 注入这类小插件开始实战原则插件解决构建层问题够用就好不要无节制堆叠
