本文最后更新于 42 天前，其中的信息可能已经有所发展或是发生改变。
💡 核心价值：
- 扩展构建流程能力
- 优化开发体验
- 增强项目定制性
- 集成生态工具链
✨ 你将掌握：
- 插件开发全流程
- 10+实战案例
- 性能优化方案
- 企业级解决方案
🔧 一、插件开发基础
1.1 插件基本结构
import type { Plugin } from 'vite'
interface PluginOptions {
debug?: boolean
}
export default (options: PluginOptions = {}): Plugin => {
return {
name: 'vite-plugin-custom',
// 配置阶段钩子
config(config) {
return { /* 合并配置 */ }
},
// 转换文件内容
transform(code, id) {
if (id.endsWith('.vue')) {
return code.replace(/<template>/g, '<!-- Custom Plugin -->n<template>')
}
},
// 开发服务器钩子
configureServer(server) {
server.middlewares.use('/api', customMiddleware)
}
}
}1.2 生命周期钩子对比
| 钩子阶段 | 典型用途 | 执行时机 |
|---|---|---|
| config | 修改配置 | 配置解析前 |
| configResolved | 读取最终配置 | 配置解析完成 |
| configureServer | 添加开发中间件 | 服务器创建时 |
| transformIndexHtml | 修改HTML入口 | HTML处理阶段 |
| buildStart | 构建初始化操作 | 构建开始时 |
| transform | 文件内容处理 | 每个模块加载时 |
| buildEnd | 构建后处理 | 构建完成前 |
🚀 二、核心开发技巧
2.1 虚拟模块实现
// 虚拟模块插件
export default (): Plugin => ({
name: 'virtual-module',
resolveId(id) {
if (id === 'virtual:data') return id
},
load(id) {
if (id === 'virtual:data') {
return `export const dynamicData = ${JSON.stringify({
timestamp: Date.now()
})}`
}
}
})
// 使用虚拟模块
import { dynamicData } from 'virtual:data'2.2 热更新处理
const hmrPlugin: Plugin = {
name: 'hmr-plugin',
handleHotUpdate({ file, server }) {
if (file.endsWith('.custom')) {
server.ws.send({
type: 'custom',
event: 'custom-update',
data: { file }
})
}
}
}🛠️ 三、实战案例集锦
3.1 性能分析插件
import speedMeasure from 'speed-measure-webpack-plugin'
export const performancePlugin = (): Plugin => ({
name: 'performance-analytics',
config(config) {
return {
build: {
rollupOptions: {
plugins: [speedMeasure().wrap({})]
}
}
}
}
})3.2 多环境Mock插件
interface MockOptions {
enable: boolean
mockDir?: string
}
export const mockPlugin = (options: MockOptions): Plugin => {
let isDev = false
return {
name: 'vite-mock-server',
configResolved(config) {
isDev = config.command === 'serve'
},
configureServer(server) {
if (options.enable && isDev) {
server.middlewares.use(createMockMiddleware(options.mockDir))
}
}
}
}🧩 四、企业级解决方案
4.1 微前端集成方案
export const qiankunPlugin = (name: string): Plugin => ({
name: 'vite-plugin-qiankun',
config(config) {
return {
build: {
lib: {
entry: './src/main.ts',
name,
formats: ['umd']
}
}
}
},
transformIndexHtml(html) {
return html.replace(
'<head>',
`<head>n <script src="//cdn.qiankun.com/entry.js"></script>`
)
}
})4.2 构建效能优化
export const buildOptimizer = (): Plugin => ({
name: 'build-optimizer',
buildStart() {
this.cache = new Map()
},
transform(code, id) {
// 缓存AST处理结果
if (this.cache.has(id)) return this.cache.get(id)
const result = transformAST(code)
this.cache.set(id, result)
return result
}
})🚨 五、调试与排错指南
5.1 调试配置
// vite.config.js
export default defineConfig({
plugins: [
myPlugin({ debug: true })
],
optimizeDeps: {
force: true // 强制预构建
}
})5.2 常见问题排查表
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 插件未生效 | 加载顺序问题 | 调整插件顺序 |
| 热更新失效 | 未正确处理HMR事件 | 检查handleHotUpdate |
| 构建产物异常 | 转换逻辑错误 | 检查transform返回值 |
| 类型声明丢失 | 未生成d.ts文件 | 添加类型声明生成逻辑 |
🔗 推荐资源：
