用途:这是一份面向 React 单页应用(SPA)的性能优化指南,针对 Workleap 的 SPA 优先架构编写。适合在编写新 React 组件、审查代码、重构现有代码、优化包体积与加载时间、排查不必要重渲染时参考。
主要能力:按优先级分为六类规则。一是消除瀑布请求(关键):将 await 延迟到真正需要的分支、对独立操作使用 Promise.all()、基于依赖并行化、尽早启动 Promise 并延迟 await。二是包体积优化(关键):按路由做代码分割、避免 barrel 文件导入、对重型组件使用 React.lazy、按条件加载模块、在用户意图(悬停/聚焦)时预加载。三是重渲染优化(中等):延迟状态读取、抽取到记忆化组件、提升默认非原始类型 props、收窄 effect 依赖、订阅派生状态、在渲染时计算派生状态、使用函数式 setState、惰性初始化状态、简单表达式跳过 useMemo、把逻辑放进事件处理器、对非紧急更新使用 transition、用 useRef 保存瞬时值。四是渲染性能(中等):动画 SVG 外层包裹元素、使用 CSS content-visibility、提升静态 JSX、优化 SVG 精度、实验性 Activity 组件、显式条件渲染、用 useTransition 处理加载。五是 JavaScript 性能(低到中等):避免布局抖动、构建索引 Map、缓存属性访问与函数结果、缓存 Storage API 调用、合并数组迭代、提前做长度检查与提前返回、提升 RegExp、用循环求最小/最大值、用 Set/Map 做 O(1) 查找、用 toSorted() 保持不可变。六是高级模式(低):事件处理器 refs、应用仅初始化一次、稳定回调 refs。
使用方式:每类规则对应一份参考文档,如 async-rules.md、bundle-rules.md、rerender-rules.md、rendering-rules.md、js-rules.md、advanced-rules.md,详细规则与代码示例需查阅这些参考文件。
限制:资料未提供安装命令、具体 API 用法、适用 React 版本、依赖要求以及各规则的量化收益数据,暂未提供。