---
name: frontend-performance
when: '前端性能, 页面加载, 首屏时间, 性能优化, 懒加载, 代码分割, bundle, 白屏时间, FCP, LCP, 内存泄漏'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-frontend-performance
asset_kind: pattern
lifecycle_status: active
owner_mechanism_id: mc-frontend-pattern
authority: supporting
routes:
  - '*'
primary_triggers:
  - 前端性能
  - 页面加载
  - 首屏时间
  - 性能优化
  - 懒加载
  - 代码分割
  - bundle
  - 白屏时间
  - FCP
  - LCP
  - 内存泄漏
priority: P2
specificity: 3
version: 1.1.0
last_reviewed: '2026-06-01'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
stages: ["编码与单元测试", "架构设计"]
---

## 决策规则
- 路由级别必须使用懒加载（React.lazy / dynamic import），禁止首屏加载所有页面代码
- 大型第三方库（图表、富文本编辑器）必须按需加载，禁止全量引入
- 图片必须使用懒加载（Intersection Observer 或 loading="lazy"），大图必须压缩和适配分辨率
- 列表数据超过 100 条必须使用虚拟滚动（react-window / react-virtualized）
- 组件卸载时必须清理副作用（定时器、WebSocket、事件监听），防止内存泄漏
- useEffect 依赖数组必须准确，禁止无依赖导致每次渲染执行
- 重复渲染必须用 React.memo / useMemo / useCallback 优化，但禁止过度优化（简单组件不需要 memo）
- 首屏关键资源必须预加载，非关键资源延迟加载
- 首屏加载时间必须 ≤ 3s（Fast 3G），超过时必须优化（懒加载、代码分割、CDN）
- 列表渲染超过 100 行必须使用虚拟滚动（react-window / vue-virtual-scroller）
- 组件重渲染必须有明确优化（React.memo / useMemo / shouldComponentUpdate）
- 图片资源必须使用 WebP 格式 + CDN 加速 + 懒加载
- 生产构建必须开启 Tree Shaking + Code Splitting + Gzip 压缩

## 验收项
- [AC-01] 路由级别懒加载
- [AC-02] 大型库按需引入
- [AC-03] 组件卸载清理副作用
- [AC-04] useEffect 依赖准确无冗余执行
- [AC-05] 长列表使用虚拟滚动
- [AC-06] 首屏 ≤ 3s
- [AC-07] 长列表虚拟滚动
- [AC-08] 图片 WebP + CDN + 懒加载
- [AC-09] 生产构建优化开启
