SuperAPI AI 工具集

reactive-dashboard-performance

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:该技能面向构建生产级响应式仪表盘的开发者,目标是让仪表盘快速加载并具备完整测试覆盖,资料中给出的性能目标为加载小于 100ms。

主要能力:性能方面涵盖骨架屏优先加载(立即渲染骨架、渐进流入数据、200ms 内不显示 spinner)、激进缓存(React Query 的 staleTime 5 分钟、cacheTime 30 分钟、乐观更新、悬停或挂载时预取)、代码分割(路由级分割、组件级 lazy()、预加载关键路径)与记忆化策略(useMemo、React.memo、useCallback)。测试方面涵盖在服务边界 Mock(React Query、分析)、不 Mock UI 组件、优先用 MSW 做 API Mock,以及异步处理(用 findBy* 而非 getBy*)、超时排查与 TestProviders 包装模式。

使用方式:资料给出 React Query 配置示例(staleTime 5 分钟、cacheTime 30 分钟、关闭窗口聚焦与挂载重取、retry 1)、骨架屏模式示例(data 存在则渲染真实组件,否则渲染骨架),以及测试包装器示例(QueryClientProvider 与 AuthProvider 包裹 children)。调试测试超时时建议先用 screen.debug() 查看实际 DOM,检查未 Mock 依赖与控制台报错,必要时用 waitFor 增加超时。

适用场景:构建 Linear、Vercel、Notion 级别的仪表盘,需要骨架加载、缓存、预取与异步组件测试的 React 项目。

限制:资料未提供安装命令、具体平台要求、收费信息或版本兼容说明;示例代码为片段,需结合项目实际调整。