mcp-probe-kit 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -0
- package/README.md +607 -0
- package/build/index.d.ts +2 -0
- package/build/index.js +553 -0
- package/build/tools/check_deps.d.ts +13 -0
- package/build/tools/check_deps.js +204 -0
- package/build/tools/code_review.d.ts +13 -0
- package/build/tools/code_review.js +138 -0
- package/build/tools/convert.d.ts +13 -0
- package/build/tools/convert.js +575 -0
- package/build/tools/debug.d.ts +13 -0
- package/build/tools/debug.js +78 -0
- package/build/tools/detect_shell.d.ts +6 -0
- package/build/tools/detect_shell.js +138 -0
- package/build/tools/explain.d.ts +13 -0
- package/build/tools/explain.js +369 -0
- package/build/tools/fix.d.ts +13 -0
- package/build/tools/fix.js +290 -0
- package/build/tools/genapi.d.ts +13 -0
- package/build/tools/genapi.js +152 -0
- package/build/tools/genchangelog.d.ts +13 -0
- package/build/tools/genchangelog.js +227 -0
- package/build/tools/gencommit.d.ts +13 -0
- package/build/tools/gencommit.js +95 -0
- package/build/tools/gendoc.d.ts +13 -0
- package/build/tools/gendoc.js +208 -0
- package/build/tools/genpr.d.ts +13 -0
- package/build/tools/genpr.js +173 -0
- package/build/tools/genreadme.d.ts +13 -0
- package/build/tools/genreadme.js +613 -0
- package/build/tools/gensql.d.ts +13 -0
- package/build/tools/gensql.js +307 -0
- package/build/tools/gentest.d.ts +13 -0
- package/build/tools/gentest.js +155 -0
- package/build/tools/genui.d.ts +13 -0
- package/build/tools/genui.js +781 -0
- package/build/tools/index.d.ts +22 -0
- package/build/tools/index.js +22 -0
- package/build/tools/init_project.d.ts +13 -0
- package/build/tools/init_project.js +142 -0
- package/build/tools/init_setting.d.ts +13 -0
- package/build/tools/init_setting.js +47 -0
- package/build/tools/perf.d.ts +13 -0
- package/build/tools/perf.js +359 -0
- package/build/tools/refactor.d.ts +13 -0
- package/build/tools/refactor.js +318 -0
- package/build/tools/resolve_conflict.d.ts +13 -0
- package/build/tools/resolve_conflict.js +338 -0
- package/build/tools/split.d.ts +13 -0
- package/build/tools/split.js +577 -0
- package/package.json +66 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export { detectShell } from "./detect_shell.js";
|
|
2
|
+
export { initSetting } from "./init_setting.js";
|
|
3
|
+
export { initProject } from "./init_project.js";
|
|
4
|
+
export { gencommit } from "./gencommit.js";
|
|
5
|
+
export { debug } from "./debug.js";
|
|
6
|
+
export { genapi } from "./genapi.js";
|
|
7
|
+
export { codeReview } from "./code_review.js";
|
|
8
|
+
export { gentest } from "./gentest.js";
|
|
9
|
+
export { genpr } from "./genpr.js";
|
|
10
|
+
export { checkDeps } from "./check_deps.js";
|
|
11
|
+
export { gendoc } from "./gendoc.js";
|
|
12
|
+
export { genchangelog } from "./genchangelog.js";
|
|
13
|
+
export { refactor } from "./refactor.js";
|
|
14
|
+
export { perf } from "./perf.js";
|
|
15
|
+
export { fix } from "./fix.js";
|
|
16
|
+
export { gensql } from "./gensql.js";
|
|
17
|
+
export { resolveConflict } from "./resolve_conflict.js";
|
|
18
|
+
export { genui } from "./genui.js";
|
|
19
|
+
export { explain } from "./explain.js";
|
|
20
|
+
export { convert } from "./convert.js";
|
|
21
|
+
export { genreadme } from "./genreadme.js";
|
|
22
|
+
export { split } from "./split.js";
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export { detectShell } from "./detect_shell.js";
|
|
2
|
+
export { initSetting } from "./init_setting.js";
|
|
3
|
+
export { initProject } from "./init_project.js";
|
|
4
|
+
export { gencommit } from "./gencommit.js";
|
|
5
|
+
export { debug } from "./debug.js";
|
|
6
|
+
export { genapi } from "./genapi.js";
|
|
7
|
+
export { codeReview } from "./code_review.js";
|
|
8
|
+
export { gentest } from "./gentest.js";
|
|
9
|
+
export { genpr } from "./genpr.js";
|
|
10
|
+
export { checkDeps } from "./check_deps.js";
|
|
11
|
+
export { gendoc } from "./gendoc.js";
|
|
12
|
+
export { genchangelog } from "./genchangelog.js";
|
|
13
|
+
export { refactor } from "./refactor.js";
|
|
14
|
+
export { perf } from "./perf.js";
|
|
15
|
+
export { fix } from "./fix.js";
|
|
16
|
+
export { gensql } from "./gensql.js";
|
|
17
|
+
export { resolveConflict } from "./resolve_conflict.js";
|
|
18
|
+
export { genui } from "./genui.js";
|
|
19
|
+
export { explain } from "./explain.js";
|
|
20
|
+
export { convert } from "./convert.js";
|
|
21
|
+
export { genreadme } from "./genreadme.js";
|
|
22
|
+
export { split } from "./split.js";
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
// init_project 工具实现
|
|
2
|
+
export async function initProject(args) {
|
|
3
|
+
try {
|
|
4
|
+
const input = args?.input || "";
|
|
5
|
+
const projectName = args?.project_name || "新项目";
|
|
6
|
+
const message = `你需要按照 Spec-Driven Development(规范驱动开发)的方式初始化项目,参考 https://github.com/github/spec-kit 的工作流程。
|
|
7
|
+
|
|
8
|
+
📋 **项目需求**:
|
|
9
|
+
${input}
|
|
10
|
+
|
|
11
|
+
🎯 **初始化步骤**:
|
|
12
|
+
|
|
13
|
+
**第一步:创建项目基础结构**
|
|
14
|
+
在当前工作区创建以下目录和文件:
|
|
15
|
+
|
|
16
|
+
\`\`\`
|
|
17
|
+
.
|
|
18
|
+
├── memory/
|
|
19
|
+
│ └── constitution.md # 项目宪法(核心原则和约束)
|
|
20
|
+
├── specs/
|
|
21
|
+
│ └── 001-${projectName.toLowerCase().replace(/\s+/g, '-')}/
|
|
22
|
+
│ ├── spec.md # 功能规格说明
|
|
23
|
+
│ ├── plan.md # 实现计划
|
|
24
|
+
│ ├── tasks.md # 任务分解
|
|
25
|
+
│ └── research.md # 技术调研
|
|
26
|
+
├── scripts/
|
|
27
|
+
│ ├── check-prerequisites.sh
|
|
28
|
+
│ └── setup.sh
|
|
29
|
+
└── templates/
|
|
30
|
+
├── spec-template.md
|
|
31
|
+
├── plan-template.md
|
|
32
|
+
└── tasks-template.md
|
|
33
|
+
\`\`\`
|
|
34
|
+
|
|
35
|
+
**第二步:生成 constitution.md**
|
|
36
|
+
在 \`memory/constitution.md\` 中定义项目的核心原则,包括:
|
|
37
|
+
- 代码风格规范
|
|
38
|
+
- 架构原则
|
|
39
|
+
- 安全准则
|
|
40
|
+
- 测试要求
|
|
41
|
+
- 文档标准
|
|
42
|
+
|
|
43
|
+
**第三步:生成 spec.md(功能规格)**
|
|
44
|
+
在 \`specs/001-${projectName.toLowerCase().replace(/\s+/g, '-')}/spec.md\` 中详细描述:
|
|
45
|
+
- 项目背景和目标
|
|
46
|
+
- 用户故事(User Stories)
|
|
47
|
+
- 功能需求
|
|
48
|
+
- 非功能需求
|
|
49
|
+
- 约束条件
|
|
50
|
+
- 验收标准
|
|
51
|
+
|
|
52
|
+
**第四步:生成 plan.md(实现计划)**
|
|
53
|
+
分析需求并生成实现计划,包括:
|
|
54
|
+
- 技术栈选择(框架、数据库、部署方式等)
|
|
55
|
+
- 系统架构设计
|
|
56
|
+
- 模块划分
|
|
57
|
+
- 数据模型设计
|
|
58
|
+
- API 设计
|
|
59
|
+
- 关键技术决策
|
|
60
|
+
|
|
61
|
+
**第五步:生成 research.md(技术调研)**
|
|
62
|
+
对选定的技术栈进行调研:
|
|
63
|
+
- 确认版本兼容性
|
|
64
|
+
- 识别潜在风险
|
|
65
|
+
- 记录最佳实践
|
|
66
|
+
- 列出参考文档
|
|
67
|
+
|
|
68
|
+
**第六步:生成 tasks.md(任务分解)**
|
|
69
|
+
将实现计划分解为可执行的任务,格式如下:
|
|
70
|
+
\`\`\`markdown
|
|
71
|
+
# 任务分解
|
|
72
|
+
|
|
73
|
+
## 阶段 1:项目初始化
|
|
74
|
+
- [ ] Task 1.1: 搭建项目骨架 (文件: ./setup.sh)
|
|
75
|
+
- [ ] Task 1.2: 配置开发环境 (文件: ./devcontainer.json)
|
|
76
|
+
- [ ] Task 1.3: [P] 初始化数据库 (文件: ./database/schema.sql)
|
|
77
|
+
|
|
78
|
+
## 阶段 2:核心功能实现
|
|
79
|
+
- [ ] Task 2.1: 实现数据模型 (文件: ./src/models/)
|
|
80
|
+
- [ ] Task 2.2: [P] 实现用户认证 (文件: ./src/auth/)
|
|
81
|
+
- [ ] Task 2.3: [P] 实现业务逻辑 (文件: ./src/services/)
|
|
82
|
+
依赖: Task 2.1
|
|
83
|
+
|
|
84
|
+
## 阶段 3:API 开发
|
|
85
|
+
- [ ] Task 3.1: 创建 REST API (文件: ./src/api/)
|
|
86
|
+
依赖: Task 2.2, Task 2.3
|
|
87
|
+
- [ ] Task 3.2: [P] 编写 API 测试 (文件: ./tests/api/)
|
|
88
|
+
|
|
89
|
+
## 阶段 4:前端开发
|
|
90
|
+
- [ ] Task 4.1: 搭建前端框架 (文件: ./frontend/)
|
|
91
|
+
- [ ] Task 4.2: [P] 实现 UI 组件 (文件: ./frontend/components/)
|
|
92
|
+
- [ ] Task 4.3: [P] 集成 API (文件: ./frontend/services/)
|
|
93
|
+
依赖: Task 3.1
|
|
94
|
+
|
|
95
|
+
## 阶段 5:测试与部署
|
|
96
|
+
- [ ] Task 5.1: 集成测试 (文件: ./tests/integration/)
|
|
97
|
+
- [ ] Task 5.2: 性能测试 (文件: ./tests/performance/)
|
|
98
|
+
- [ ] Task 5.3: 部署配置 (文件: ./deploy/)
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
**标记说明**:
|
|
102
|
+
- [P]: 可以并行执行的任务
|
|
103
|
+
- 依赖: 必须在指定任务完成后才能开始
|
|
104
|
+
\`\`\`
|
|
105
|
+
|
|
106
|
+
**第七步:生成辅助脚本**
|
|
107
|
+
创建项目管理脚本:
|
|
108
|
+
- \`scripts/check-prerequisites.sh\`: 检查环境依赖
|
|
109
|
+
- \`scripts/setup.sh\`: 自动化项目初始化
|
|
110
|
+
- \`scripts/create-new-feature.sh\`: 创建新功能分支
|
|
111
|
+
|
|
112
|
+
📝 **注意事项**:
|
|
113
|
+
1. 所有文件使用 Markdown 格式,保持清晰的结构
|
|
114
|
+
2. 遵循项目 constitution 中定义的原则
|
|
115
|
+
3. 任务分解要足够细致,每个任务应该在 2-4 小时内完成
|
|
116
|
+
4. 标记清楚任务之间的依赖关系
|
|
117
|
+
5. 识别可以并行执行的任务以优化开发效率
|
|
118
|
+
|
|
119
|
+
🚀 **开始执行**:
|
|
120
|
+
现在请按照上述步骤创建项目结构和所有必需的文档。`;
|
|
121
|
+
return {
|
|
122
|
+
content: [
|
|
123
|
+
{
|
|
124
|
+
type: "text",
|
|
125
|
+
text: message,
|
|
126
|
+
},
|
|
127
|
+
],
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
catch (error) {
|
|
131
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
132
|
+
return {
|
|
133
|
+
content: [
|
|
134
|
+
{
|
|
135
|
+
type: "text",
|
|
136
|
+
text: `❌ 初始化项目失败: ${errorMessage}`,
|
|
137
|
+
},
|
|
138
|
+
],
|
|
139
|
+
isError: true,
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// init_setting 工具实现
|
|
2
|
+
export async function initSetting(args) {
|
|
3
|
+
try {
|
|
4
|
+
// 要写入的配置
|
|
5
|
+
const settings = {
|
|
6
|
+
// 统一使用 Claude-4.5-Sonnet(Chat / Composer / Edit 三处都钉死,便于复现)
|
|
7
|
+
"ai.chatModel": "claude-sonnet-4-5",
|
|
8
|
+
"ai.composerModel": "claude-sonnet-4-5",
|
|
9
|
+
"ai.editModel": "claude-sonnet-4-5",
|
|
10
|
+
// 采样温度:0 更"严格/确定",适合生成结构化/按规范的代码与 JSON
|
|
11
|
+
"ai.temperature": 0,
|
|
12
|
+
// 单次生成的最大 token(上限按平台限制,4096 对大多数修改/重构足够)
|
|
13
|
+
// "ai.maxTokens": 4096, // 保守:4096 平衡:8192 激进:16384
|
|
14
|
+
// ======================= 代码库上下文(让模型更懂你的项目) =======================
|
|
15
|
+
// 语义检索:用向量搜索理解项目,而不是仅靠邻近几行
|
|
16
|
+
"ai.contextEngine": "semantic",
|
|
17
|
+
// 检索深度:high 提高命中率(更"聪明"地找引用/类型/API 使用示例)
|
|
18
|
+
"ai.contextDepth": "high",
|
|
19
|
+
// 是否将代码库上下文喂给模型:日常开发建议开启
|
|
20
|
+
"ai.includeCodebaseContext": true, // 做模型指纹/一致性实验时 设置成:false
|
|
21
|
+
// 语义与邻近的折中策略:balanced(常用且稳)
|
|
22
|
+
"ai.contextStrategy": "balanced", // 做模型指纹/一致性实验时 设置成:neighboring
|
|
23
|
+
};
|
|
24
|
+
const message = `你要在项目的根目录下 .cursor/settings.json 文件内容追加以下内容,不要替换原有内容:
|
|
25
|
+
${JSON.stringify(settings, null, 2)}`;
|
|
26
|
+
return {
|
|
27
|
+
content: [
|
|
28
|
+
{
|
|
29
|
+
type: "text",
|
|
30
|
+
text: message,
|
|
31
|
+
},
|
|
32
|
+
],
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
catch (error) {
|
|
36
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
37
|
+
return {
|
|
38
|
+
content: [
|
|
39
|
+
{
|
|
40
|
+
type: "text",
|
|
41
|
+
text: `❌ 初始化配置失败: ${errorMessage}\n\n可能原因:\n- 没有文件写入权限\n- 不在 Cursor 工作区中\n- 路径错误`,
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
isError: true,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
// perf 工具实现
|
|
2
|
+
export async function perf(args) {
|
|
3
|
+
try {
|
|
4
|
+
const code = args?.code || "";
|
|
5
|
+
const type = args?.type || "all"; // algorithm, memory, react, database
|
|
6
|
+
const message = `请分析以下代码的性能问题并提供优化建议:
|
|
7
|
+
|
|
8
|
+
📝 **代码内容**:
|
|
9
|
+
${code || "请提供需要性能分析的代码"}
|
|
10
|
+
|
|
11
|
+
🎯 **分析重点**:${type}
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 性能分析流程
|
|
16
|
+
|
|
17
|
+
### 第一步:识别性能瓶颈
|
|
18
|
+
|
|
19
|
+
**常见性能问题**:
|
|
20
|
+
1. **时间复杂度过高**
|
|
21
|
+
- 嵌套循环 O(n²) 或更差
|
|
22
|
+
- 未优化的算法
|
|
23
|
+
- 重复计算
|
|
24
|
+
|
|
25
|
+
2. **空间复杂度问题**
|
|
26
|
+
- 内存泄漏
|
|
27
|
+
- 大对象频繁创建
|
|
28
|
+
- 缓存滥用
|
|
29
|
+
|
|
30
|
+
3. **I/O 阻塞**
|
|
31
|
+
- 同步 I/O 操作
|
|
32
|
+
- 未使用连接池
|
|
33
|
+
- 缺少缓存机制
|
|
34
|
+
|
|
35
|
+
4. **渲染性能**
|
|
36
|
+
- 不必要的重渲染
|
|
37
|
+
- 大列表未虚拟化
|
|
38
|
+
- 图片未优化
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 性能优化指南
|
|
43
|
+
|
|
44
|
+
### 1️⃣ 算法优化
|
|
45
|
+
|
|
46
|
+
**复杂度分析**:
|
|
47
|
+
\`\`\`
|
|
48
|
+
O(1) - 常数时间 ✅ 最优
|
|
49
|
+
O(log n) - 对数时间 ✅ 很好
|
|
50
|
+
O(n) - 线性时间 ✅ 良好
|
|
51
|
+
O(n log n) - 线性对数 ⚠️ 可接受
|
|
52
|
+
O(n²) - 平方时间 ⚠️ 注意
|
|
53
|
+
O(2ⁿ) - 指数时间 ❌ 避免
|
|
54
|
+
O(n!) - 阶乘时间 ❌ 严禁
|
|
55
|
+
\`\`\`
|
|
56
|
+
|
|
57
|
+
**优化技巧**:
|
|
58
|
+
|
|
59
|
+
**示例 1:使用 Map 替代数组查找**
|
|
60
|
+
\`\`\`typescript
|
|
61
|
+
// Before - O(n²)
|
|
62
|
+
function findDuplicates(arr) {
|
|
63
|
+
const duplicates = [];
|
|
64
|
+
for (let i = 0; i < arr.length; i++) {
|
|
65
|
+
for (let j = i + 1; j < arr.length; j++) {
|
|
66
|
+
if (arr[i] === arr[j]) {
|
|
67
|
+
duplicates.push(arr[i]);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return duplicates;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// After - O(n)
|
|
75
|
+
function findDuplicates(arr) {
|
|
76
|
+
const seen = new Map();
|
|
77
|
+
const duplicates = new Set();
|
|
78
|
+
|
|
79
|
+
for (const item of arr) {
|
|
80
|
+
if (seen.has(item)) {
|
|
81
|
+
duplicates.add(item);
|
|
82
|
+
} else {
|
|
83
|
+
seen.set(item, true);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return Array.from(duplicates);
|
|
88
|
+
}
|
|
89
|
+
\`\`\`
|
|
90
|
+
|
|
91
|
+
**示例 2:缓存计算结果**
|
|
92
|
+
\`\`\`typescript
|
|
93
|
+
// Before - 重复计算
|
|
94
|
+
function fibonacci(n) {
|
|
95
|
+
if (n <= 1) return n;
|
|
96
|
+
return fibonacci(n - 1) + fibonacci(n - 2);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// After - 使用 memoization
|
|
100
|
+
const memo = new Map();
|
|
101
|
+
function fibonacci(n) {
|
|
102
|
+
if (n <= 1) return n;
|
|
103
|
+
if (memo.has(n)) return memo.get(n);
|
|
104
|
+
|
|
105
|
+
const result = fibonacci(n - 1) + fibonacci(n - 2);
|
|
106
|
+
memo.set(n, result);
|
|
107
|
+
return result;
|
|
108
|
+
}
|
|
109
|
+
\`\`\`
|
|
110
|
+
|
|
111
|
+
### 2️⃣ 内存优化
|
|
112
|
+
|
|
113
|
+
**避免内存泄漏**:
|
|
114
|
+
\`\`\`typescript
|
|
115
|
+
// ❌ 内存泄漏
|
|
116
|
+
class EventManager {
|
|
117
|
+
listeners = [];
|
|
118
|
+
|
|
119
|
+
addEventListener(listener) {
|
|
120
|
+
this.listeners.push(listener);
|
|
121
|
+
// 忘记移除监听器
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// ✅ 正确做法
|
|
126
|
+
class EventManager {
|
|
127
|
+
listeners = new Set();
|
|
128
|
+
|
|
129
|
+
addEventListener(listener) {
|
|
130
|
+
this.listeners.add(listener);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
removeEventListener(listener) {
|
|
134
|
+
this.listeners.delete(listener);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
destroy() {
|
|
138
|
+
this.listeners.clear();
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
\`\`\`
|
|
142
|
+
|
|
143
|
+
**对象池复用**:
|
|
144
|
+
\`\`\`typescript
|
|
145
|
+
// ❌ 频繁创建对象
|
|
146
|
+
for (let i = 0; i < 10000; i++) {
|
|
147
|
+
const obj = { x: i, y: i * 2 };
|
|
148
|
+
process(obj);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// ✅ 对象池
|
|
152
|
+
class ObjectPool {
|
|
153
|
+
pool = [];
|
|
154
|
+
|
|
155
|
+
acquire() {
|
|
156
|
+
return this.pool.pop() || {};
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
release(obj) {
|
|
160
|
+
this.pool.push(obj);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
const pool = new ObjectPool();
|
|
165
|
+
for (let i = 0; i < 10000; i++) {
|
|
166
|
+
const obj = pool.acquire();
|
|
167
|
+
obj.x = i;
|
|
168
|
+
obj.y = i * 2;
|
|
169
|
+
process(obj);
|
|
170
|
+
pool.release(obj);
|
|
171
|
+
}
|
|
172
|
+
\`\`\`
|
|
173
|
+
|
|
174
|
+
### 3️⃣ React 性能优化
|
|
175
|
+
|
|
176
|
+
**useMemo 和 useCallback**:
|
|
177
|
+
\`\`\`typescript
|
|
178
|
+
// ❌ 每次渲染都创建新函数
|
|
179
|
+
function MyComponent({ data }) {
|
|
180
|
+
const processedData = expensiveComputation(data);
|
|
181
|
+
const handleClick = () => { /* ... */ };
|
|
182
|
+
|
|
183
|
+
return <ChildComponent data={processedData} onClick={handleClick} />;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// ✅ 使用 hooks 优化
|
|
187
|
+
function MyComponent({ data }) {
|
|
188
|
+
const processedData = useMemo(
|
|
189
|
+
() => expensiveComputation(data),
|
|
190
|
+
[data]
|
|
191
|
+
);
|
|
192
|
+
|
|
193
|
+
const handleClick = useCallback(() => {
|
|
194
|
+
/* ... */
|
|
195
|
+
}, []);
|
|
196
|
+
|
|
197
|
+
return <ChildComponent data={processedData} onClick={handleClick} />;
|
|
198
|
+
}
|
|
199
|
+
\`\`\`
|
|
200
|
+
|
|
201
|
+
**React.memo 避免重渲染**:
|
|
202
|
+
\`\`\`typescript
|
|
203
|
+
// ✅ 使用 memo
|
|
204
|
+
const ChildComponent = React.memo(({ data, onClick }) => {
|
|
205
|
+
return <div onClick={onClick}>{data}</div>;
|
|
206
|
+
});
|
|
207
|
+
\`\`\`
|
|
208
|
+
|
|
209
|
+
**虚拟列表**:
|
|
210
|
+
\`\`\`typescript
|
|
211
|
+
// ❌ 渲染 10000 个元素
|
|
212
|
+
function List({ items }) {
|
|
213
|
+
return (
|
|
214
|
+
<div>
|
|
215
|
+
{items.map(item => <Item key={item.id} data={item} />)}
|
|
216
|
+
</div>
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// ✅ 使用虚拟列表
|
|
221
|
+
import { FixedSizeList } from 'react-window';
|
|
222
|
+
|
|
223
|
+
function List({ items }) {
|
|
224
|
+
return (
|
|
225
|
+
<FixedSizeList
|
|
226
|
+
height={600}
|
|
227
|
+
itemCount={items.length}
|
|
228
|
+
itemSize={50}
|
|
229
|
+
>
|
|
230
|
+
{({ index, style }) => (
|
|
231
|
+
<div style={style}>
|
|
232
|
+
<Item data={items[index]} />
|
|
233
|
+
</div>
|
|
234
|
+
)}
|
|
235
|
+
</FixedSizeList>
|
|
236
|
+
);
|
|
237
|
+
}
|
|
238
|
+
\`\`\`
|
|
239
|
+
|
|
240
|
+
### 4️⃣ 数据库优化
|
|
241
|
+
|
|
242
|
+
**添加索引**:
|
|
243
|
+
\`\`\`sql
|
|
244
|
+
-- Before
|
|
245
|
+
SELECT * FROM users WHERE email = 'user@example.com';
|
|
246
|
+
|
|
247
|
+
-- After
|
|
248
|
+
CREATE INDEX idx_users_email ON users(email);
|
|
249
|
+
SELECT * FROM users WHERE email = 'user@example.com';
|
|
250
|
+
\`\`\`
|
|
251
|
+
|
|
252
|
+
**查询优化**:
|
|
253
|
+
\`\`\`typescript
|
|
254
|
+
// ❌ N+1 查询
|
|
255
|
+
const users = await User.findAll();
|
|
256
|
+
for (const user of users) {
|
|
257
|
+
user.posts = await Post.findAll({ where: { userId: user.id } });
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// ✅ 使用 JOIN
|
|
261
|
+
const users = await User.findAll({
|
|
262
|
+
include: [{ model: Post }]
|
|
263
|
+
});
|
|
264
|
+
\`\`\`
|
|
265
|
+
|
|
266
|
+
**批量操作**:
|
|
267
|
+
\`\`\`typescript
|
|
268
|
+
// ❌ 逐条插入
|
|
269
|
+
for (const item of items) {
|
|
270
|
+
await db.insert(item);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
// ✅ 批量插入
|
|
274
|
+
await db.insertMany(items);
|
|
275
|
+
\`\`\`
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
## 性能测试
|
|
280
|
+
|
|
281
|
+
### Benchmark 测试
|
|
282
|
+
\`\`\`typescript
|
|
283
|
+
console.time('operation');
|
|
284
|
+
// 执行操作
|
|
285
|
+
console.timeEnd('operation');
|
|
286
|
+
|
|
287
|
+
// 或使用 performance API
|
|
288
|
+
const start = performance.now();
|
|
289
|
+
// 执行操作
|
|
290
|
+
const end = performance.now();
|
|
291
|
+
console.log(\`耗时: \${end - start}ms\`);
|
|
292
|
+
\`\`\`
|
|
293
|
+
|
|
294
|
+
### 性能指标
|
|
295
|
+
|
|
296
|
+
**目标值**:
|
|
297
|
+
- 首屏加载:< 1s
|
|
298
|
+
- 交互响应:< 100ms
|
|
299
|
+
- 动画帧率:60 FPS
|
|
300
|
+
- API 响应:< 200ms
|
|
301
|
+
|
|
302
|
+
---
|
|
303
|
+
|
|
304
|
+
## 性能优化报告模板
|
|
305
|
+
|
|
306
|
+
### 📊 性能分析
|
|
307
|
+
|
|
308
|
+
**当前性能**:
|
|
309
|
+
- 时间复杂度:O(n²)
|
|
310
|
+
- 内存占用:150MB
|
|
311
|
+
- 响应时间:800ms
|
|
312
|
+
|
|
313
|
+
**瓶颈识别**:
|
|
314
|
+
1. 嵌套循环导致复杂度过高
|
|
315
|
+
2. 未缓存计算结果
|
|
316
|
+
3. 数组查找效率低
|
|
317
|
+
|
|
318
|
+
### 🎯 优化方案
|
|
319
|
+
|
|
320
|
+
**方案 1:算法优化**
|
|
321
|
+
- 使用 Map 替代数组
|
|
322
|
+
- 预期提升:70%
|
|
323
|
+
|
|
324
|
+
**方案 2:添加缓存**
|
|
325
|
+
- 使用 memoization
|
|
326
|
+
- 预期提升:50%
|
|
327
|
+
|
|
328
|
+
### 📈 优化效果
|
|
329
|
+
|
|
330
|
+
**优化后性能**:
|
|
331
|
+
- 时间复杂度:O(n)
|
|
332
|
+
- 内存占用:50MB ↓ 67%
|
|
333
|
+
- 响应时间:200ms ↓ 75%
|
|
334
|
+
|
|
335
|
+
---
|
|
336
|
+
|
|
337
|
+
现在请分析代码,提供详细的性能优化建议。`;
|
|
338
|
+
return {
|
|
339
|
+
content: [
|
|
340
|
+
{
|
|
341
|
+
type: "text",
|
|
342
|
+
text: message,
|
|
343
|
+
},
|
|
344
|
+
],
|
|
345
|
+
};
|
|
346
|
+
}
|
|
347
|
+
catch (error) {
|
|
348
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
349
|
+
return {
|
|
350
|
+
content: [
|
|
351
|
+
{
|
|
352
|
+
type: "text",
|
|
353
|
+
text: `❌ 性能分析失败: ${errorMessage}`,
|
|
354
|
+
},
|
|
355
|
+
],
|
|
356
|
+
isError: true,
|
|
357
|
+
};
|
|
358
|
+
}
|
|
359
|
+
}
|