React Native生产环境API请求远慢于开发环境问题求助

核心问题根因排查方向 #

1. 服务端侧问题 #

• 冷启动异常
  若生产环境使用Serverless架构、容器化部署且最小实例数为0，长时间无请求时服务实例会被回收，首次请求需要重新拉取镜像、启动服务进程，会产生10-20秒的额外耗时，开发环境因请求频繁实例始终处于活跃状态无该问题。
  修复方案：配置服务预热策略，新增定时任务每分钟请求一次服务健康检查接口，保持实例活跃；容器部署场景调整最小实例数≥1，避免实例被完全回收。
• 安全规则拦截
  生产环境通常部署WAF、风控类安全组件，首次请求会触发IP校验、行为检测逻辑，校验通过后后续请求会直接放通，导致首次TTFB极高。
  修复方案：联系运维调整安全规则，对App客户端API请求降低检测阈值，将App专属UA、可信请求来源加入白名单。
• DNS解析延迟
  首次请求时客户端、运营商侧无域名缓存，需要完整走DNS解析流程，后续请求缓存生效后耗时恢复正常。
  修复方案：客户端集成HTTPDNS服务，启动阶段提前预解析API域名；调整域名DNS解析TTL为300s以内，选用大厂公共DNS服务提升解析稳定性。

2. 客户端侧问题 #

• 网络库配置不合理
  apisauce底层依赖axios，默认未开启连接复用、连接池配置偏小，首次请求需要完成TCP握手、TLS认证，上传图片场景下有限的连接被占满后，后续请求需要排队等待连接释放，导致耗时飙升。
  修复方案：调整apisauce全局配置，开启keep-alive、扩大连接池容量，参考配置如下：

  import { create } from 'apisauce'
  import http from 'http'
  import https from 'https'
  
  const api = create({
    baseURL: 'YOUR_API_BASE_URL',
    timeout: 15000,
    headers: {
      'Connection': 'keep-alive'
    },
    // 开启连接复用，调整最大连接数
    httpAgent: new http.Agent({ keepAlive: true, maxSockets: 15 }),
    httpsAgent: new https.Agent({ keepAlive: true, maxSockets: 15 })
  })
  

• 首屏线程阻塞
  生产环境JS bundle打包后，首屏如果存在大量同步初始化逻辑、未拆包，会阻塞JS线程，导致请求发起时机被延迟，表面上看是TTFB偏高。
  修复方案：开启Hermes引擎，使用分包能力将非首屏逻辑异步加载，首屏仅保留登录相关的必要初始化逻辑。
• 图片上传逻辑不合理
  生产环境上传图片未做压缩、用JS层逻辑处理上传，会占用大量JS线程资源、占满网络请求队列，导致后续登录请求被阻塞。开发环境有调试限制阈值不会触发该问题，生产环境无限制会触发异常。
  修复方案：上传图片前先做分辨率压缩、质量压缩，使用react-native-blob-util等原生网络库处理上传逻辑，避免阻塞JS线程。

3. 链路层问题 #

• CDN配置错误
  若API接口配置了CDN加速，首次请求CDN无缓存需要回源拉取数据，后续请求命中缓存后耗时恢复正常。
  修复方案：调整CDN规则，动态API接口关闭CDN缓存，仅对静态资源开启CDN加速。
• 运营商链路适配差
  生产环境服务器线路对部分运营商适配不佳，首次路由协商耗时偏高。
  修复方案：接入多线BGP机房，使用云厂商全球加速服务优化跨运营商、跨区域访问链路。

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