# Vite插件开发纪实：vite-plugin-monitor（中）
# 前言
上一篇文章主要介绍了开发插件所需的准备工作，以及此次要开发的插件将要解决的问题
# 功能开发
有了前文的铺垫内容，下面就是功能开发
# 获取启动耗时
项目启动后会在终端中输出ready in xxms
为此咱们使用Vs Code在源码 (opens new window)中搜一下这个关键字
可以看到此部分代码在源码中如下
const info = server.config.logger.info
// @ts-ignore
if (global.__vite_start_time) {
// @ts-ignore
const startupDuration = performance.now() - global.__vite_start_time
info(`\n ${chalk.cyan(`ready in ${Math.ceil(startupDuration)}ms.`)}\n`)
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
这个performance.now()等同于Date.now()即当前时间，通过global.__vite_start_time就能获取到服务启动时间
我们就从这个info方法入手，给它重定义一下，通过configureServer钩子可以获取到server实例
index.ts
import type { Plugin } from 'vite';
export default function Monitor(): Plugin {
const startTime = global.__vite_start_time
return {
name: 'vite-plugin-monitor',
apply: 'serve',
configureServer(server) {
const { info } = server.config.logger;
// 拦截info方法的调用
server.config.logger.info = function _info(str) {
// 调用原info方法
info.apply(this, arguments);
// 通过字符串内容进行一个简单的判断
if (str.includes('ready in')) {
console.log('startupDuration', Date.now() - startTime)
}
};
},
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
启动一个项目看看效果，成了。
# HMR时间获取
热更新时，终端中会出现下面的日志
同理源码里搜一搜，能够定位出如下内容
config.logger.info(
updates
.map(({ path }) => chalk.green(`hmr update `) + chalk.dim(path))
.join('\n'),
{ clear: true, timestamp: true }
)
1
2
3
4
5
6
2
3
4
5
6
暂以打印这个日志的时间作为HMR开始的时间
let startTime = null
const { info } = server.config.logger;
server.config.logger.info = function _info(str) {
info.apply(this, arguments);
if (str.indexOf('hmr update') >= 0) {
startTime = Date.now()
}
};
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
触发HMR时，客户端会发出一个获取资源的请求，请求携带了一个import参数，我们通过这个参数来标识这个特定的请求
http://localhost:8080/src/pages/home/index.vue?import&t=1632924377207
1
钩子中的server实例包含middlewares属性可以向上添加自定义的中间件处理方法
- 通过URL实例解析
search参数，然后判断是否包含import& - 重定义
end方法，在资源传回到客户端后打印耗时
server.middlewares.use(async (req, res, next) => {
const { search } = new URL(req.url, `http://${req.headers.host}`);
if (
search.indexOf('import&') >= 0
) {
const { end } = res;
res.end = function _end() {
// 在资源返回后打印耗时
end.apply(this, arguments);
console.log(Date.now() - startTime)
};
}
next();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
事实上通过--debug启动服务，能看到在HMR时会打印4个时间
目前方法仅仅得到了vite:hmr部分的时间，与实际耗时还有一丝丝差异
# 小结
更加详细的信息只能通过--debug看到，下一步的计划就是hack，模拟一下debug下的行为，将debug的打印的数据都拦截下来
由于时间关系，这部分hack还没完成。准备假期抽时间实现一下。下一篇文章将详细的介绍最终实现。