使用Vite PWA升级站点后Workbox发起大量请求是否正常？

问题场景 #

我将一个基于React路由代码分割的站点迁移至Vite.js并搭配其PWA插件。生产站点升级到最新版本后，在Chrome中刷新页面时，发现Workbox在后台发起了100+次针对React组件文件对应的JS脚本请求。该行为仅在站点升级、Service Worker更新且缓存清空时出现，且这些请求的响应均被重定向至index.html；Firefox中无此问题。

Vite配置 #

export default defineConfig(async () => {
  return {
    plugins: [
      importToCDN(),
      VitePWA({
        base: "/",
        registerType: "prompt",
        manifest: {
          name: "xxx",
          short_name: "xxx",
          icons: xxx,
          display: "standalone",
          start_url: `xxx`,
          orientation: "portrait",
        },
      }),
      react({
        babel: {
          parserOpts: {
            plugins: ["decorators-legacy", "classProperties"],
          },
        },
        include: "**/*.{jsx,tsx}",
      }),
      viteS3(),
    ],
  };
});

React路由代码分割示例 #

import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: (
       <React.Suspense>
           <Outlet />
       </React.Suspense>
    ),
    children: [
     {
        path: "/home",
        lazy: () => import("./pages/home"),
     },
     {
        path: "/about",
        lazy: () => import("./pages/about"),
     }
    ],
  },
]);


const root = createRoot(document.getElementById("container")); // createRoot(container!) if you use TypeScript
root.render(
    <RouterProvider router={router} />

);

问题解答 #

结论 #

这种大量请求的现象不属于正常行为，是Workbox处理预缓存资源时的异常表现。

原因分析 #

1. 浏览器差异：Chrome与Firefox对Service Worker的缓存拦截、资源校验逻辑存在差异，Chrome下Workbox默认规则可能误将React路由分割生成的动态chunk纳入预缓存清单。
2. 预缓存规则缺失：当前VitePWA配置未自定义Workbox规则，默认的glob匹配可能把动态导入的chunk文件当成了需要预缓存的静态资源，而这些chunk的请求路径在生产环境中无法正确匹配，导致服务器重定向到index.html。

解决方案 #

1. 自定义Workbox预缓存规则：在VitePWA配置中添加workbox选项，排除动态chunk，只缓存必要资源：

VitePWA({
  // 原有配置...
  workbox: {
    globPatterns: ['**/*.{html,js,css,png,jpg,jpeg,svg,ico}'],
    exclude: [/chunk-.*\.js$/], // 过滤路由分割生成的chunk文件
  },
})

2. 优化服务器重定向逻辑：确保服务器对不存在的资源返回200状态码的index.html，避免Workbox将3xx重定向视为资源加载异常。
3. 检查预缓存清单：构建完成后查看生成的precache-manifest.*.js文件，确认清单中仅包含入口文件、静态资源、manifest等必要内容，无多余的动态chunk路径。

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