# Vite插件开发纪实：vite-plugin-monitor（上）
# 背景
最近在webpack项目里接入了Vite（dev mode），为开发提效。效果是真的猛。
项目启动速度提升70%-80%，HMR直接碾压webpack dev server
为了更加精准的计算收益，就需要将Vite启动相关的指标进行上报（启动时间，HMR，页面加载等等时间）
为此就要通过开发插件收集这些信息，然后通过埋点上报sdk上报到数据分析的平台
# 遇到的问题
通过查阅官方文档 (opens new window)并未找到相关的钩子直接获取到这些指标
但在开发的时候添加 --debug就能很详细的看到所有资源的处理时间，HMR，详细的启动时间等等
{
"scripts": {
"dev": "vite --debug",
}
}
2
3
4
5
npm run dev
为此只能通过一些hack的手段获取这些指标了，下面将展开详细的介绍
# 期望
通过向目标工程引入插件，通过特定的回掉函数即可获取到debug模式下反馈的各种信息
# 准备工作
比较详细的介绍一下开发步骤
# 初始化工程
创建插件目录
mkdir vite-plugin-monitor
cd vite-plugin-monitor
2
3
初始化pkg.json
npm init -y
安装必要依赖
yarn add -D vite typescript @types/node rimraf
添加必要的两个指令dev,build，配置入口文件dist/index.js
{
"main": "dist/index.js",
"scripts": {
"dev": "tsc -w -p .",
"build": "rimraf dist && tsc -p ."
}
}
2
3
4
5
6
7
其中dev环境下添加了-w(--watch)参数，当文件有变动时，以便实时的进行更新
rimraf的作用是替代rm -rf指令，且是跨平台的，windows下同样生效
插件使用typescript开发，更有助于插件后续的维护
其中build直接使用typescript提供的默认tsc指令，对ts直接进行转换
根目录创建 tsconfig.json 内容如下
{
"compilerOptions": {
"target": "es2015",
"moduleResolution": "node",
"strict": false,
"declaration": true,
"noUnusedLocals": true,
"esModuleInterop": true,
"outDir": "dist",
"module": "commonjs",
"lib": ["ESNext","DOM"],
"sourceMap": true,
},
"include": ["./src"]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在 src 目录下进行开发，里面存放我们的源码
# 目录结构
最终目录如下
├── package.json
├── src
| ├── index.ts # 插件入口
| ├── types
| | └── index.ts # 类型定义
| └── utils
| └── index.ts # 工具方法
├── tsconfig.json
2
3
4
5
6
7
8
# 简单插件示例
根据插件开发文档，在src/index.ts文件下编写如下简单的代码;
- name：标识插件的名称
- apply：标识插件在哪个时期工作(serve|build)，默认都会调用
- config：这个钩子接收原始用户配置（命令行选项指定的会与配置文件合并）和一个描述配置环境的变量
import type { Plugin } from 'vite';
export default function Monitor(): Plugin {
return {
name: 'vite-plugin-monitor',
apply: 'serve',
config(userConfig, env) {
console.log(userConfig);
console.log(env)
// 可以做进一步的修改，会自动合入当前的配置
// return
},
};
}
2
3
4
5
6
7
8
9
10
11
12
13
14
一个打印Vite配置的插件就搞定了，下面就是测试我们开发的插件
# 本地测试插件
首先是转换我们的ts=> js ，执行前面配置的指令yarn dev，就会看见生成了一个dist目录，里面有转换后的代码
接着执行npm link在全局生成一个软连接，指向当前项目
npm link
在一个vite项目里的执行npm link vite-plugin-monitor(monitor根据实际情况替换)，向目标项目加入此依赖
npm link vite-plugin-monitor
接着就可以在Vite项目的vite.config.js配置文件中加入我们的插件了
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginMonitor from 'vite-plugin-monitor'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vitePluginMonitor()
]
})
2
3
4
5
6
7
8
9
10
11
接着通过配置的指令启动vite，就能看到我们插件的打印的配置文件内容了
由于是通过软连接的方式引入的插件，那么在插件工程里的任意更改都会实时生效，也就避免了频繁的执行yarn add file:localProjectDir
# 小结
本篇主要介绍了monitor插件开发的背景，要解决的问题，目标以及开发插件所需的一些列准备工作
下一篇文章将详细介绍功能的实现