js-perf-audit

JS performance audit

Automated inspection of a JavaScript-heavy codebase based on the JS-heavy performance inspection spec.

Arguments

• path (optional): Path to the codebase to audit. Default: current working directory.
• focus (optional): Specific section to audit (e.g., "bundle", "splitting", "selectors", "rendering", "infra"). Default: all sections.

Workflow

Run all eight audit sections against the target codebase. For each, gather evidence programmatically, then produce a findings report.

Step 1: Identify the JS architecture

Determine what you're working with:

1. Build system: Search for webpack configs, vite configs, rollup configs, gulp files, esbuild configs, tsconfig, package.json build scripts
2. Framework: Grep for React, Vue, Angular, Svelte, jQuery, Backbone imports
3. Entry points: Find main entry files from build config or package.json main/module/browser fields
4. Output directory: Find dist/, build/, out/ directories with built JS

# Quick architecture scan
find <path> -maxdepth 3 -name "webpack.config*" -o -name "vite.config*" -o -name "rollup.config*" -o -name "gulpfile*" -o -name ".babelrc" -o -name "tsconfig.json" 2>/dev/null | head -20

Step 2: Bundle weight and composition

Measure what ships to users.

1. Built bundle sizes:

# Find and size JS bundles in output directories
find <dist-dir> -name "*.js" -exec ls -lh {} \; | sort -k5 -h -r | head -20

1. Bundle analyzer availability: Check if webpack-bundle-analyzer, source-map-explorer, or similar is installed
2. Vendor vs. app code: Check webpack splitChunks config for vendor chunk separation
3. Duplicate dependencies: Look for the same package imported from multiple entry points without shared chunks

Thresholds:

• Total initial JS: < 300 KB compressed for content-first, < 500 KB for productivity tools
• Largest single bundle: < 150 KB compressed
• Vendor/framework ratio: app code should be >= 50%