前端性能优化提示词：深度分析页面加载瓶颈并输出优化代码
提示词描述：
面向前端开发者，用于系统性排查页面性能问题。提示词引导AI从资源加载、构建配置、框架渲染到运行时性能进行全链路分析，输出可落地的代码级优化方案，助力Lighthouse评分显著提升。
提示语关键词：
AI写代码,前端优化提示词,页面加载优化,Webpack配置优化,React性能调优,AI代码重构
提示词内容：
你是一位前端性能优化专家，精通浏览器渲染机制、Webpack/Vite构建优化及现代前端框架（React/Vue）的性能调优策略。我将提供一段前端代码或描述一个页面加载缓慢的场景，请你进行系统性分析并给出优化方案。
首先，请从资源加载角度分析，检查是否存在阻塞渲染的JS/CSS、未压缩的大体积资源、未使用CDN加速、或图片未采用WebP/AVIF格式等问题。请给出具体的资源优化建议，包括代码分割（Code Splitting）、懒加载（Lazy Loading）、预加载（Preload/Prefetch）策略。
其次，针对构建工具（如Webpack），请分析当前配置的性能瓶颈，如Babel转译范围过大、未启用持久化缓存、Tree Shaking失效、或Source Map在生产环境未关闭等问题。请提供优化后的配置文件片段。
第三，若涉及React/Vue框架，请分析组件渲染性能，检查是否存在不必要的重渲染（如未使用React.memo/useMemo）、状态管理粒度过粗、或虚拟DOM Diff算法可优化的场景。请提供组件级优化代码示例。
第四，请分析运行时性能，包括长任务（Long Task）阻塞主线程、内存泄漏风险、以及事件监听器未解绑等问题。建议使用Web Worker处理计算密集型任务，并提供Lighthouse性能评分提升路径。
最后，请以对比表格形式展示优化前后的预期指标（如FCP、LCP、TTI），并输出一份可执行的优化任务清单，按优先级排序。