第4章 Vite模块化与插件系统(二）

4.3 常用插件介绍

4.3.1 官方插件

@vitejs/plugin-vue

用于支持 Vue.js 开发：

npm install @vitejs/plugin-vue --save-dev

import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()]
})

@vitejs/plugin-react

用于支持 React 开发：

npm install @vitejs/plugin-react --save-dev

import react from '@vitejs/plugin-react'export default defineConfig({plugins: [react()]
})

4.3.2 社区插件

vite-plugin-legacy

用于支持旧浏览器：

npm install @vitejs/plugin-legacy --save-dev

import legacy from '@vitejs/plugin-legacy'export default defineConfig({plugins: [legacy({targets: ['defaults', 'not IE 11']})]
})

vite-plugin-compression

用于压缩输出的资源文件：

npm install vite-plugin-compression --save-dev

import compression from 'vite-plugin-compression'export default defineConfig({plugins: [compression()]
})

4.3.3 插件组合

你可以将多个插件组合使用，以满足不同的需求：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import compression from 'vite-plugin-compression'export default defineConfig({plugins: [vue(),legacy({targets: ['defaults', 'not IE 11']}),compression()]
})

4.4 创建自定义插件

Vite 的插件系统允许开发者根据需求创建自定义插件。以下是一个详细的创建自定义插件的示例。

4.4.1 示例：日志插件

创建一个简单的日志插件，记录每个模块的加载时间。

4.4.1.1 实现插件

// vite-plugin-logger.js
export default function loggerPlugin() {return {name: 'logger-plugin',async load(id) {const start = Date.now()const result = await this.load(id)const end = Date.now()console.log(`Module ${id} loaded in ${end - start}ms`)return result}}
}

4.4.1.2 配置插件

import { defineConfig } from 'vite'
import loggerPlugin from './vite-plugin-logger'export default defineConfig({plugins: [loggerPlugin()]
})

4.4.2 高级插件示例：SVG 图标插件

这个插件将 SVG 文件作为 Vue 组件导入。

4.4.2.1 实现插件

// vite-plugin-svg.js
import { createFilter } from 'vite'export default function svgPlugin(options = {}) {const filter = createFilter(options.include || '**/*.svg', options.exclude)return {name: 'svg-plugin',transform(src, id) {if (!filter(id)) returnreturn `export default { template: \`${src}\` }`}}
}

4.4.2.2 配置插件

import { defineConfig } from 'vite'
import svgPlugin from './vite-plugin-svg'export default defineConfig({plugins: [svgPlugin()]
})

4.5 插件调试与优化

插件调试和优化是确保插件高效运行的关键。本节将介绍一些调试技巧和优化方法。

4.5.1 调试插件

4.5.1.1 使用 console.log

在插件中使用 console.log 打印调试信息。例如：

export default function loggerPlugin() {return {name: 'logger-plugin',async load(id) {console.log(`Loading module: ${id}`)const result = await this.load(id)console.log(`Module loaded: ${id}`)return result}}
}

4.5.1.2 使用断点调试

在插件代码中设置断点，然后在 Vite 启动时通过浏览器调试工具进行断点调试。

4.5.2 优化插件性能

4.5.2.1 减少不必要的计算

确保插件只对需要处理的文件进行操作。例如，使用 createFilter 函数创建文件过滤器：

import { createFilter } from 'vite'export default function myPlugin() {const filter = createFilter('**/*.js', 'node_modules/**')return {name: 'my-plugin',transform(code, id) {if (!filter(id)) return// 插件逻辑}}
}

4.5.2.2 缓存计算结果

对于重复的计算结果，可以进行缓存以提高性能。例如：

const cache = new Map()export default function myPlugin() {return {name: 'my-plugin',transform(code, id) {if (cache.has(id)) {return cache.get(id)}const result = /* 插件逻辑 */cache.set(id, result)return result}}
}