一个全面的 React/Next.js 项目性能审计工具，支持 Monorepo 结构。可以分析项目架构、构建配置、包体积、代码分割、首屏性能、React 优化以及海外部署优化。
English | 简体中文
- 架构分析：Monorepo 结构检测、依赖关系、构建系统识别
- 包体积分析：大小分解、最大 chunk、重复依赖检测
- 代码分割评估：路由级和组件级懒加载检查
- 首屏性能：关键渲染路径、阻塞资源、FCP/LCP 指标
- React 优化：组件 memo 化、状态管理、重渲染分析
- 海外部署：CDN 策略、polyfill、多区域部署检查
- PWA 配置：Service Worker、manifest 检查（可选）
- 详细报告：生成 Markdown 报告，包含代码示例和优先级建议
# 使用 npx skills
npx skills add xueyangeng/react-performance-audit
# 或手动克隆
git clone https://github.com/xueyangeng/react-performance-audit.git ~/.agents/skills/react-performance-auditgit clone https://github.com/xueyangeng/react-performance-audit.git
cd react-performance-audit
bash scripts/audit.sh /path/to/your/project# 基础审计
bash scripts/audit.sh /path/to/project
# Monorepo 项目指定包
bash scripts/audit.sh /path/to/monorepo --package apps/web
# 指定构建工具
bash scripts/audit.sh /path/to/project --bundler vite
# JSON 格式输出（CI/CD）
bash scripts/audit.sh /path/to/project --format json > audit.json支持 OpenClaw、Claude Code、Codex CLI 等：
# 在 AI 对话中输入：
/react-performance-audit /path/to/project- Monorepo 工具识别（pnpm/yarn/npm workspaces, Nx, Turborepo）
- 包之间的依赖关系
- 构建系统（webpack/vite/rspack/rollup）
- 循环依赖检测
# 自动运行构建并分析
npm run build
# 检查目标：
# - 主包: <200KB (gzipped)
# - Vendor chunk: <500KB (gzipped)
# - 总大小: <1MB (gzipped)检查项：
- 最大的 chunk 和模块
- 重复依赖（monorepo 常见问题）
- Tree-shaking 效果
- 动态导入使用情况
- 路由级别的代码分割
- 组件级别的懒加载
- Vendor chunk 分离
- 异步 chunk 大小分布
核心指标：
- FCP (First Contentful Paint): <1.8s
- LCP (Largest Contentful Paint): <2.5s
- TTI (Time to Interactive): <3.8s
检查项：
- 阻塞脚本（
<head>中的同步脚本） - 关键资源预加载
- 图片优化（格式、尺寸、懒加载）
- CSS 优化（内联关键 CSS、异步加载）
// 检查项示例
- React.memo 使用情况
- useCallback/useMemo 使用
- 组件渲染性能
- Context 使用模式
- 状态管理方案（Redux/Zustand/Jotai）- CDN 配置检查
- 静态资源缓存策略
- Polyfill 加载策略
- 多区域部署建议
- manifest.json 存在性检查
- Service Worker 检测
- 离线支持建议
生成 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
...# 问题
- vendor.js > 500KB
- 总大小 > 1MB
# 建议
✅ 移除未使用的依赖
✅ 使用更轻量的替代库（moment → date-fns）
✅ Tree-shaking 配置检查
✅ 动态导入大型依赖# 问题
- FCP > 3s
- LCP > 4s
# 建议
✅ 预加载关键资源
✅ 内联关键 CSS
✅ 图片懒加载 + WebP
✅ 移除 <head> 中的阻塞脚本# 问题
- 单个主包 > 500KB
- 没有路由级分割
# 建议
✅ React.lazy() 路由组件
✅ 动态 import() 大组件
✅ Vendor chunk 分离# 问题
- 频繁不必要的重渲染
- 大列表无虚拟滚动
# 建议
✅ React.memo 包装组件
✅ useCallback/useMemo 优化
✅ 虚拟滚动（react-window）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审计脚本会自动检测并使用：
- webpack-bundle-analyzer / rollup-plugin-visualizer - 包体积可视化
- lighthouse - 性能指标测量（如果已安装）
- jq - JSON 处理（CI 场景）
无需提前安装，脚本会提示缺失的工具。
// 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.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
react: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
priority: 20,
},
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: 10,
},
},
},
},
};如果你使用 Impeccable Skills，可以组合：
# 1. 性能审计
/react-performance-audit /path/to/project
# 2. 优化建议
/optimize [目标文件]
# 3. 代码质量
/frontend-code-audit /path/to/project- ✅ React (CRA, Vite)
- ✅ Next.js
- ✅ Remix
- ✅ React + TypeScript
- ✅ Monorepo (pnpm/yarn/npm workspaces, Nx, Turborepo)
⚠️ Vue/Angular（部分功能适用）
A: Webpack, Vite, Rspack, Rollup。脚本会自动检测。
A: 使用 --package 参数：
bash scripts/audit.sh /path/to/monorepo --package apps/webA: 可以！使用 --format json 输出 JSON，方便解析。
A: 目前是中英文混合，可以根据需要调整。
MIT License
耿学岩 - @xueyangeng
耿上了科技创始人
本项目参考了：
- OpenClaw - AI 代理平台
- Lighthouse - 性能审计标准
- webpack-bundle-analyzer
如果这个工具对你有帮助，请给个 ⭐️ Star！
相关项目：
- frontend-code-audit - 前端代码质量审计