Firebase主机：如何防止SPA的index.html缓存

我在firebase上主持了一个SPA，几乎所有路径都被重写为

index.html

。我使用的是基于webpack哈希的缓存破坏，所以我希望始终防止缓存我的

index.html

，而不是任何其他文件。我发现这样做非常困难。具体来说，我的文件布局如下所示

/
├── index.html
├── login.html
├── js
│   ├── login.ba22ef2579d744b26c65.bundle.js
│   └── main.6d0ef60e45ae7a11063c.bundle.js
└── public
    └── favicon-16x16.ico

在阅读文档中的这段引用之前，我天真地从

“sources:”index.html“

开始

无论使用何种重写规则，每个定义都必须有一个与原始请求路径匹配的源密钥

好的，我想我需要一个路径上的glob，而不是一个简单的glob来指定我想要这些头的文件。因为大多数路径重定向到index.html，所以我需要一个glob，它排除了我不想放置这些头的所有路径

作为参考，我的

firebase.json

宿主部分如下所示：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false,
    "headers": [
      {
        "source": <<<WHAT-GOES-HERE?>>>,
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      }
    ]
  }
}

注意：如果最后一个被缓存，我可以活下去，因为它在实践中没有被使用

以及不重定向到index.html且不应缓存的内容

mysite.com  
mysite.com/  
mysite.com/foo/bar/baz  
mysite.com/index.html 

**/*.* (ideally excluding index.html)
mysite.com/login  

---

我自己得到的最接近的是

**/！（登录|*.*）

它适用于上面列出的几乎所有内容，但在

mysite.com

或

mysite.com/

上无法正常工作。这两个页面与此glob不匹配，我无法找出原因。

这是我正在使用的配置。逻辑是对所有静态文件（如

图像、css、js

等）使用缓存。。对于所有其他，即

“源”：“/**”

将缓存设置为无缓存。因此，对于所有其他文件，可能不会应用example.com、example.com/index.html、example.com/about-us、example.com/about-us.html缓存

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

---

您是否尝试过为

/index.html

另外添加一条规则？添加源glob为“/”的第二节似乎对我有帮助。不过我还是不回答这个问题，因为如果这可以在一个glob/部分中完成，那将更加优雅。在我的文章中添加了webp:）@GijoVargehese，wasm可能也有道理。您如何确保

service worker.js

不被缓存？我发现，通过这种方法，从CDN加载index.html页面的时间增加了300-400ms（就像CDN本身停止缓存一样），即使在比较硬刷新和硬刷新时也是如此。这里有没有什么方法可以两全其美，在文件更改时使缓存无效，让客户端始终从CDN获取最新的内容？更新：回答我自己的问题（很想知道这是个好主意还是个坏主意）-使用缓存控制值：

max age=0，s-maxage=604800

似乎可以在新页面内容上获得我想要的即时客户端更新行为，但仍然在CDN级别进行缓存