在某前端项目中,我们观察到一个诡异现象:
console.log 等常见性能陷阱。研发通过小蜜咨询 Marmot 团队,获得初步诊断:高频函数调用导致性能问题。
建议方案:将高调用文件加入覆盖率白名单(跳过插桩)。
通过分析首次覆盖率上报数据,映射构建产物 reflectJsonUrl 对应的原始文件,简单累计排序后发现:


某工具函数被调用超 9 万次。于是尝试将高调用文件加入覆盖率白名单。
结果:问题依然存在。
进一步观察发现,这些高调用 hooks 都有一个共性,内部都调用 useModel 的某个公用 model。
但经简单分析:
因为 useModel 性能问题只会导致内部订阅函数(handel) 重复调用,handel 调用不会导致页面多次渲染
useModel(handel)触发多次 -> react合并调度 -> 页面只会渲染一次
→ 初步方向被证伪。