首次下载React bundle时Redux Saga侧效应处理函数无法运行问题求助

问题根因与修复方案 #

根因定位 #

结合「仅新部署首次访问复现、刷新后缓存读取正常」的特征，90%以上的概率是以下三类原因导致：

1. 懒加载Saga chunk的加载时机滞后于Action触发时机
   你拆分Saga做懒加载时大概率和路由/组件绑定动态注入，新部署首次访问时，网络环境下懒加载chunk的下载速度慢于应用初始化速度：应用启动后已经dispatch了需要Saga处理的Action，但对应的Saga还未下载完成、未注入到Saga Middleware启动监听，自然接收不到Action。第二次访问时chunk已存在本地缓存，注入速度快于Action触发，就恢复正常。
2. 部署后新旧资源哈希不匹配，导致首次访问时懒加载Saga chunk加载失败
   如果打包工具配置了资源哈希，新部署后旧的入口bundle还在用户浏览器缓存中未过期，旧入口引用的是旧哈希的Saga chunk，但新部署已经把旧哈希的chunk删除，导致首次访问时Saga chunk 404，无法启动监听。用户刷新后入口bundle更新为新版本，引用的新哈希chunk存在，就恢复正常。
3. （小概率）Saga动态注入逻辑执行顺序错误
   如果动态注入逻辑是先调用store.runSaga()，再执行包含takeLatest的监听代码，会导致监听未注册就启动了Saga，自然收不到Action。

对应修复方案 #

针对加载时机滞后的修复

• 应用启动阶段就需要触发的Action对应的Saga不要做懒加载，直接打包到入口bundle中，非核心路径的Saga再做懒加载拆分。
• 如果一定要拆分启动阶段要用的Saga，可以加Action缓存机制：Saga未注入完成时暂存dispatch的对应Action，注入完成后重放，示例代码：

// 暂存队列
const pendingActionQueue = [];
// 包装原dispatch
const originDispatch = store.dispatch;
store.dispatch = (action) => {
  // Saga未初始化完成时暂存Action
  if (!window.sagaInjected) {
    pendingActionQueue.push(action);
  }
  return originDispatch(action);
}

// 所有懒加载Saga注入完成后重放队列
const injectSagaFinish = () => {
  window.sagaInjected = true;
  pendingActionQueue.forEach(action => store.dispatch(action));
  pendingActionQueue.length = 0;
}

• 调整Saga注入时机：不要绑定到组件挂载/路由匹配，提前在入口文件预加载核心Saga chunk。

针对资源哈希不匹配的修复

• 配置静态资源服务器，给入口html文件设置不缓存的响应头，保证用户每次访问都能拿到最新的入口文件，不会缓存旧的bundle引用，Nginx配置示例：

location ~* \.(html)$ {
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
}

• 打包时开启HTML自动资源注入功能，保证新打包的入口html永远引用最新哈希的bundle文件。
• 部署时保留至少上一个版本的哈希chunk，避免旧入口无法访问对应chunk，做版本兼容。

针对注入顺序错误的修复

• 检查动态注入逻辑，确保执行顺序是：先定义包含takeLatest等监听逻辑的Saga函数，再调用sagaMiddleware.run(yourSaga)，不要搞反顺序。
• 不要重复调用sagaMiddleware.run同一个监听Saga，重复run会导致旧的监听被取消，新监听启动滞后也会漏接Action。

快速验证方法 #

打开浏览器控制台网络面板，勾选「停用缓存」模拟新部署首次访问场景，查看懒加载Saga chunk的加载时机、加载状态，即可快速定位问题类型。

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