如何为Angular 5应用配置Firebase Hosting实现首页不缓存？

嘿，我帮你把这个Firebase Hosting的缓存配置补全并优化下，确保你的Angular首页不会被浏览器缓存住，同时还能让静态资源享受到缓存的好处——毕竟Angular打包出来的静态资源都带哈希后缀，完全可以放心缓存很久。

首先，你当前的firebase.json里的headers配置还不完整，而且直接全局设置/**的缓存规则不太合理，会影响静态资源的缓存效率。下面是调整后的完整配置片段：

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": "npm --prefix functions run build"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      // 给Angular打包后的静态资源设置长期缓存
      {
        "source": "**/*.@(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      // 强制首页index.html不被缓存
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ]
  }
}

配置说明： #

• 静态资源缓存规则：匹配所有带哈希后缀的静态文件（js、css、图片、字体等），设置max-age=31536000（也就是一年），加上immutable标记告诉浏览器这些资源一旦缓存就不会变更，不用再发起验证请求，大幅提升加载速度。
• 首页缓存规则：专门针对index.html设置严格的缓存禁止规则：
  • no-cache：浏览器不能直接使用缓存，必须向服务器验证资源是否新鲜
  • no-store：浏览器不能将该资源存储在本地缓存或临时存储中
  • must-revalidate：一旦资源过期，必须重新向服务器获取最新版本

最后，修改完配置后，记得重新部署生效：

firebase deploy --only hosting

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