当前位置：首页 > news >正文

LLM 辅助前端重构：从代码坏味道检测到自动修复的工程实践

news 2026/6/8 20:11:19

LLM 辅助前端重构：从代码坏味道检测到自动修复的工程实践

一、前端重构的"认知负担"：看得出问题，改不动代码

前端项目的技术债积累到一定程度，重构就变成"看得出问题，改不动代码"的困境。坏味道到处都是——300 行的组件、三层嵌套的 useEffect、重复的状态逻辑——但重构一个组件可能牵连十几个文件，手动改容易引入 bug，不改又越来越难维护。

LLM 辅助重构的核心价值不是"让 AI 写代码"，而是"让 AI 处理重复性的模式转换"。将 50 个类组件转为函数组件、将 100 处 useState 替换为 useReducer、将散落的 API 调用统一为自定义 Hook——这些模式化的重构任务，LLM 可以批量完成，人工只需审核结果。

二、LLM 辅助重构的工作流

graph TB subgraph 检测阶段 A[AST分析器] --> B[坏味道报告<br/>大组件/重复逻辑/过时API] B --> C[重构优先级排序<br/>影响范围×修改难度] end subgraph 生成阶段 C --> D[模式匹配<br/>归类重构类型] D --> E[LLM批量生成<br/>每类重构一个模板] E --> F[代码差异对比<br/>人工审核] end subgraph 验证阶段 F --> G[自动化测试<br/>单元测试+快照测试] G --> H{测试通过?} H -->|否| I[回滚+调整Prompt] H -->|是| J[合并代码] end

重构工作流分三阶段：检测（AST 分析定位坏味道）、生成（LLM 按模式批量生成重构代码）、验证（自动化测试确认正确性）。LLM 只在生成阶段介入，检测和验证由确定性工具完成。

三、重构工具链实现

3.1 坏味道检测器

import * as ts from 'typescript'; import * as path from 'path'; interface SmellReport { file: string; type: 'large-component' | 'duplicate-logic' | 'outdated-api' | 'complex-effect'; severity: 'high' | 'medium' | 'low'; location: { line: number }; description: string; suggestion: string; } class FrontendSmellDetector { detect(sourceFile: ts.SourceFile, filePath: string): SmellReport[] { const reports: SmellReport[] = []; ts.forEachChild(sourceFile, (node) => { // 检测大组件：函数体超过 150 行 if (this.isReactComponent(node)) { const lines = this.getLines(node, sourceFile); if (lines > 150) { reports.push({ file: filePath, type: 'large-component', severity: lines > 300 ? 'high' : 'medium', location: this.getLocation(node, sourceFile), description: `组件 ${this.getComponentName(node)} 有 ${lines} 行`, suggestion: '拆分为更小的子组件或自定义 Hook', }); } } // 检测复杂 useEffect：依赖项超过 5 个 if (ts.isCallExpression(node)) { if (this.isUseEffect(node) && node.arguments.length > 1) { const deps = node.arguments[1]; if (ts.isArrayLiteralExpression(deps) && deps.elements.length > 5) { reports.push({ file: filePath, type: 'complex-effect', severity: 'medium', location: this.getLocation(node, sourceFile), description: `useEffect 依赖项 ${deps.elements.length} 个`, suggestion: '提取为自定义 Hook，减少依赖项', }); } } } }); return reports; } private isReactComponent(node: ts.Node): boolean { if (!ts.isFunctionDeclaration(node) && !ts.isArrowFunction(node)) { return false; } const name = this.getComponentName(node); return name ? name[0] === name[0].toUpperCase() : false; } private getComponentName(node: ts.Node): string | null { if (ts.isVariableDeclaration(node.parent)) { return node.parent.name.getText(); } if (ts.isFunctionDeclaration(node) && node.name) { return node.name.getText(); } return null; } private getLines(node: ts.Node, sf: ts.SourceFile): number { const start = sf.getLineAndCharacterOfPosition(node.getStart()); const end = sf.getLineAndCharacterOfPosition(node.getEnd()); return end.line - start.line; } private getLocation(node: ts.Node, sf: ts.SourceFile) { const { line } = sf.getLineAndCharacterOfPosition(node.getStart()); return { line: line + 1 }; } private isUseEffect(node: ts.CallExpression): boolean { const expr = node.expression; return ts.isIdentifier(expr) && expr.text === 'useEffect'; } }

3.2 LLM 批量重构器

interface RefactorTask { type: string; files: string[]; prompt: string; } class LLMRefactorer { /** 批量重构：按类型分组，同类型共享 Prompt */ async refactor(tasks: RefactorTask[]): Promise<Map<string, string>> { const results = new Map<string, string>(); for (const task of tasks) { for (const file of task.files) { const source = await this.readFile(file); const refactored = await this.refactorFile( source, task.type, task.prompt ); results.set(file, refactored); } } return results; } private async refactorFile( source: string, type: string, instruction: string ): Promise<string> { const prompt = `重构以下 React 代码。 重构类型：${type} 重构要求：${instruction} 规则： 1. 保持功能完全不变 2. 保持所有导出接口不变 3. 不要添加新的依赖 4. 保持代码风格一致 原始代码： ${source} 输出重构后的完整代码，不要省略任何部分。`; return await this.callLLM(prompt); } }

3.3 重构验证器

import { execSync } from 'child_process'; class RefactorValidator { /** 验证重构结果：类型检查 + 测试 */ validate(filePath: string, original: string, refactored: string): { valid: boolean; errors: string[]; } { const errors: string[] = []; // 1. TypeScript 类型检查 try { execSync(`npx tsc --noEmit ${filePath}`, { encoding: 'utf-8' }); } catch (e: any) { errors.push(`类型检查失败: ${e.stdout}`); } // 2. 导出接口一致性检查 const originalExports = this.extractExports(original); const refactoredExports = this.extractExports(refactored); if (originalExports.join(',') !== refactoredExports.join(',')) { errors.push(`导出接口不一致: ${originalExports} vs ${refactoredExports}`); } // 3. 运行相关测试 try { execSync(`npx jest ${filePath.replace('.tsx', '.test.tsx')}`, { encoding: 'utf-8', }); } catch (e: any) { errors.push(`测试失败: ${e.stdout}`); } return { valid: errors.length === 0, errors }; } private extractExports(code: string): string[] { const exportRegex = /export\s+(?:default\s+)?(?:function|const|class)\s+(\w+)/g; const exports: string[] = []; let match; while ((match = exportRegex.exec(code)) !== null) { exports.push(match[1]); } return exports.sort(); } }