Vite插件开发纪实：通过调试日志监控页面加载性能

2024-02-11 23:03:53

前言

在上篇博文中，我们探讨了如何通过拦截HTTP请求来监控页面加载性能。在本篇博文中，我们将介绍如何通过拦截调试日志来实现这一目标。

拦截调试日志

要拦截调试日志，我们需要使用vite.modifyViteOptions钩子。此钩子允许我们修改Vite的配置选项。在钩子函数中，我们可以使用logger.info()方法来记录信息，如下所示：

import { Plugin } from 'vite';

const plugin: Plugin = {
  name: 'vite-plugin-monitor',
  configureServer(server) {
    server.watcher.on('change', (file) => {
      server.logger.info(`File changed: ${file}`);
    });
  },
};

export default plugin;

当文件发生更改时，此插件将记录一条信息。我们可以使用这种方法来跟踪各种事件，例如页面加载、HMR和错误。

跟踪关键指标

为了更好地量化Vite为项目带来的收益，我们需要跟踪一些关键指标。这些指标可以包括：

页面加载时间
首次渲染时间
HMR更新时间
错误数量

我们可以使用performance.now()方法来测量这些指标。此方法返回从页面加载开始到当前时间经过的毫秒数。

例如，我们可以使用以下代码来测量页面加载时间：

const startTime = performance.now();

window.addEventListener('load', () => {
  const endTime = performance.now();
  console.log(`Page load time: ${endTime - startTime}ms`);
});