vite-audit-plugin

vite-audit-plugin 📊🔍

A comprehensive auditing plugin for Vite projects that analyzes your application during development and build processes, providing actionable insights for performance, security, and best practices.

Features ✨

• Bundle Analysis: Visualize and analyze your bundle composition
• Security Audits: Check for vulnerable dependencies (using npm audit)
• Performance Metrics: Track key performance indicators
• Best Practices: Validate against web development best practices
• Custom Reporting: Generate HTML, JSON, or CLI reports
• Performance Budgets: Set and enforce size limits

Installation 📦

npm install vite-audit-plugin --save-dev
# or
yarn add vite-audit-plugin -D
# or
pnpm add vite-audit-plugin -D

Usage 🛠️

Add the plugin to your vite.config.js/vite.config.ts:

import { defineConfig } from 'vite'
import viteAudit from 'vite-audit-plugin'

export default defineConfig({
  plugins: [
    viteAudit({
      // Plugin options (all optional)
      bundleAnalysis: true,       // Enable bundle analysis
      securityCheck: true,        // Check for vulnerable dependencies
      performanceMetrics: true,   // Collect performance metrics
      bestPractices: true,        // Validate best practices
      outputFile: 'audit-report.html', // Output file name
      performanceBudget: {        // Set performance budgets
        '*.js': '500KB',
        '*.css': '100KB',
        '*.png': '100KB'
      }
    })
  ]
})

Options ⚙️

Option	Type	Default	Description
bundleAnalysis	boolean	true	Enable bundle size analysis
securityCheck	boolean	true	Check for vulnerable dependencies
performanceMetrics	boolean	true	Collect performance metrics
bestPractices	boolean	true	Validate against best practices
outputFile	string	'audit-report.html'	Output file path
performanceBudget	object	undefined	Key-value pairs of file patterns and size limits
failOnError	boolean	false	Fail build when audits don't pass
verbose	boolean	false	Show detailed audit information in console

Report Example 📄

After building your project, you'll find an audit report (default: audit-report.html) with sections like:

• Bundle Analysis

  • Bundle composition
  • Largest dependencies
  • Gzip/Brotli sizes
  • Duplicated code

• Security Audit

  • Vulnerable packages
  • Severity levels
  • Recommended fixes

• Performance Metrics

  • Load time estimates
  • Asset delivery analysis
  • Code splitting effectiveness

• Best Practices

  • Accessibility checks
  • SEO recommendations
  • Modern web standards compliance

Performance Budgets 💰

Set size limits for different file types to prevent performance regressions:

viteAudit({
  performanceBudget: {
    '*.js': '300KB',
    '*.css': '50KB',
    '*.jpg': '100KB',
    'total': '1MB'
  }
})

If budgets are exceeded, the plugin will warn you or fail the build (if failOnError is true).

CI/CD Integration 🚀

For CI environments, use the CLI output format:

viteAudit({
  outputFile: 'audit-report.json',
  verbose: true
})

Then in your CI script:

vite build && cat audit-report.json | jq '.metrics'

Advanced Configuration 🛠️

Custom Audits

Extend the default audits with your own:

viteAudit({
  customAudits: [
    {
      name: 'My Custom Audit',
      run: async () => {
        return {
          score: 0.9,
          details: { /* your audit results */ }
        }
      }
    }
  ]
})

Programmatic API

Use the plugin's API directly:

import { runAudits } from 'vite-audit-plugin';

const results = await runAudits({
  dir: './dist',
  audits: ['bundle', 'security']
});

console.log(results);

Troubleshooting 🐛

Issue: Plugin fails with "Cannot find module"

• Solution: Ensure you're using Vite v3 or higher

Issue: Security audit takes too long

• Solution: Disable it in development:

  viteAudit({
    securityCheck: process.env.NODE_ENV === 'production'
  })