Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

background

Vite (Dev Mode) was recently added to the WebPack project to improve development. The effect is really powerful.

The project startup speed increased by 70%-80%, and HMR directly crushed WebPack Dev Server

In order to calculate revenue more accurately, you need to report Vite startup related metrics (startup time, HMR, page load time, etc.)

To this end, it is necessary to collect such information through the development of plug-ins, and then report it to the platform of data analysis through the buried point report SDK

Problems encountered

These metrics are retrieved directly from the official documentation without finding the relevant hooks

However, by adding debug at development time, you can see in great detail the processing time of all resources, HMR, detailed startup time, etc

{
    "scripts": {
        "dev": "vite --debug",}}Copy the code
npm run dev
Copy the code

These metrics can only be obtained through some hacks, which are described in detail below

expect

By introducing a plug-in to the target project, various information fed back in debug mode can be obtained through a specific callback function

The preparatory work

More detailed introduction to the development steps

Initialization engineering

Create a plug-in directory

mkdir vite-plugin-monitor

cd vite-plugin-monitor
Copy the code

Initialize the PKG. Json

npm init -y
Copy the code

Install required dependencies

yarn add -D vite typescript @types/node rimraf
Copy the code

Add the necessary two directives dev,build, and configuration entry file dist/index.js

{
    "main": "dist/index.js"."scripts": {
        "dev": "tsc -w -p ."."build": "rimraf dist && tsc -p ."}}Copy the code

The -w(–watch) parameter is added to the dev environment to update the file in real time when it changes

Rimraf replaces RM-RF and is cross-platform. It also works on Windows

Plug-ins are developed in typescript, which is much easier to maintain

Build converts TS directly using the default TSC directive provided by typescript

Create tsconfig.json in the root directory as follows

{
    "compilerOptions": {
      "target": "es2015"."moduleResolution": "node"."strict": false."declaration": true."noUnusedLocals": true."esModuleInterop": true."outDir": "dist"."module": "commonjs"."lib": ["ESNext"."DOM"]."sourceMap": true,},"include": ["./src"]}Copy the code

Develop in the SRC directory, which stores our source code

The directory structure

The final directory is as follows

├ ─ ─ package. Json ├ ─ ─ the SRC | ├ ─ ─ index. The ts# plugin entry| ├ ─ ─ types | | └ ─ ─ index. The ts# type definition| └ ─ ─ utils | └ ─ ─ index. The ts# tool method├ ─ ─ tsconfig. JsonCopy the code

Simple plug-in example

According to the plug-in development documentation, write the following simple code in the SRC /index.ts file.

  • Name: Identifies the name of the plug-in
  • Apply: identify the plugin which period work (serve | build), the default will be called
  • Config: This hook receives the original user configuration (which is merged with the configuration file as specified by the command line option) and a variable describing the configuration environment
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)
      // Further modifications can be made to automatically close the current configuration
      // return}}; }Copy the code

A plug-in to print the Vite configuration is done. Here is a test of the plug-in we developed

Local test plug-in

The first step is to convert our ts=> js, execute the previously configured yarn dev command, and see that a dist directory is generated with the transformed code

NPM link is then executed to generate a soft connection globally, pointing to the current project

npm link
Copy the code

Implementation of NPM link vite-plugin-monitor in a Vite project adds this dependency to the target project

npm link vite-plugin-monitor
Copy the code

We can then add our plug-in to the Vite project’s vite.config.js configuration file

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()
  ]
})
Copy the code

Then start Vite with the configuration instructions, and you’ll see the contents of our plug-in’s printed configuration file

Since the plug-in is introduced through a soft connection, any changes in the plug-in project take effect in real time, avoiding frequent yarn Add File :localProjectDir executions

summary

This article mainly introduces the background of monitor plug-in development, the problems to be solved, the goals, and some of the preparations required to develop the plug-in

The implementation of the functionality will be detailed in the next article

View: warehouse source code