SuperAPI AI 工具集

performance-optimization

数据与分析

查看项目

更新于 10-15 19:54

技能介绍

用途:用于优化应用的速度、效率与可扩展性,适合出现页面加载慢(Lighthouse 分数低)、渲染慢、包体积大、数据库查询慢等性能瓶颈时使用。

主要能力与用法:

  1. 性能测量:使用 Lighthouse CLI 采集页面表现,例如全局安装并运行 npm install -g lighthouse、lighthouse https://example.com --view,也可在 CI 中输出 JSON 报告;React 项目可用 web-vitals 采集 CLS、FID、FCP、LCP、TTFB 指标并上报分析平台。
  2. React 优化:用 React.memo 避免不必要的重渲染,用 useMemo/useCallback 缓存计算结果与回调,通过 lazy 与 Suspense 实现路由级与组件级懒加载和代码分割。
  3. 包体积优化:使用 Webpack Bundle Analyzer 分析包体,通过 tree shaking 按需引入(如仅引入 lodash/debounce),并用动态 import 延迟加载依赖。
  4. 图片优化:使用 Next.js Image 组件,设置 width、height、priority、placeholder 与 sizes,并用 WebP 格式与 picture 回退。
  5. 数据库查询优化:消除 N+1 查询(用 include/JOIN),用 EXPLAIN ANALYZE 定位慢查询,创建单列或复合索引,并用 Redis 做查询结果缓存。

输出形式:生成性能优化清单,覆盖前端、后端与测量项,如 Lighthouse 90+、LCP<2.5s、FID<100ms、CLS<0.1 等。

限制与约束:要求先测量后优化,不要猜测;增量改进,一次优化一项;持续做性能监控;禁止过早优化、禁止为性能牺牲可读性。资料未提供具体收费、价格与平台限制信息。