SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场reactive-dashboard-performance

reactive-dashboard-performance

前端与建站

查看项目

更新于 10-15 15:02

技能介绍

用途

Reactive Dashboard Performance 是一套面向生产环境的技能，用于构建加载迅速且测试完备的响应式仪表盘。目标是将仪表盘做到 <100ms 加载并具备全面的测试覆盖，性能参照 Linear、Vercel、Notion 级别的实现标准。

主要能力

性能模式

  • 骨架屏优先加载（Skeleton-First Loading）：立即渲染骨架屏（感知加载 0ms），数据渐进式流入，对于 <200ms 的加载永远不要显示 spinner。
  • 积极的缓存：React Query 使用 staleTime: 5min、cacheTime: 30min；变更采用乐观更新；在 hover/mount 时预取。
  • 代码分割：基于路由的分割（Next.js 自动完成）、对重型组件使用组件级 lazy()、预加载关键路径。
  • Memo 化策略：对昂贵计算使用 useMemo、对纯组件使用 React.memo、对稳定引用使用 useCallback。

测试响应式仪表盘

  • Mock 策略：在服务边界 Mock（React Query、analytics），不要 Mock UI 组件（测试真实 DOM），尽可能使用 MSW 做 API Mock。
  • 异步处理：不要用同步查询与 React 竞态，示例中给出错误写法（render 后直接 getByText）与正确写法（使用 await screen.findByText）。
  • 超时调试：超时通常意味着缺少 Mock、查询写错或组件未渲染；使用 screen.debug() 查看实际 DOM，检查控制台是否有未 Mock 的错误。
  • 测试包装器模式：提供 TestProviders 示例，组合 QueryClientProvider、AuthProvider 等上下文。

真实案例参照

  • Linear Dashboard：骨架 → 陈旧数据 → 新数据（感知 <50ms）。
  • Vercel Dashboard：导航 hover 时预取，乐观部署。
  • Notion Pages：无限缓存、本地优先、后台同步。

诊断协议（集成测试超时）

  1. 检查实际渲染内容：render 后调用 screen.debug() 查看真实 DOM。
  2. 查找未 Mock 的依赖：检查控制台 "not a function" 错误，查看测试输出中的网络请求，确认所有上下文均已提供。
  3. 修复异步查询：使用 findBy* 替代 getBy*，必要时增加超时，例如 waitFor(() => {...}, { timeout: 3000 })。
  4. 正确 Mock React Query。
  5. 简化组件树：先单独测试各个 widget，最后再加完整集成测试，复杂查询使用 data-testid。

使用方式

仪表盘加载预算

阶段 目标
骨架渲染 0-16ms（1 帧）
首次数据绘制 <100ms
完全可交互 <200ms
懒加载组件 <500ms

React Query 配置示例

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5min
      cacheTime: 30 * 60 * 1000, // 30min
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      retry: 1,
    },
  },
});

骨架屏模式示例

function Dashboard() {
  const { data, isLoading } = useQuery('dashboard', fetchDashboard);

  // Show skeleton immediately, no loading check
  return (
    <div>
      {data ? <RealWidget data={data} /> : <SkeletonWidget />}
    </div>
  );
}

测试异步处理示例

// WRONG - races with React
render(<Dashboard />);
const element = screen.getByText('Welcome');

// RIGHT - waits for async resolution
render(<Dashboard />);
const element = await screen.findByText('Welcome');

测试包装器示例

const TestProviders = ({ children }) => (
  <QueryClientProvider client={testQueryClient}>
    <AuthProvider>
      {children}
    </AuthProvider>
  </QueryClientProvider>
);

适用场景

  • 需要将 React 仪表盘加载性能优化到亚百毫秒级的项目。
  • 使用 React Query 进行数据获取并需要合理配置缓存的仪表盘。
  • 需要为异步组件、含多个上下文的仪表盘编写集成测试。
  • 调试集成测试超时、异步查询失败、未 Mock 依赖等问题的场景。

限制与常见陷阱

  • 快速加载时不要用 spinner，应使用骨架屏。
  • 未 memo 化的昂贵计算应包裹在 useMemo 中。
  • 不要测试实现细节，应测试用户行为。
  • 不要 Mock 过多，只在边界处 Mock。
  • 不要使用同步测试断言，一切皆异步。
  • 调试测试超时时，始终先用 screen.debug() 查看实际渲染结果。

关于该技能的具体安装方式、支持平台、收费模式与版本要求，资料中暂未提供。