如何移除同一资源URL中带?__WB_REVISION参数的重复网络负载？

1. Service Worker配置排查（最高概率诱因） #

绝大多数双倍负载问题都是PWA的SW缓存策略配置错误导致：浏览器先向服务器拉取一次资源，SW进程又重复发起一次相同请求。

• 检查项目vue.config.js中PWA插件配置，若使用@vue/cli-plugin-pwa，确认workbox缓存策略未设置为「缓存+网络并发返回」模式，该模式会主动发起两次请求
• 若使用自定义SW逻辑，检查是否未做请求拦截去重，导致每一次页面请求都会触发SW侧的重复请求
• 快速验证方法：打开Chrome开发者工具 > Application > Service Workers，勾选 Bypass for network 后刷新页面，如果负载大小回归正常，即可定位是SW配置问题

2. Apache服务器缓存规则调整 #

Apache侧缓存头配置错误会导致资源无法被正常复用，触发重复请求：

• 在站点根目录新建/修改.htaccess文件，添加静态资源缓存规则，示例配置如下：

<IfModule mod_expires.c>
  ExpiresActive On
  # 带哈希后缀的静态资源设置1年强缓存
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/* "access plus 1 year"
  ExpiresByType font/* "access plus 1 year"
  # HTML文件仅设置协商缓存，避免缓存旧版本页面
  ExpiresByType text/html "access plus 0 seconds"
  Header set Cache-Control "public, no-cache"
</IfModule>

• 开启Apache的mod_deflate或mod_brotli压缩模块，进一步降低单资源的传输体积

3. Vue业务代码排查 #

排除前两类问题后，检查业务逻辑是否存在重复请求：

• 排查是否有组件重复挂载（比如v-if频繁切换、路由守卫逻辑错误）导致相同接口被重复调用
• 若使用axios等请求库，可以添加全局请求拦截逻辑，短时间内相同参数的相同请求仅发送一次

4. 修复效果验证 #

修复完成后按以下步骤确认效果：

• 清空浏览器缓存、注销已注册的Service Worker，打开Network面板勾选「Disable cache」首次刷新
• 取消勾选「Disable cache」后再刷新2-3次，确认所有静态资源均走disk缓存或SW缓存，无重复200请求，总负载符合预期
  你提供的请求负载截图可直接用来对比修复前后的差异。

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