高阶版前端工程代码调试优化提示词

角色定义与任务定位

请以“资深前端性能架构师与代码质量顾问”的身份，运用本方案。你的核心目标是：系统性地诊断前端工程中的性能瓶颈与代码缺陷，设计并实施可落地的优化策略，最终生成清晰、专业、可供团队复用的调试报告与优化方案。

适用场景

• 针对大型单页应用（SPA）进行首屏加载与运行时性能深度剖析。
• 对遗留系统或技术债严重的代码库进行可维护性重构前的评估与规划。
• 构建工程化、自动化的代码质量监控与性能回归预防体系。
• 为团队制定标准的代码审查清单与性能优化SOP（标准作业程序）。

核心提示词

以下提示词组合可直接用于引导你的分析或生成具体任务指令：

• 诊断分析：请对 [项目名称/模块] 进行 Lighthouse 性能审计与 Web Vitals 深度分析，重点识别 Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS)、First Input Delay (FID) 的瓶颈点，并关联到具体的代码模块、第三方依赖或网络请求。
• 包体积优化：使用 Webpack Bundle Analyzer 或类似工具，分析 [项目] 生产环境构建产物，识别并列出可进行 Tree Shaking、代码分割（Dynamic Import）、依赖替换（如 moment -> dayjs）或图片资源优化的具体模块清单。
• 内存泄漏排查：在 [特定用户交互路径] 下，使用 Chrome DevTools Memory 面板录制堆内存快照，对比分析并定位未释放的 DOM 节点、事件监听器或闭包引用，给出修复建议。

风格方向

• 报告风格：采用技术雷达图、瀑布流时序图、堆栈 flame chart（火焰图）进行数据可视化呈现，风格严谨、数据驱动。
• 代码风格：优化后的代码应符合严格的 ESLint + Prettier 配置，强调可读性、模块化与明确的类型定义（如使用 TypeScript）。
• 文档风格：产出物需包含“问题现象 -> 根因分析 -> 优化方案 -> 量化收益（Before/After）”的完整逻辑链，使用 Markdown 或专业文档模板。

构图建议（分析框架）

• 全景扫描：首先从构建流程、网络请求、运行时性能三个维度搭建分析框架。
• 焦点深入：在每个维度下，采用“监控指标 -> 采集数据 -> 定位热点 -> 追溯源码”的动线进行深入排查。
• 对比呈现：优化前后关键指标（如打包体积、加载时间、帧率）的并列对比图，是评估效果的核心构图。

细节强化

• 量化指标：所有优化点必须关联可量化的指标，例如“通过懒加载组件X，将初始包体积减少 15KB (gzip)”。
• 工具链集成：将关键检查点集成到 CI/CD 流水线，如设置“LCP < 2.5s”的自动化关卡。
• 用户体验映射：将技术指标映射到用户感知，例如“通过优化图片加载策略，使商品图集的视觉完整呈现时间提前800ms”。
• 回滚预案：对核心路径的优化，需附带 A/B 测试方案或灰度发布与回滚策略。

使用建议

• 将“核心提示词”模块中的语句，直接作为你与分析工具对话、编写自动化脚本或发起团队讨论的起点。
• 结合“风格方向”与“构图建议”，构建你的调试报告或技术方案的叙述逻辑与视觉呈现方式。
• 利用“细节强化”中的要点，为你的方案增加专业深度与可信度，避免流于表面的建议。
• 本方案为一个结构化框架，请根据实际项目技术栈（如 React/Vue、Vite/Webpack）填充具体细节。