🚀 why-slow-cli

A high-performance AST-based performance analyzer for React and Next.js applications.

why-slow-cli scans your project for common performance bottlenecks like large components, heavy imports, and rendering risks—providing developer-friendly suggestions and AI-powered context.

⚡ Quick Start

Analyze your project directly with npx:

npx why-slow-cli scan ./src

Options

• -s, --suggest: Enable Suggestion Mode for copy-pasteable refactor blocks.
• --ai: Use AI (GPT-4) to generate senior-level performance explanations and fixes.
• -f, --format <json/console>: Choose report format.
• -e, --explain: Detailed debug info (Rule IDs, line/col numbers).

🔍 Features

1. High-Precision AST Engine: Built with ts-morph for deep code understanding.
2. Performance Scoring: Qualitative (A-F) and quantitative (0-100) grading.
3. Advanced Rules: Detects large components (>150 lines), unstable hook dependencies, and render-phase API calls.
4. Next.js First: Automated withWhySlow plugin and instrumentation tracking.
5. Runtime Support: Includes trackRender HOC and useTrackRender hooks for real-time monitoring.

🏗️ Integration

Next.js Plugin

// next.config.js
import { withWhySlow } from 'why-slow/next';

export default withWhySlow({
  // your config
});

Runtime Tracker

import { trackRender } from 'why-slow/runtime';

const MyComponent = ({ data }) => {
  return <div>{data.name}</div>;
}

export default trackRender(MyComponent);

🛡️ License

MIT