SuperAPI AI 工具集

relay-performance

数据与分析

查看项目

更新于 10-15 21:40

技能介绍

用途:面向 Relay 应用的性能优化指南,聚焦数据获取、重渲染、缓存与首屏时间。正确性、命名与架构模式请参考 relay-best-practices 技能;详细 API 文档可查阅 node_modules/relay-runtime/llm-docs/(v20.1.1 后提供)。

主要能力与用法: 一、每屏一个查询:每个屏幕或路由只用一个根查询,Relay 会把各 fragment 数据需求合并为单次网络请求;多个根查询会造成并行冗余请求。 二、渲染根组件前预加载:在 createRoot().render() 前调用 loadQuery,让请求与 React 初始化重叠。 三、用 @defer 延迟非关键内容:侧栏、首屏外内容、未显示的标签页、列表中重型明细等可加 @defer,配合 Suspense 渐进渲染。 四、获取策略:默认 store-or-network 适合多数场景;store-and-network 先显示缓存再后台更新;network-only 仅用于对新鲜度极敏感的少见情况;store-only 用于离线优先。 五、垃圾回收:通过 Store 的 gcReleaseBufferSize(默认 10)保留刚用过的查询,便于返回时秒开;屏幕多可调大,内存受限设备保持保守。 六、服务端过滤与排序:用 GraphQL 字段参数在服务端完成,减少传输与客户端内存。 七、避免无界集合:列表字段始终用 @connection + usePaginationFragment 分页,首页大小按视口取 10–20 项。 八、fragment 保持细粒度:按组件拆分,使只有数据变化的组件重渲染。 九、每个组件一个连接:一个组件只用一个 usePaginationFragment。 十、避免不必要重取:mutation 响应中展开相关 fragment 让规范化存储自动更新,少用 fetchKey、refetchQueries。 十一、只取所需字段,不要预加用不到的字段(有 unused-fields lint 规则)。

适用场景:使用 Relay 的 React 应用性能调优。限制:资料未提供该技能的具体安装方式、平台与授权信息。