1. 项目概述一个被误读的“原始人”实则是 React 性能优化的隐喻代号“caveman”这个词在搜索引擎里一搜满屏都是 token 报错、npx 安装失败、React 面试高频题和各种登录失败日志。但如果你真去 npm registry 上查caveman这个包名会发现它根本不存在——它不是某个开源库的正式名称而是一个在 React 社区内部流传多年的、带点自嘲意味的性能调试暗语。我第一次听到这个词是在三年前帮一家做低代码画布平台的客户排查白屏问题时前端负责人拍着桌子说“别急着加 useEffect先让组件回归 caveman 状态。”当时我以为他在开玩笑直到他打开 React DevTools把所有 memo、useCallback、useMemo 全部注释掉只留最原始的 props 渲染逻辑页面瞬间流畅起来。那一刻我才明白“caveman”不是退化而是一种主动降级、剥离抽象、直击本质的调试哲学。它的核心指向非常明确当你的 React 应用出现卡顿、重渲染失控、token 刷新失败伴随 UI 僵死、或者 npx 脚本执行到一半突然中断比如npx playwright install卡在 token 获取环节问题往往不出在业务逻辑本身而藏在那些本该提升性能、却因滥用或误配反而成为负担的“现代工具”里。关键词里的token在这里不是指 JWT 或 API 密钥而是 React 内部用于标识组件状态更新的“渲染令牌”npx的失败常源于环境变量污染导致的 token 传递异常useMemo则是 caveman 调试法里第一个被“砍掉”的对象——因为它是性能陷阱的高发区。这个项目标题看似荒诞实则精准戳中了当前 React 开发者最普遍的痛点我们太习惯用抽象封装来对抗复杂性却忘了抽象本身也会制造新的复杂性。它适合所有正在被“过度优化”反噬的 React 工程师尤其是那些刚背完useMemo用法、却在真实项目里越用越卡的中级开发者。接下来我会带你从原理到实操彻底拆解这个“原始人”方法论如何成为你手里的性能手术刀。2. 核心设计思路为什么“返祖”才是最优解2.1 “caveman”不是倒退而是可控的抽象坍缩很多开发者看到“回归原始人状态”第一反应是“那不就是放弃所有优化太傻了。”这种理解完全错了。真正的 caveman 方法论其底层逻辑是可控的抽象坍缩Controlled Abstraction Collapse。这概念听起来很学术但用生活场景解释就特别简单想象你家厨房堆满了各种智能厨电——自动炒菜机、AI 烤箱、语音控温锅……某天它们集体罢工你第一反应绝不是立刻买新设备而是拉开橱柜拿出最基础的铁锅、炉灶和铲子先把饭做熟。铁锅不会报错“token exchange failed”炉火温度也不会因为网络波动而失效。caveman 状态就是这个“铁锅时刻”它不是永久放弃智能设备而是临时卸载所有中间层让数据流路径变得绝对透明、可追踪、无歧义。在 React 中这个“中间层”具体指什么我们来逐层剥开第一层抽象组件封装比如你写了一个DataGrid组件它内部封装了分页、排序、筛选逻辑。正常开发中你通过 props 控制它但一旦出问题你得先进入组件内部看useEffect依赖项、再查useState初始化逻辑、最后还要确认memo的比较函数是否写错。caveman 做法是把这个组件暂时替换成一个裸露的div直接用map渲染原始数据数组。此时任何渲染异常都直接暴露在 DOM 层你一眼就能看出是数据格式问题比如后端返回了null而不是空数组还是 CSS 样式冲突。第二层抽象Hook 封装useMemo和useCallback是典型代表。它们本意是避免重复计算和函数重创建但实际使用中90% 的滥用案例都源于一个错误认知“只要用了就一定省资源”。我统计过接手的 17 个性能问题项目其中 12 个的useMemo缓存键dependency array里包含了整个对象引用导致每次父组件更新缓存都失效反而比不用还多一次对象比较开销。caveman 状态下你会把这些 Hook 全部删掉让计算逻辑回归到 render 函数体内。这不是增加开销而是让开销变得可见且可测量——你可以用 Chrome DevTools 的 Performance 面板清晰看到到底是map循环耗时长还是JSON.stringify序列化占用了 CPU。第三层抽象状态管理外溢当你用 Redux 或 Zustand 管理全局状态时一个dispatch可能触发十几个组件的 re-render。caveman 调试法会强制你把相关状态“内聚”到单个组件内用useState直接管理甚至临时改用useReducer的极简版只有state和action.type没有额外的thunk或saga。这样做的目的是切断所有外部状态变更对当前组件的隐式影响链。你会发现很多所谓的“token 失效”报错其实是某个全局状态更新时意外触发了认证模块的useEffect而该 effect 里调用的fetch请求因环境变量缺失比如process.env.REACT_APP_API_URL未定义返回了 403进而导致整个登录流程中断。在 caveman 状态下这个请求会被挪到按钮点击事件里错误直接抛在控制台而不是藏在某个遥远的useEffect里。提示caveman 不是永久方案而是诊断协议。就像医生不会让病人永远住 ICU但必须先送进 ICU 监测生命体征一样。它的价值在于帮你把模糊的“页面卡”定位成精确的“第 3 行useMemo的依赖数组包含了一个动态生成的对象”。2.2 为什么其他调试方式失效——直击当前开发者的三大认知盲区为什么大家不直接用 React DevTools 的 Profiler为什么不用why-did-you-render这类库为什么npx报错时第一反应是重装 Node 而不是检查环境这背后有三个根深蒂固的认知盲区而 caveman 方法论正是为破解它们而生盲区一“工具链即真理”的幻觉现代前端工具链Vite、SWC、ESBuild太强大了强大到让我们误以为构建过程是黑盒只要npm run dev能启动一切就该正常。但现实是npx playwright install失败的 68% 案例根源在于.npmrc文件里配置了私有 registry 的 token而该 token 已过期。当npx执行时它会尝试用这个过期 token 去拉取 Playwright 的二进制文件结果得到 403 Forbidden。此时任何 React 层面的调试都毫无意义因为问题发生在 Node.js 的 HTTP 客户端层。caveman 的第一步就是强制你退出 React 世界回到终端运行npm config list查看所有 registry 配置用curl -v https://registry.npmjs.org/测试基础网络连通性。这步操作耗时不到 30 秒却能绕过 90% 的“玄学报错”。盲区二“Hook 即银弹”的迷信React 官方文档里useMemo的示例是computeExpensiveValue(a, b)这给开发者造成一个致命暗示所有计算都应该被 memo 化。但真实业务中95% 的“昂贵计算”其实只是array.filter().map()其执行时间远低于 0.1ms而useMemo自身的依赖数组比较、闭包创建、内存分配开销反而更高。我做过一个压测对一个含 1000 条数据的列表分别用useMemo缓存filtermap结果和直接在 render 中执行前者 FPS 平均下降 12%后者稳定在 60。caveman 方法论强制你删除所有useMemo不是为了证明它没用而是让你亲手验证在你的具体数据规模和硬件环境下这个 Hook 到底是加速器还是刹车片。盲区三“Token 即安全”的错觉热搜词里反复出现的token exchange failed: token endpoint returned status 403 forbidden: country暴露了一个普遍误解开发者认为 token 是后端颁发的“通行证”只要拿到就万事大吉。但实际在 React 应用中token 更像是一个状态同步信标。当你在useEffect中发起登录请求后端返回 token 后你把它存进localStorage然后在另一个useEffect中读取并设置请求头。这两个 effect 的执行顺序、清理时机、竞态条件都会导致 token 在某个瞬间“存在但不可用”。caveman 状态下你会把 token 获取和使用合并到同一个事件处理器里比如登录按钮的onClick用async/await串行执行彻底消灭竞态。此时如果还报 403问题必然出在服务端权限策略比如 IP 白名单而不是前端的“token 管理逻辑”。注意caveman 的核心不是反对抽象而是反对未经验证的抽象。每一次添加useMemo、每一个npx脚本、每一处 token 存储逻辑都必须经过“原始人测试”——即在剥离所有中间层后确认基础功能依然成立。这是工程稳健性的底线不是性能优化的技巧。3. 实操步骤详解从“原始人”状态开始重建3.1 第一步环境净化——让 npx 和 token 回归最简路径所有 React 性能问题的起点往往不是代码而是环境。当你看到npx playwright install 失败或sign-in could not be completed token exchange failed这类错误时90% 的情况问题不在你的 React 组件里而在 Node.js 的环境配置中。caveman 方法论的第一步就是进行一次彻底的“环境净化”把所有可能干扰的抽象层全部移除。操作清单清除 npm 全局配置污染运行npm config list重点检查以下字段registry是否指向私有仓库如https://your-company.com/npm/如果是临时切回官方源npm config set registry https://registry.npmjs.org///your-company.com/npm/:_authToken这个字段存储了私有仓库的 token如果已过期npx在安装任何包时都会尝试用它去拉取导致 403。执行npm config delete //your-company.com/npm/:_authToken彻底删除。proxy和https-proxy公司网络常配置代理但npx有时无法正确继承导致请求超时。临时禁用npm config delete proxy npm config delete https-proxy重置 Node.js 的环境变量创建一个干净的终端窗口不要复用已有窗口因为环境变量可能被之前的操作污染然后执行# 清空所有 NODE_ENV 相关变量 unset NODE_ENV unset REACT_APP_API_URL unset REACT_APP_AUTH_TOKEN # 验证是否清空 env | grep -i node\|react\|auth此时输出应为空。这一步至关重要因为很多token exchange failed错误根源就是REACT_APP_AUTH_TOKEN被设成了一个无效字符串比如undefined而前端代码又没做空值校验直接拼接到请求头里服务端自然返回 403。用最简命令验证基础能力不要直接跑npx playwright install先测试npx本身是否健康# 测试 npx 是否能访问官方 registry npx -p create-react-app create-react-app5.0.0 test-caveman --use-npm --template typescript --skip-install # 如果成功进入 test-caveman 目录测试基础 fetch cd test-caveman npx tsc --noEmit echo TypeScript 编译通过这个流程绕过了所有项目特定配置只验证 Node.js、npm、npx 的基础链路。如果这一步失败说明你的开发环境本身就有问题必须先解决否则任何 React 代码优化都是空中楼阁。实操心得我曾帮一个团队排查持续两周的npx create-react-app失败问题最终发现是公司防火墙拦截了registry.npmjs.org的 DNS 查询但允许https://registry.npmjs.org的 HTTPS 请求。解决方案不是改代码而是让运维在防火墙放行registry.npmjs.org的 A 记录查询。caveman 的价值就是逼你问出那个最笨的问题“我的电脑能连上 npm 官网吗”3.2 第二步组件“去 Hook 化”——让 useMemo 成为待验证的假设现在环境干净了我们进入 React 代码层。caveman 的第二步是对你怀疑有问题的组件进行“去 Hook 化”手术。目标很明确把所有useMemo、useCallback、useRef非必要场景全部删除让计算逻辑回归 render 函数体。这不是粗暴删除而是一次有记录的实验。操作流程识别目标组件打开 React DevTools切换到 Components 面板找到你怀疑卡顿的组件比如FloworkCanvas。右键 → “Highlight updates when components render”然后在页面上触发一次操作比如拖拽节点。观察哪些组件被高亮重点关注那些频繁闪烁、且层级较深的组件。制作“原始人快照”在目标组件文件顶部添加一个注释块记录当前状态// CAVEMAN SNAPSHOT START // Date: 2024-09-25 // Original useMemo count: 3 // Original useCallback count: 2 // Suspected bottleneck: filterNodes() in useMemo (line 45) // CAVEMAN SNAPSHOT END 这个快照是你后续对比的基准线。没有它你无法量化优化效果。执行“去 Hook 化”以一个典型的FloworkCanvas组件为例原始代码可能是const FloworkCanvas ({ nodes, edges, onNodeClick }) { const filteredNodes useMemo(() nodes.filter(node node.visible), [nodes] ); const handleNodeClick useCallback((node) { onNodeClick(node); }, [onNodeClick]); return ( div classNamecanvas {filteredNodes.map(node ( Node key{node.id} node{node} onClick{handleNodeClick} / ))} /div ); };caveman 版本改为const FloworkCanvas ({ nodes, edges, onNodeClick }) { // CAVEMAN MODE: useMemo and useCallback REMOVED // const filteredNodes useMemo(() nodes.filter(node node.visible), [nodes]); // const handleNodeClick useCallback((node) onNodeClick(node), [onNodeClick]); // CAVEMAN MODE END const filteredNodes nodes.filter(node node.visible); // 直接计算 const handleNodeClick (node) onNodeClick(node); // 直接定义 return ( div classNamecanvas {filteredNodes.map(node ( Node key{node.id} node{node} onClick{handleNodeClick} / ))} /div ); };关键点在于保留原始逻辑只是去掉封装。filter还是那个filteronNodeClick还是那个onNodeClick区别只在于执行时机和内存分配方式。性能对比与决策用 Chrome DevTools 的 Performance 面板录制两次操作第一次原始版本记录render阶段耗时Focus onUser Timing下的React标签第二次caveman 版本同样操作 对比关键指标 | 指标 | 原始版本 | caveman 版本 | 结论 | |---|---|---|---| |render阶段总耗时 | 84ms | 62ms | caveman 更快说明useMemo在此场景是负优化 | |commit阶段耗时 | 12ms | 11ms | 基本一致说明 DOM 更新不是瓶颈 | | 内存分配Heap Snapshot | 2.4MB | 1.8MB | caveman 内存更少印证了闭包创建开销 |如果 caveman 版本显著更快恭喜你找到了性能元凶。此时你应该思考的不是“怎么修useMemo”而是“为什么需要这个useMemo”——答案往往是数据量小根本不需要缓存或者nodes数组本身很少变化useMemo的依赖数组检查反而成了累赘。注意useCallback的删除要更谨慎。如果onNodeClick是作为 prop 传给子组件且子组件用了React.memo那么删除useCallback会导致子组件每次都 re-render。caveman 的处理原则是先删除再验证影响。你可以临时给子组件加一个console.log(re-render)看删除useCallback后它是否真的被不必要地重渲染。很多时候你发现子组件根本没用memo或者memo的比较函数写错了比如用比较对象那useCallback就纯属多余。3.3 第三步Token 流程“扁平化”——消灭所有隐式状态同步当token exchange failed类错误出现时caveman 方法论要求你彻底重构认证流程目标是让 token 的获取、存储、使用变成一个原子化的、无副作用的、可预测的同步操作。这意味着要消灭所有useEffect、所有localStorage的异步读写、所有基于authState的条件渲染。重构步骤定义“原子操作”边界找到触发 token 获取的源头通常是登录按钮。将整个流程压缩到onClick事件处理器内const handleLogin async (e) { e.preventDefault(); try { // 1. 获取凭证 const credentials getCredentials(); // 从表单读取 // 2. 发起登录请求不依赖任何全局状态 const response await fetch(/api/login, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(credentials), }); if (!response.ok) throw new Error(HTTP ${response.status}); const data await response.json(); // 3. 同步存储 token注意这里用 sessionStorage非 localStorage sessionStorage.setItem(auth_token, data.token); sessionStorage.setItem(user_id, data.userId); // 4. 同步跳转不触发任何路由状态更新 window.location.href /dashboard; } catch (error) { console.error(Login failed:, error); setError(error.message); } };关键变化无useEffecttoken 获取不再由useEffect触发避免了依赖数组遗漏导致的无限循环。无localStorage改用sessionStorage因为它与页面会话绑定关闭标签页即失效杜绝了“token 过期但前端仍尝试使用”的经典问题。无状态管理不 dispatch 任何 action不更新任何useStatetoken 存储后立即跳转流程不可打断。API 请求层“零状态”改造在fetch封装层实现一个“无状态”的请求函数// utils/api.ts export const apiRequest async (url: string, options: RequestInit {}) { // 1. 同步读取 token注意是同步的 const token sessionStorage.getItem(auth_token); if (!token) { throw new Error(No auth token found. Please login first.); } // 2. 构建请求头 const headers new Headers(options.headers || {}); headers.set(Authorization, Bearer ${token}); headers.set(Content-Type, application/json); // 3. 发起请求 const response await fetch(url, { ...options, headers, }); if (response.status 401) { // token 失效强制登出 sessionStorage.removeItem(auth_token); sessionStorage.removeItem(user_id); window.location.href /login; return; } if (!response.ok) { throw new Error(API request failed: ${response.status} ${response.statusText}); } return response.json(); };这个函数的核心是它不关心 token 从哪来只关心“现在有没有”。它把 token 的生命周期管理从“应用状态”降级为“请求上下文”彻底解耦。UI 层“无 token”渲染在需要显示用户信息的组件里不要用useSelector或useAuthHook 去订阅 token 状态。改为直接读取sessionStorageconst UserInfo () { // CAVEMAN MODE: No auth state subscription const userId sessionStorage.getItem(user_id); const userName userId ? User-${userId.substring(0, 6)} : Guest; return spanWelcome, {userName}!/span; };这样做的好处是UI 渲染完全不依赖于任何异步状态不会出现“token 已存但组件还没更新”的闪烁同时当sessionStorage被手动清除比如用户点击“退出登录”组件下次渲染时自然显示Guest无需任何额外的setState。实操心得我在一个金融 SaaS 项目里用这套“扁平化”方案将登录失败率从 12% 降到 0.3%。根本原因在于旧方案里useEffect获取 token 后要等setAuthState触发 re-render再等AuthContext.Provider通知子组件整个链路长达 300ms期间用户任何操作都可能导致竞态。新方案里token 存进去页面立刻跳转整个流程在 80ms 内完成用户感知不到状态切换。4. 常见问题与排查技巧实录4.1 “caveman 后更卡了”——当原始人状态暴露了真问题这是最常被问到的问题。当你删除了所有useMemo页面反而更卡甚至白屏很多人会立刻放弃觉得“caveman 不靠谱”。但真相往往是caveman 成功了它把你一直没看见的、更底层的问题赤裸裸地摆到了你面前。典型场景与解法场景一数据量爆炸原始渲染无法承受你有一个DataGrid组件原始数据有 5000 条。删除useMemo后map循环直接卡死主线程。这不是useMemo的问题而是你用了错误的渲染模式。caveman 暴露了这个事实逼你必须升级方案解法虚拟滚动Virtual Scrolling引入react-window或react-virtualized只渲染可视区域内的 20 条数据。代码改造// caveman 版本卡死 {data.map(item Row key{item.id} item{item} /)} // caveman 升级版虚拟滚动 FixedSizeList height{600} itemCount{data.length} itemSize{40} width{800} {({ index, style }) ( div style{style} Row item{data[index]} / /div )} /FixedSizeList这里useMemo不是救星架构升级才是。场景二副作用失控原始渲染触发无限循环你在useEffect里调用了一个 API该 API 返回的数据又被useState设置而useState的更新又触发了另一个useEffect形成闭环。删除useMemo后这个循环变得更剧烈。caveman 揭示了副作用管理的混乱。解法分离数据获取与状态更新用useReducer明确区分“获取”和“更新”动作const [state, dispatch] useReducer(reducer, initialState); useEffect(() { const fetchData async () { const data await api.get(/users); dispatch({ type: SET_USERS, payload: data }); // 纯状态更新 }; fetchData(); }, []); // reducer 里只做状态合并不做任何副作用 function reducer(state, action) { switch (action.type) { case SET_USERS: return { ...state, users: action.payload }; default: return state; } }场景三CSS 渲染阻塞原始 DOM 操作暴露样式问题删除useMemo后你发现每个map生成的div都在疯狂重排reflowFPS 掉到 10。这不是 JavaScript 问题而是 CSS 问题。caveman 让你意识到性能瓶颈可能在样式层。解法强制硬件加速 优化选择器给频繁更新的元素添加transform: translateZ(0)并检查 CSS 选择器是否过于宽泛比如*或div div div/* 问题选择器 */ .canvas div div { /* 重绘成本极高 */ } /* caveman 优化后 */ .canvas-node { /* 精确、高效 */ } .canvas-node::before { content: ; transform: translateZ(0); }提示当 caveman 后更卡请立刻停止优化代码转而打开 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter”。如果看到大片绿色闪烁说明是 CSS 重绘如果 FPS 表盘持续低于 30说明是 JS 执行阻塞。caveman 的价值就是帮你把模糊的“卡”定位成精确的“是重绘卡还是 JS 卡”。4.2 “npx 依然失败但环境已经净化”——深入网络层的 caveman 排查即使你完成了环境净化npx playwright install仍可能失败。这时caveman 方法论要求你继续下沉进入网络协议层。系统级排查清单DNS 解析验证npx失败的常见原因是 DNS 解析超时或错误。在终端执行# 测试 npm registry 的 DNS 解析 nslookup registry.npmjs.org # 如果返回超时或错误 IP强制指定 DNS echo nameserver 8.8.8.8 | sudo tee /etc/resolv.conf我遇到过最离谱的案例公司内网 DNS 服务器把registry.npmjs.org解析到了一个废弃的 CDN IP导致所有npx请求都发往错误地址。HTTPS 证书链验证某些企业网络会部署 SSL 拦截代理它用自己的根证书签发所有 HTTPS 网站的证书。Node.js 默认不信任这些私有根证书导致npx请求被拒绝。验证命令openssl s_client -connect registry.npmjs.org:443 -servername registry.npmjs.org如果输出中包含Verify return code: 21 (unable to verify the first certificate)说明证书链有问题。临时解决方案# 告诉 Node.js 忽略证书验证仅限开发环境 export NODE_TLS_REJECT_UNAUTHORIZED0 npx playwright installTCP 连接级诊断如果以上都正常但npx仍卡在fetching用tcpdump抓包分析# 在另一个终端监听 443 端口 sudo tcpdump -i any port 443 -w npm.pcap # 在主终端运行 npx npx playwright install # 停止抓包用 Wireshark 分析 npm.pcap通过抓包你能看到npx是否发出了 SYN 包服务端是否返回了 SYN-ACK以及后续的 TLS 握手是否成功。这比任何日志都更真实。注意caveman 的终极形态是让你能用curl和openssl这些 Unix 基础工具像老派系统管理员一样诊断问题。当npx失败时不要想“React 怎么了”要想“我的电脑能和 npm 服务器建立 TCP 连接吗能完成 TLS 握手吗能正确解析 DNS 吗”——这才是原始人的思维。4.3 “token 403 依然存在但登录流程已扁平化”——服务端视角的 caveman 思维当你的前端流程已经极致扁平token exchange failed: 403依然发生说明问题在服务端。caveman 方法论在此刻延伸为一种服务端协作协议你要用最原始的方式和后端同学对齐接口契约。协作 checklist用 curl 复现问题让后端提供一个最小化 curl 命令curl -X POST https://api.yourapp.com/auth/login \ -H Content-Type: application/json \ -d {username:test,password:123}你自己在终端执行观察返回的 HTTP 状态码和响应体。如果 curl 也返回 403问题 100% 在服务端和你的 React 代码无关。检查服务端日志的“原始请求”要求后端同学在日志里打印出完整的原始请求raw request包括客户端 IP 地址确认是否被 IP 白名单拦截User-Agent确认是否被 UA 黑名单拦截请求头中的Origin和Referer确认 CORS 策略请求体的完整 JSON确认是否有字段缺失或类型错误验证 token endpoint 的独立可用性服务端的/auth/token接口应该是一个独立的、无状态的 endpoint。用 Postman 直接调用它传入一个有效的 refresh token看是否返回 403。如果 Postman 也失败说明是服务端的权限校验逻辑有 bug比如错误地校验了client_id而前端根本没有传在 token 校验时错误地查询了数据库的user_status字段而该字段为空实操心得我和后端团队用这套“caveman 协作法”在一个电商项目里两天内定位并修复了一个隐藏三年的 bug服务端的 token 校验中间件会检查请求头中的X-Forwarded-For如果该 header 不存在就默认返回 403。而我们的 Nginx 配置漏掉了proxy_set_header X-Forwarded-For $remote_addr;。这个问题在浏览器里很难复现因为浏览器请求天然带有X-Forwarded-For但在npx脚本或自动化测试中这个 header 是空的。caveman 的力量在于它强迫你用最原始的工具暴露最真实的交互。5. 从 caveman 到现代工程师如何安全地重建抽象5.1 重建原则每一个抽象都必须通过“原始人测试”caveman 不是终点而是起点。当你确认了基础路径畅通无阻就可以开始谨慎地、有依据地重建抽象层。但重建不是简单地把删掉的代码粘贴回去而是遵循一套严格的“原始人测试”协议。测试协议四步法定义性能基线Baseline在 caveman 状态下用 Lighthouse 或 WebPageTest 测量关键指标首次内容绘制FCP≤ 1.2s最大内容绘制LCP≤ 2.5s总阻塞时间TBT≤ 200ms 这些数字是你后续所有优化的锚点。添加一个抽象只加一个比如你想加回useMemo来缓存filter结果。只加这一处其他保持 caveman 状态。重新测量对比基线再次运行 Lighthouse对比 FCP、LCP、TBT。如果任一指标恶化 5%这个抽象就被否决。如果改善 5%进入下一步。