vite-plugin-performance

vite-plugin-performance

中文文档

vite-plugin-performance wraps one or more Vite plugins and measures how long each lifecycle hook takes. It keeps the original behaviour intact while giving you actionable performance insights.

✨ Features

• Wrap a single plugin or an array of plugins with one call
• Ship with a sensible default hook list, or use hooks: 'all' to cover every function hook
• Threshold-based reporting so you only see the hooks that really hurt
• Pluggable logger, formatter, and lifecycle callback for easy monitoring integration
• Works with asynchronous hooks and still handles errors gracefully

📦 Installation

pnpm add -D vite-plugin-performance
# or npm / yarn / bun

🚀 Quick Start

import { defineConfig } from 'vite'
import Inspect from 'vite-plugin-inspect'
import { wrapPlugin } from 'vite-plugin-performance'

export default defineConfig({
  plugins: [
    wrapPlugin(Inspect(), {
      threshold: 50,
      onHookExecution({ pluginName, hookName, duration }) {
        reportToAPM({ pluginName, hookName, duration })
      },
    }),
  ],
})

Whenever a hook crosses the threshold (default 0 ms) you will see output similar to:

[inspect] transform            ⏱   78.42 ms

⚙️ Options

Option	Type	Default	Description
hooks	PluginHookName[] | 'all'	DEFAULT_PLUGIN_HOOKS	Choose which hooks to wrap; pass 'all' to wrap every function hook
threshold	number	0	Only hooks with a duration greater or equal to the threshold are reported
silent	boolean	false	Disable the built-in logger
logger	(message, context) => void	console.log	Custom log writer
formatter	(context) => string	[plugin] transform ⏱ 12.34 ms	Custom message formatter
onHookExecution	(context) => void	undefined	Callback invoked after a hook finishes
clock	() => number	performance.now or Date.now	High-resolution timer, handy for tests

The legacy misspelled option slient is still recognised and mapped to silent.

Default Hook List

import { DEFAULT_PLUGIN_HOOKS } from 'vite-plugin-performance'
// [
//   'options',
//   'config',
//   'configResolved',
//   'configureServer',
//   'buildStart',
//   'resolveId',
//   'load',
//   'transform',
//   'buildEnd',
//   'generateBundle',
//   'renderChunk',
//   'writeBundle',
// ]

🧠 Advanced Usage

Wrap Multiple Plugins

const pluginA = ...
const pluginB = ...

export default defineConfig({
  plugins: wrapPlugin([pluginA, pluginB], { threshold: 20 }),
})

Custom Log Format

wrapPlugin(plugin, {
  formatter({ pluginName, hookName, duration }) {
    return `${pluginName}:${hookName} took ${duration}ms`
  },
  logger(message) {
    myLogger.info(message)
  },
})

Limit to Specific Hooks

wrapPlugin(plugin, {
  hooks: ['resolveId', 'load', 'transform'],
})

🧪 Testing

pnpm --filter vite-plugin-performance test

📄 License

MIT