React Performance Audit

English | 简体中文

A comprehensive performance audit tool for React/Next.js projects with monorepo support. Analyzes project architecture, build configuration, bundle size, code splitting, first-screen performance, React optimization, and overseas deployment.

✨ Features

Architecture Analysis: Monorepo detection, dependency graph, build system identification
Bundle Analysis: Size breakdown, largest chunks, duplicate dependency detection
Code Splitting: Route-level and component-level lazy loading evaluation
First-Screen Performance: Critical rendering path, blocking resources, FCP/LCP metrics
React Optimization: Component memoization, state management, re-render analysis
Overseas Deployment: CDN strategy, polyfill, multi-region deployment checks
PWA Configuration: Service Worker and manifest checks (optional)
Detailed Reports: Generate Markdown reports with code examples and prioritized recommendations

📦 Installation

OpenClaw Users

# Using npx skills
npx skills add xueyangeng/react-performance-audit

# Or manual clone
git clone https://github.com/xueyangeng/react-performance-audit.git ~/.agents/skills/react-performance-audit

Standalone Usage

git clone https://github.com/xueyangeng/react-performance-audit.git
cd react-performance-audit
bash scripts/audit.sh /path/to/your/project

🚀 Usage

Quick Audit (Bash Script)

# Basic audit
bash scripts/audit.sh /path/to/project

# Monorepo - specify package
bash scripts/audit.sh /path/to/monorepo --package apps/web

# Specify bundler
bash scripts/audit.sh /path/to/project --bundler vite

# JSON output (for CI/CD)
bash scripts/audit.sh /path/to/project --format json > audit.json

In AI Conversations

Supports OpenClaw, Claude Code, Codex CLI, etc.:

# In AI chat:
/react-performance-audit /path/to/project

📊 Audit Dimensions

1. Project Architecture

Monorepo tool detection (pnpm/yarn/npm workspaces, Nx, Turborepo)
Inter-package dependencies
Build system (webpack/vite/rspack/rollup)
Circular dependency detection

2. Bundle Analysis

# Automatically runs build and analyzes
npm run build

# Targets:
# - Main bundle: <200KB (gzipped)
# - Vendor chunk: <500KB (gzipped)
# - Total: <1MB (gzipped)

Checks:

Largest chunks and modules
Duplicate dependencies (common in monorepos)
Tree-shaking effectiveness
Dynamic import usage

3. Code Splitting

Route-level code splitting
Component-level lazy loading
Vendor chunk separation
Async chunk size distribution

4. First-Screen Performance

Core Metrics:

FCP (First Contentful Paint): <1.8s
LCP (Largest Contentful Paint): <2.5s
TTI (Time to Interactive): <3.8s

Checks:

Blocking scripts (sync scripts in <head>)
Critical resource preloading
Image optimization (format, size, lazy loading)
CSS optimization (inline critical CSS, async loading)

5. React Optimization

// Example checks
- React.memo usage
- useCallback/useMemo hooks
- Component rendering performance
- Context usage patterns
- State management (Redux/Zustand/Jotai)

6. Overseas Deployment

CDN configuration
Static asset caching strategy
Polyfill loading strategy
Multi-region deployment recommendations

7. PWA Configuration (Optional)

manifest.json existence check
Service Worker detection
Offline support recommendations

📄 Output Report

Generates performance-analysis-report.md:

# React Performance Analysis Report

## Executive Summary
- Overall score: 78/100
- Critical issues: 2
- High-priority: 5
- Medium-priority: 8

## 1. Architecture Overview
- Monorepo: Yes (pnpm workspaces)
- Bundler: Vite 5.x
- Packages: 12

## 2. Bundle Analysis
### Current State
- Total size: 850 KB (gzipped: 320 KB)
- Largest chunk: vendor.js (450 KB)
- Duplicate dependencies: lodash, moment

### Recommendations
1. [P0] Remove moment.js, use date-fns (-120KB)
2. [P1] Split vendor chunk by framework
...

🎯 Common Issue Diagnosis

Large Bundle Size

# Problem
- vendor.js > 500KB
- Total > 1MB

# Solutions
✅ Remove unused dependencies
✅ Use lighter alternatives (moment → date-fns)
✅ Check tree-shaking config
✅ Dynamic import for large deps

Slow First-Screen Loading

# Problem
- FCP > 3s
- LCP > 4s

# Solutions
✅ Preload critical resources
✅ Inline critical CSS
✅ Image lazy loading + WebP
✅ Remove blocking scripts in <head>

Insufficient Code Splitting

# Problem
- Single main bundle > 500KB
- No route-level splitting

# Solutions
✅ React.lazy() for routes
✅ Dynamic import() for large components
✅ Vendor chunk separation

React Performance Issues

# Problem
- Frequent unnecessary re-renders
- Large lists without virtualization

# Solutions
✅ React.memo for components
✅ useCallback/useMemo optimization
✅ Virtual scrolling (react-window)

🔧 CI/CD Integration

GitHub Actions

name: Performance Audit

on: [push, pull_request]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install Dependencies
        run: npm install
      
      - name: Run Performance Audit
        run: |
          git clone https://github.com/xueyangeng/react-performance-audit.git audit-tool
          bash audit-tool/scripts/audit.sh . --format json > audit.json
      
      - name: Check Performance Gate
        run: |
          SCORE=$(jq '.score' audit.json)
          if [ "$SCORE" -lt 70 ]; then
            echo "❌ Performance score too low: $SCORE"
            exit 1
          fi
          echo "✅ Performance score: $SCORE"
      
      - name: Upload Report
        uses: actions/upload-artifact@v3
        with:
          name: performance-report
          path: performance-analysis-report.md

🛠️ Required Tools

The audit script auto-detects and uses:

webpack-bundle-analyzer / rollup-plugin-visualizer - Bundle visualization
lighthouse - Performance metrics (if installed)
jq - JSON processing (CI scenarios)

No pre-installation required; script will prompt for missing tools.

📚 Best Practices

Vite Project Optimization

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'ui-vendor': ['@mui/material', 'antd'],
        },
      },
    },
    chunkSizeWarningLimit: 500,
  },
});

Webpack Project Optimization

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          priority: 20,
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
        },
      },
    },
  },
};

🤝 Works Well With

If using Impeccable Skills, combine with:

# 1. Performance audit
/react-performance-audit /path/to/project

# 2. Optimization recommendations
/optimize [target-file]

# 3. Code quality
/frontend-code-audit /path/to/project

📝 Supported Projects

✅ React (CRA, Vite)
✅ Next.js
✅ Remix
✅ React + TypeScript
✅ Monorepo (pnpm/yarn/npm workspaces, Nx, Turborepo)
⚠️ Vue/Angular (partial support)

🐛 FAQ

Q: Which build tools are supported?

A: Webpack, Vite, Rspack, Rollup. Auto-detected by the script.

Q: How to specify a sub-package in monorepo?

A: Use --package flag:

bash scripts/audit.sh /path/to/monorepo --package apps/web

Q: Can I use this in CI?

A: Yes! Use --format json for JSON output, easier to parse.

Q: Report language?

A: Currently mixed Chinese/English, can be adjusted as needed.

📄 License

MIT License

👨‍💻 Author

Geng Xueyan - @xueyangeng

Founder of 耿上了科技 (Gengshangliao Tech)

🌟 Acknowledgments

Inspired by:

OpenClaw - AI agent platform
Lighthouse - Performance audit standards
webpack-bundle-analyzer

If this tool helps you, please give it a ⭐️ Star!

Related Projects:

frontend-code-audit - Frontend code quality audit

FilesExpand file tree

README.en.md

Latest commit

History