tessl/npm-vite-plugin-inspect

Inspect the intermediate state of Vite plugins during development and build processes

—

Pending

Overview

Eval results

Files

Module Inspection

Name: tessl/npm-vite-plugin-inspect
Author: tessl

Access to detailed information about module transformations, dependencies, and plugin interactions during the Vite build process.

Capabilities

Module Information

Comprehensive information about individual modules including size, timing, and plugin interactions.

interface ModuleInfo {
  /** Unique module identifier (file path or virtual ID) */
  id: string;
  /** Plugins that processed this module with timing info */
  plugins: { name: string; transform?: number; resolveId?: number; }[];
  /** Array of module IDs this module depends on */
  deps: string[];
  /** Array of module IDs that import this module */
  importers: string[];
  /** Whether this is a virtual module (not a real file) */
  virtual: boolean;
  /** Total processing time for this module in milliseconds */
  totalTime: number;
  /** Number of times this module was processed */
  invokeCount: number;
  /** Original source code size in bytes */
  sourceSize: number;
  /** Final transformed code size in bytes */
  distSize: number;
}

/** Array of module information objects */
type ModulesList = ModuleInfo[];

Usage Example:

// Via RPC API
const modules = await rpc.getModulesList({ vite: 'instance-id', env: 'client' });

modules.forEach(module => {
  console.log(`Module: ${module.id}`);
  console.log(`Size change: ${module.sourceSize} -> ${module.distSize}`);
  console.log(`Processing time: ${module.totalTime}ms`);
  console.log(`Processed by: ${module.plugins.map(p => p.name).join(', ')}`);
});

Module Transformation Details

Detailed information about how a specific module was transformed by each plugin.

interface ModuleTransformInfo {
  /** The resolved module ID */
  resolvedId: string;
  /** Array of transformations applied to this module */
  transforms: TransformInfo[];
}

interface TransformInfo {
  /** Name of the plugin that performed this transformation */
  name: string;
  /** Transformed code result (optional) */
  result?: string;
  /** Transformation start time in milliseconds */
  start: number;
  /** Transformation end time in milliseconds */
  end: number; 
  /** Plugin execution order identifier */
  order?: string;
  /** Source maps generated by this transformation */
  sourcemaps?: any;
  /** Error information if transformation failed */
  error?: ParsedError;
}

Usage Example:

// Get detailed transformation info for a specific module
const transformInfo = await rpc.getModuleTransformInfo(
  { vite: 'instance-id', env: 'client' },
  '/src/components/MyComponent.vue',
  false // don't clear cache
);

console.log(`Transformations for: ${transformInfo.resolvedId}`);
transformInfo.transforms.forEach(transform => {
  const duration = transform.end - transform.start;
  console.log(`${transform.name}: ${duration}ms`);
  if (transform.error) {
    console.error(`Error in ${transform.name}:`, transform.error.message);
  }
});

Module Resolution Information

Information about how module IDs are resolved by different plugins.

interface ResolveIdInfo {
  /** Name of the plugin that performed the resolution */
  name: string;
  /** The resolved result (file path or virtual ID) */
  result: string;
  /** Resolution start time in milliseconds */
  start: number;
  /** Resolution end time in milliseconds */
  end: number;
  /** Plugin execution order identifier */
  order?: string;
  /** Error information if resolution failed */
  error?: ParsedError;
}

Error Information

Structured error information with stack traces for failed transformations.

interface ParsedError {
  /** Error message */
  message: string;
  /** Parsed stack trace frames */
  stack: StackFrame[];
  /** Raw error object */
  raw?: any;
}

Note: StackFrame is imported from the error-stack-parser-es library and provides structured stack trace information.

Module Dependencies

Understanding module dependency relationships:

// Example: Finding all dependencies of a module
const module = modules.find(m => m.id === '/src/main.ts');
if (module) {
  console.log('Dependencies:', module.deps);
  console.log('Imported by:', module.importers);
  
  // Find circular dependencies
  const circularDeps = module.deps.filter(dep => 
    modules.find(m => m.id === dep)?.deps.includes(module.id)
  );
  if (circularDeps.length > 0) {
    console.warn('Circular dependencies detected:', circularDeps);
  }
}

Virtual Module Detection

Identifying and working with virtual modules:

// Find all virtual modules
const virtualModules = modules.filter(m => m.virtual);
console.log('Virtual modules:', virtualModules.map(m => m.id));

// Virtual modules often have special prefixes or patterns
const pluginVirtualModules = virtualModules.filter(m => 
  m.id.startsWith('virtual:') || m.id.includes('?')
);

Performance Analysis

Analyzing module processing performance:

// Find slowest modules to process
const slowestModules = modules
  .sort((a, b) => b.totalTime - a.totalTime)
  .slice(0, 10);

console.log('Top 10 slowest modules:');
slowestModules.forEach((module, index) => {
  console.log(`${index + 1}. ${module.id} - ${module.totalTime}ms`);
});

// Find modules with size increases
const bloatedModules = modules
  .filter(m => m.distSize > m.sourceSize * 1.5)
  .sort((a, b) => (b.distSize - b.sourceSize) - (a.distSize - a.sourceSize));

console.log('Modules with significant size increases:');
bloatedModules.forEach(module => {
  const increase = ((module.distSize - module.sourceSize) / module.sourceSize * 100).toFixed(1);
  console.log(`${module.id}: +${increase}%`);
});

Install with Tessl CLI

npx tessl i tessl/npm-vite-plugin-inspect

docs

performance-metrics.md

programmatic-api.md

tile.json

tessl/npm-vite-plugin-inspect