React Vite中Service Worker无法缓存.tsx/.jsx文件的原因

核心原因 #

你的问题出在缓存路径与浏览器实际请求的路径不匹配，具体分两种场景：

1. 开发环境下的路径差异 #

Vite在开发模式中，不会直接让浏览器请求/src/main.tsx这类源码文件。它会对TSX/JSX模块实时转译，浏览器实际发起的请求会带有查询参数（比如/src/main.tsx?import），或者经过内部路径映射处理。而你的Service Worker缓存的是精确的/src/main.tsx路径，当实际请求带参数时，caches.match(req)无法匹配到缓存资源，离线状态下就会请求失败。

2. 生产环境下的资源不存在 #

如果是生产环境，Vite会把TSX/JSX源码编译打包成带哈希的静态资源（比如assets/main.xxxxxx.js），原有的/src/main.tsx路径在构建后根本不存在于服务器上，你缓存这个路径本身就是无效的，自然无法离线访问。

解决办法 #

• 开发环境调试：修改缓存匹配逻辑，忽略请求的查询参数，让caches.match能匹配到缓存的资源：

  const cacheFirst = async (req) => {
    // 忽略查询参数进行匹配
    const responseFromCache = await caches.match(req, { ignoreSearch: true });
    if (responseFromCache) {
      return responseFromCache;
    }
    return fetch(req);
  };
  

• 生产环境正确做法：不要手动缓存源码路径，改用Vite的PWA插件（如vite-plugin-pwa）自动管理缓存资源。这类插件会自动识别打包后的输出文件，生成正确的缓存列表，同时处理资源哈希更新，避免缓存失效问题。

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