React应用仅在Developer模式下严重卡顿，寻求排查方案

这种只在开发模式发作、生产模式却一切正常的性能问题确实挺棘手的，我来分享几个实战中常用的排查方向，应该能帮你定位到问题根源：

1. 聚焦开发环境特有的代码逻辑 #

开发模式下React和构建工具会注入大量调试相关的逻辑，先从这里入手：

• 检查那两个模块里是否有仅在开发环境执行的代码（比如用process.env.NODE_ENV !== 'production'包裹的片段），这类代码很可能藏着无限循环、重复计算或者高频DOM操作的问题
• 确认模块是否受React StrictMode影响：StrictMode在开发模式下会重复调用useEffect、constructor等生命周期方法，如果模块里的逻辑没处理好重复执行的情况，很容易导致CPU占用飙升

2. 精准定位性能瓶颈的技巧 #

如果直接录性能数据没头绪，可以试试更针对性的分析方法：

• 用Chrome DevTools的Performance面板，录制时勾选「Memory」选项，结束后重点查看两个模块对应的调用栈，按「Self Time」排序找耗时最久的函数；也可以用「火焰图」视图，观察是否有持续堆叠的调用
• 在模块的关键函数前后手动埋点：console.time('模块A-函数X')和console.timeEnd('模块A-函数X')，精准测量每个环节的执行时间，快速锁定拖慢速度的代码段
• 尝试逐步注释模块代码，每次注释一部分后刷新页面，观察CPU和内存变化，逐步缩小问题范围

3. 检查Webpack开发模式的配置细节 #

即使你简化了配置，有些开发模式默认的设置也可能是诱因：

• 试试降低source map的开销：如果当前用的是devtool: 'eval-cheap-module-source-map'这类高消耗模式，换成devtool: 'eval'再测试，复杂模块生成source map时可能占用大量资源
• 检查是否有针对这两个模块的特殊loader配置：比如Babel的某些开发专属插件，可能导致转译后的代码出现性能问题
• 关闭webpack-dev-server的热更新（hot: false）试试，如果问题消失，大概率是热更新时模块的重新渲染逻辑有漏洞

4. 排查模块依赖与自身问题 #

• 检查模块是否引入了开发专属依赖包：有些包在开发模式下会做大量日志、校验或模拟数据操作，直接拉低性能
• 把这两个模块单独抽离到一个最小的React项目中运行，排除主项目其他代码的干扰，确认问题是否来自模块本身
• 排查内存泄漏：开发模式下频繁的模块热更新或渲染，会让内存泄漏问题更明显，检查模块里是否有未清理的定时器、订阅，或者无限增长的数组/对象

内容的提问来源于stack exchange，提问作者jrewing