基于缓存击穿处理SPA更新：解决页面部分加载异常问题

1. 当前场景的最佳处理方案 #

• 紧急兜底：捕获模块加载失败并引导刷新
  针对路由懒加载的场景，在路由配置中为异步组件添加错误捕获逻辑，避免加载缺失模块时应用完全卡住：

  // router/index.js
  const loadAsyncView = (viewPath) => {
    return () => import(`../views/${viewPath}.vue`).catch(() => {
      alert('应用已更新，请刷新页面后重试');
      // 强制刷新并绕过缓存
      window.location.reload(true);
    });
  };
  
  const routes = [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: loadAsyncView('Dashboard')
    }
  ];
  

• 部署层面：原子化流量切换
  不要直接替换运行中的容器，改用蓝绿部署策略：同时启动新旧两个版本的容器，确认新版本资源完全就绪后，再将用户流量切换到新版本，最后销毁旧容器。彻底避免部署过程中用户请求到半更新状态的资源。

2. 实现SPA自动刷新/清除浏览器缓存 #

• 版本号轮询比对
  1. 在Vite配置中注入唯一版本标识（如Git提交哈希或package.json版本号）：

     // vite.config.js
     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import { execSync } from 'child_process';
     
     // 获取Git短提交哈希作为版本号
     const appVersion = execSync('git rev-parse --short HEAD').toString().trim();
     
     export default defineConfig({
       plugins: [vue()],
       define: {
         __APP_VERSION__: JSON.stringify(appVersion)
       }
     });
     

  2. 后端新增版本查询接口（或在现有公共接口中携带版本信息），客户端定时轮询校验：

     // App.vue
     <script setup>
     import { onMounted } from 'vue';
     
     onMounted(() => {
       // 每5分钟轮询一次版本
       setInterval(async () => {
         const res = await fetch('/api/app-version');
         const latestVersion = await res.text();
         if (latestVersion !== __APP_VERSION__) {
           if (confirm('应用有新版本，是否立即更新？')) {
             window.location.reload(true);
           }
         }
       }, 300000);
     });
     </script>
     

• Service Worker 自动更新
  使用vite-plugin-pwa插件配置服务工作线程，自动检测资源更新并触发刷新：

  // vite.config.js
  import { VitePWA } from 'vite-plugin-pwa';
  
  export default defineConfig({
    plugins: [
      vue(),
      VitePWA({
        registerType: 'autoUpdate',
        workbox: {
          globPatterns: ['**/*.{js,css,html,ico,png,svg}']
        },
        notifyUser: true // 自动提示用户有新版本
      })
    ]
  });
  

3. 缓存击穿SPA的避坑模式与技术 #

• 严格区分缓存策略
  • 静态资源（JS/CSS/图片）：依赖Vite默认的缓存击穿机制（文件名带哈希），配置长期缓存规则（如Nginx设置Cache-Control: max-age=31536000, immutable）。
  • 入口文件index.html：必须禁用缓存，避免浏览器缓存旧版本入口导致加载不匹配的资源，Nginx配置示例：

    location / {
      try_files $uri $uri/ /index.html;
      add_header Cache-Control "no-cache, no-store, must-revalidate";
      add_header Pragma "no-cache";
      add_header Expires 0;
    }
    

• 异步组件错误边界
  为所有懒加载组件包裹错误边界组件，单个模块加载失败时仅展示兜底内容，不影响整个应用：

  <!-- components/ErrorBoundary.vue -->
  <template>
    <div class="error-boundary">
      <h3>页面加载失败</h3>
      <button @click="reloadPage">重新加载</button>
    </div>
  </template>
  
  <script setup>
  const reloadPage = () => window.location.reload(true);
  </script>
  

  使用方式：

  const Dashboard = () => import('../views/Dashboard.vue').catch(() => import('../components/ErrorBoundary.vue'));
  

• 原子化部署规范
  确保新版本所有资源上传完成后再对外提供服务，避免用户请求到部分更新的资源。例如Kubernetes中设置滚动更新参数maxUnavailable: 0，或使用Docker Compose的蓝绿部署脚本。
• 初始化版本校验
  在应用启动时，校验已加载资源的版本标识与当前入口文件的版本是否一致，若不一致则直接触发强制刷新。

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