使用RTK Query的onQueryStarted处理器导致CPU占用过高

问题定位 #

在RTK Query的onQueryStarted处理器中使用apiSlice.util.updateQueryData修改Immer draft对象时，即使未运行项目，仅打开IDE就会出现CPU占用率80-90%的情况，注释该代码段后恢复正常，官方示例代码也存在相同问题。

可行解决方案 #

1. 排查IDE插件与静态分析工具 #

• 暂时禁用IDE中与Redux、Immer相关的语法高亮/代码分析插件，观察CPU占用是否下降。
• 临时关闭ESLint或TypeScript的实时检查功能，排查是否是类型分析或规则校验导致的资源消耗过高。

2. 重构updateQueryData的回调逻辑 #

将Immer draft的修改逻辑抽离为独立函数，避免IDE对嵌套回调函数进行过度静态分析：

// 抽离独立的修改逻辑函数
const updatePostReaction = (draft, postId, reaction) => {
  const post = draft.find(post => post.id === postId)
  if (post) {
    post.reactions[reaction]++
  }
}

// 在onQueryStarted中调用
const patchResult = dispatch(
  apiSlice.util.updateQueryData('getPosts', undefined, (draft) => updatePostReaction(draft, postId, reaction))
)

3. 升级依赖版本 #

• 将Redux Toolkit升级到最新稳定版本，部分旧版本可能存在与IDE静态分析工具不兼容的问题。
• 确保项目中Immer版本与Redux Toolkit内置的Immer版本一致，避免版本冲突导致的解析异常。

4. 调整IDE设置 #

• 降低TypeScript的严格检查级别（如暂时关闭strictNullChecks），减少静态分析的计算量。
• 调整IDE的文件监听范围，排除node_modules、dist等不必要的文件夹，降低资源占用。

内容的提问来源于stack exchange，提问作者Владимир Шустров