编辑React组件重载时bundle.js加载耗时过长如何解决

已知现象 #

所有React项目（含初始化后无任何业务代码的最小demo），修改代码触发热重载时页面加载耗时稳定在30秒以上，浏览器Network面板确认耗时集中在bundle.js加载环节，以下操作尝试后均无效果：

• 重新安装yarn、react-scripts依赖
• 移除全部eslint相关依赖与配置
• 将Intel芯片版MacBook Pro升级至最新macOS Monterey系统
• 对应加载状态可参考Chrome浏览器Network面板中bundle.js的加载记录截图

排查修复步骤（按命中概率从高到低排序） #

1. 排查系统网络拦截/代理配置（Intel Mac升级Monterey后最高发诱因）
   • 完全退出所有全局代理、抓包工具（包括Clash、Surge、Charles、Fiddler等），这类工具会对webpack dev server返回的未压缩chunk做逐字节扫描解析，很容易把加载速度拖到30秒以上，退出后直接刷新页面验证即可。
   • 打开macOS系统设置-网络-防火墙，检查是否对Node.js进程设置了入站连接拦截，拦截状态下dev server的资源传输会触发系统层超时重试，刚好卡30秒左右的阈值，临时关闭防火墙或给Node放开权限即可恢复。
2. 修正浏览器开发者工具配置
   打开Chrome DevTools的Network面板，确认：
   • 没有开启「Slow 3G」「Fast 3G」这类网络节流选项，很多人调试时开了节流忘记关闭，会稳定把大体积静态资源的加载速度压到几十秒级别
   • 勾选「Disable cache」选项，避免旧的bundle缓存异常导致的重复加载
3. 调整react-scripts开发环境配置
   • 在项目根目录新建.env文件，写入以下配置关闭开发环境不必要的构建开销：

     GENERATE_SOURCEMAP=false
     FAST_REFRESH=true
     WDS_SOCKET_PORT=0
     

   • 修改package.json中的启动脚本，调高Node进程内存上限，避免默认内存限制触发频繁GC停顿拖慢构建和传输：

     "scripts": {
       "start": "NODE_OPTIONS=--max-old-space-size=4096 react-scripts start"
     }
     

     注意：Intel芯片Mac不要加arm64架构相关的启动参数，否则会触发Rosetta转译进一步拖慢速度
4. 依赖层兜底修复
   • 删除项目下的node_modules文件夹和yarn.lock/package-lock.json文件，用普通用户权限重新执行依赖安装，不要加sudo：root权限安装的依赖会让webpack的文件监听走高权限校验链路，文件读取速度会出现量级下降。
   • 如果当前使用的是react-scripts 5.x版本，可直接降级到4.0.3稳定版验证：5.x内置的webpack 5对部分Intel机型的macOS Monterey系统存在文件监听适配bug，会导致热更新构建和资源传输耗时异常飙升，降级命令：

     yarn remove react-scripts
     yarn add react-scripts@4.0.3 --dev
     

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