用途:为 React 与 Next.js 应用提供性能优化指南,基于 Vercel 工程实践,按影响程度分为 8 个类别,适合在编写新组件或页面、实现数据获取、审查性能问题、优化包体积与加载时间时使用。
主要能力:1)异步模式(关键):避免 API 路由中的瀑布链,提前启动 Promise、延后 await;按依赖并行化;用 Suspense 边界流式输出。2)包体积优化(关键):避免 barrel 文件导入,直接从源文件导入;条件加载模块;延后非关键第三方库;用 next/dynamic 配合 ssr: false 动态导入重组件;在 hover/focus 时预加载。3)服务端性能(高):用 after() 处理非阻塞操作;认证 Server Actions;跨请求 LRU 缓存;React.cache() 去重;避免重复 RSC 序列化;通过组合并行获取;减少边界序列化。4)客户端模式(中高):去重全局事件监听;localStorage 版本化与最小化;被动事件监听;用 SWR 自动去重。5)重渲染优化(中):延后状态读取;收窄 effect 依赖;渲染期派生状态;函数式 setState;提升默认非原始 props;提取 memo 组件;交互逻辑放事件处理器;用 useRef 存瞬态值。6)渲染性能(中):动画用 SVG 外层包裹;CSS content-visibility: auto;提升静态 JSX;防止 hydration 不匹配;用 useTransition 替代手动 loading。7)JavaScript 性能(低中):避免布局抖动;缓存重复函数调用;缓存存储 API 调用;构建索引 Map;用循环求最值。8)高级模式(低):事件处理器存入 ref;应用每次加载只初始化一次。
使用方式:资料未提供具体安装命令或调用方式,仅列出各分类对应的参考文件路径(如 references/async-patterns.md)。
限制:资料未说明收费、价格、平台支持范围或效果保证,相关内容暂未提供。