跳到主要内容
版本：1.3.2

性能

核心原则​

  • 从一开始就为性能而构建
  • 测量以用户为中心的指标（LCP、FID、CLS）
  • 持续监控并定期优化

必备工具​

  • web-vitals, lighthouse, bundlesize, webpack-bundle-analyzer
  • @perfume/react, @sentry/react, datadog-browser-rum

核心指标和目标​

指标目标
LCP< 2.5s
FID< 100ms
CLS< 0.1
Bundle< 250KB

如何监控​

  • 使用 web-vitals 在应用中跟踪 LCP、FID、CLS
  • 运行 npm run analyze:bundle 进行包大小分析
  • 运行 npm run test:performance 进行组件基准测试
  • 使用 Lighthouse 进行审计：npm run audit:lighthouse

示例：跟踪 Web Vitals​

import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);

优化技巧​

  • 对大型组件使用代码分割和懒加载
  • 分析并减少包大小
  • 监控渲染时间和内存使用

CI/CD 检查​

  • 在您的管道中添加包大小和 Lighthouse 检查

快速命令​

  • npm run analyze:bundle - 包分析
  • npm run test:performance - 性能测试
  • npm run audit:lighthouse - Lighthouse 审计

保持组件快速、小巧且以用户为中心，以获得最佳结果。