用途:系统化排查并修复 Flows 应用性能问题,覆盖重渲染、查询模式、分页、无界抓取、对查询结果调用 LLM、包体积与内存泄漏。指定 $ARGUMENTS 时只修该范围,未指定则处理整个应用;核心原则是先度量,禁止盲目优化。
主要能力与步骤:1) 用 pnpm run build 与 pnpm run preview 跑生产构建,用 Lighthouse 和 React Profiler 记录基线渲染次数与耗时。2) 修不必要的重渲染:内联对象/数组用 useMemo、事件处理用 useCallback、Context 值 memo 化,仅对 Profiler 确认的纯展示组件加 React.memo。3) 优化 DMS 查询:读密集路径优先走 query/search(Elasticsearch),少用 list;含硬性门槛——不得把 chat.completions 映射到 DMS 行上,必要时限定 5 次、上限 50 次并缓存、仅用户触发。4) 客户端过滤改为服务端过滤,API 支持即移入请求 filter,并做字段投影。5) 数据抓取与分页:显式 limit、只取所需属性、避免每次渲染发起请求、串行改 Promise.all、偏移分页改 cursor 分页、fetch-all 循环改 useInfiniteQuery。6) 控制请求频率:搜索输入加 300ms 防抖、轮询间隔≥30s、加 staleTime、共享 hook 去重。7) 超约 50 项列表用 @tanstack/react-virtual 虚拟化。8) 非首屏重页面与大型第三方组件用 React.lazy 与 Suspense 懒加载。9) 用 rollup-plugin-visualizer 分析包体,替换完整 lodash、moment 等,分析后移除插件。10) 检查 useEffect 订阅、定时器、事件监听与 fetch 的清理(AbortController、clearInterval 等),修复内存泄漏。
使用方式:该技能以 pnpm 项目脚本和 grep 搜索为入口,逐项应用并对照基线复测。限制:依赖 Flows 应用与 Cognite DMS SDK 环境;未提供具体版本、收费或性能提升数值。