缓存策略决定资源什么时候从缓存读取、什么时候重新请求网络。它影响速度、离线能力、带宽成本和数据新鲜度。

常见策略

  • Cache First：先读缓存，适合不常变化的静态资源。
  • Network First：先请求网络，失败再读缓存，适合内容需要更新但可离线兜底的场景。
  • Stale While Revalidate：先返回旧缓存，同时后台更新。
  • Network Only：每次都走网络。
  • Cache Only：只读缓存。

PWA 中的意义

Service Worker 可以拦截请求并决定使用哪种缓存策略，从而实现离线访问和更快加载。

SPA 单页应用与 CDN 边缘节点的缓存黄金法则 (SPA & CDN Edge Caching Rule)

现代单页应用（SPA）前端在经过 Vite/Webpack 构建后，静态资源具有内容哈希（Content Hash），在配合 CDN（如 Tencent Cloud EdgeOne / Cloudflare）部署时必须遵循动静严格分离的缓存分流：

  1. 入口文件 (index.html)：绝对禁止强缓存

    • 规则：Cache-Control: no-cache, no-store, must-revalidate; Pragma: no-cache; Expires: 0;
    • 根因：若缺少该配置，CDN 边缘节点与移动端浏览器（Safari / Android Chrome）会触发 RFC 7234 启发式缓存（Heuristic Expiration，按 Last-Modified 的 10% 缓存数天），导致发布新版本后用户端持续访问旧 HTML，客户端无法获取新版本哈希 JS/CSS。

  2. 带 Hash 静态资产 (/assets/*.[hash].js|css|woff2)：强缓存与不可变

    • 规则：Cache-Control: public, max-age=2592000, immutable;
    • 根因：文件名内置指纹，内容永不改变；新发布产生全新文件名，绝不产生缓存穿透与冲突。

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Web