用途:用于优化应用的速度、效率与可扩展性,适合出现页面加载慢(Lighthouse 分数低)、渲染慢、包体积大、数据库查询慢等性能瓶颈时使用。
主要能力与用法:
- 性能测量:使用 Lighthouse CLI 采集页面表现,例如全局安装并运行
npm install -g lighthouse、lighthouse https://example.com --view,也可在 CI 中输出 JSON 报告;React 项目可用 web-vitals 采集 CLS、FID、FCP、LCP、TTFB 指标并上报分析平台。 - React 优化:用 React.memo 避免不必要的重渲染,用 useMemo/useCallback 缓存计算结果与回调,通过 lazy 与 Suspense 实现路由级与组件级懒加载和代码分割。
- 包体积优化:使用 Webpack Bundle Analyzer 分析包体,通过 tree shaking 按需引入(如仅引入 lodash/debounce),并用动态 import 延迟加载依赖。
- 图片优化:使用 Next.js Image 组件,设置 width、height、priority、placeholder 与 sizes,并用 WebP 格式与 picture 回退。
- 数据库查询优化:消除 N+1 查询(用 include/JOIN),用 EXPLAIN ANALYZE 定位慢查询,创建单列或复合索引,并用 Redis 做查询结果缓存。
输出形式:生成性能优化清单,覆盖前端、后端与测量项,如 Lighthouse 90+、LCP<2.5s、FID<100ms、CLS<0.1 等。
限制与约束:要求先测量后优化,不要猜测;增量改进,一次优化一项;持续做性能监控;禁止过早优化、禁止为性能牺牲可读性。资料未提供具体收费、价格与平台限制信息。