用途:这是 Workleap 针对 SPA 优先架构整理的 React 性能优化指南,适用于编写新 React 组件、评审性能问题、重构现有 React 代码、优化包体积与加载时间,以及排查不必要的重渲染。
主要能力:规则按优先级与影响程度分为六类。一、消除瀑布请求(CRITICAL):将 await 延迟到真正使用的分支、用 Promise.all() 并行独立操作、按依赖并行、提前启动 Promise 并延后 await。二、包体积优化(CRITICAL):按路由做代码分割、避免 barrel 文件导入、对重型组件使用 React.lazy、按条件加载模块、在用户意图(hover/focus)时预加载。三、重渲染优化(MEDIUM):延迟订阅状态、抽取为记忆化组件、提升非原始类型默认 props、缩小 effect 依赖、订阅派生状态、渲染期间计算派生状态、函数式 setState、惰性状态初始化、简单表达式跳过 useMemo、把逻辑放入事件处理器、对非紧急更新使用过渡、用 useRef 保存瞬态值。四、渲染性能(MEDIUM):对 SVG 外层包裹元素做动画、长列表用 content-visibility、提升静态 JSX、优化 SVG 精度、使用实验性 Activity 组件、条件渲染用三元而非 &&、用 useTransition 处理加载。五、JavaScript 性能(LOW-MEDIUM):避免布局抖动、构建索引 Map、缓存属性访问与函数结果、缓存 Storage API 调用、合并数组迭代、提前长度检查与提前返回、提升 RegExp、用循环求最值、用 Set/Map 做 O(1) 查找、用 toSorted() 保持不可变。六、高级模式(LOW):用 ref 存放事件处理器、应用只初始化一次、稳定的回调 ref。
使用方式:在相应场景下参照各类规则,详细规则与代码示例见 async-rules.md、bundle-rules.md、rerender-rules.md、rendering-rules.md、js-rules.md、advanced-rules.md 等参考文件。
限制:资料未提供安装命令、收费信息、支持的 React 版本或运行平台说明,暂未提供。