CRA项目vendors~main.chunk.js重复下载原因及实现问题咨询

1. vendors~main.chunk.js的正常下载时机与重复下载触发原因 #

CRA（Create React App）默认的webpack打包配置会将node_modules中引用的第三方依赖（React、video.js这类公共库）抽离到单独的vendors~main.chunk.js文件，和业务代码chunk分离，利用长期缓存提升加载性能。

正常下载时机 #

仅在应用首次冷启动、浏览器硬刷新（清空缓存场景下）加载入口资源时触发下载：浏览器解析入口HTML后，会按chunk依赖关系，在加载业务主chunk之前拉取该vendor chunk，加载完成后会被浏览器强缓存，后续重渲染、路由跳转都不会重新请求。

重复下载的核心触发原因 #

所有重复下载本质都是资源缓存匹配失效、或者应用运行时被强制重启，常见场景包括：

• 静态资源的请求URL被意外篡改，浏览器无法命中已有缓存，判定为新资源发起重复请求
• 运行时出现未捕获的严重错误，错误边界未生效导致页面自动重载、或者子应用/容器触发整个应用重新挂载，重新走一遍入口资源加载流程（之前onHover赋值undefined触发的重复下载就属于这类：事件回调传undefined触发运行时报错，导致应用崩溃重载）
• 静态资源响应头配置错误，未返回正确的强缓存/协商缓存头，导致浏览器每次都判定需要重新拉取资源
• 代码中错误将入口chunk的加载逻辑写在高频触发的回调中，重复创建script标签发起资源请求

2. 现有xhook拦截逻辑的问题 #

当前的xhook拦截代码确实是导致本次重复下载的直接原因，问题点如下：

• xhook默认会拦截全局所有XHR/fetch请求，现有代码没有做任何请求范围过滤，只要请求URL不带token且本地存了videoToken就会修改请求URL，会把应用本身加载js/css静态资源的请求也拦截到
• 当拦截到vendors~main.chunk.js的请求时，强行给原始资源URL拼接了?token=xxx参数，浏览器对静态资源的缓存是URL全量匹配的，修改后的URL和原始缓存的资源URL不一致，浏览器会判定这是全新资源，放弃已有缓存重新发起下载；如果拦截触发时原始请求已经发出，还会导致同一个chunk被发起两次请求（原始URL一次、拼接参数后的URL一次）
• 代码本身还有参数拼接的逻辑bug：如果原始URL已经携带了查询参数，直接拼接?会导致URL格式错误，进一步引发资源加载失败、重试的问题

修复方案 #

给拦截逻辑加严格的白名单判断，只拦截需要加token的视频资源请求，放过所有静态资源、非视频域的请求，修复后代码参考：

xhook.before(function(request: any) {
  const videoToken = localStorage.getItem('videoToken')
  // 白名单校验：只拦截指定路径下的视频资源请求，其余直接放行
  if (!request.url.includes('/your-video-resource-prefix/')) {
    return
  }
  // 已经携带token、或者本地无token时直接放行
  if (request.url.includes('token') || !videoToken) {
    return
  }
  // 兼容原有查询参数，正确拼接token
  const paramSeparator = request.url.includes('?') ? '&' : '?'
  request.url = `${request.url}${paramSeparator}token=${videoToken}`
})

如果改完还有重复下载问题，可以打开浏览器Network面板，筛选vendors~main.chunk.js的请求，查看每次请求的URL、触发调用栈，就能定位到具体触发资源请求的代码位置。

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