Firebase托管:如何防止为SPA的index.html缓存

问题描述:

我在Firebase上托管了一个SPA,几乎所有路径都被重写为 index.html 。我正在使用基于Webpack哈希的缓存清除,因此我想始终避免缓存 index.html ,而不要缓存任何其他文件。我发现很难做到这一点。具体来说,我的文件布局如下:

I'm hosting an SPA on firebase where almost all paths get rewritten to index.html. I'm using webpack hash based cache busting, so I want to always prevent caching of my index.html but not any other files. I'm finding it surprisingly difficult to do so. Specifically, my file layout looks like this

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

我从开始在阅读文档中的引用之前,先使用 sources: index.html


每个定义必须具有不管使用全局符号

好吧,所以我猜想我需要在路径上放置一个文件,而不是简单的glob,这些文件指定了我想要这些头文件的文件。由于大多数路径都重定向到index.html,因此我需要一个全局域,该域排除所有我不想在其上放置这些标头的路径。

Ok, so instead of a simple glob that specifies the files I want these headers on, I guess I need one on paths. Since most paths redirect to index.html, I need a glob that excludes all the paths I do not want to put these headers on.

作为参考,我的 firebase.json 托管部分如下:

For reference, my firebase.json hosting section looks like this:

{
  "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的示例,不会被缓存

So, to give some examples that redirect to index.html and should not be cached

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

注意:我可以住最后一个被缓存了,因为它在实践中没有被使用。

不会重定向到index.html且不应该缓存的内容

And the things that do not redirect to index.html and should not be cached

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

我最近得到的最接近的是 ** /!(登录| *。 *)几乎适用于上面列出的所有内容,但在 mysite.com mysite.com/上莫名其妙地不起作用。这2个页面没有与此匹配项匹配,我也不知道为什么。

The closest I've gotten on my own is **/!(login|*.*) which works for almost everything listed above, but inexplicably does not work on mysite.com or mysite.com/. Those 2 pages are not getting matched by this glob and I cannot figure out why.

这是我要配置的使用。逻辑是对所有静态文件(如 images,css,js 等)使用缓存。对于所有其他文件,即 source: / * * 将缓存设置为无缓存。因此,对于所有其他文件,可能不会应用 example.com,example.com / index.html,example.com / about-us,example.com / about-us.html 缓存。

Here is the config that I'm using. The logic is to use cache for all static files like images, css, js etc.. For all others, i.e "source": "/**" set cache as no-cache. So for all other files, that maybe example.com, example.com/index.html, example.com/about-us, example.com/about-us.html cache will not be applied.

{
  "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/**"]
  }
}