前端项目中如何配置资源的缓存策略？

前端项目中资源缓存配置的主要策略基于控制浏览器如何存储和更新静态资源，从而优化加载时间和减轻服务器负载。具体包括：

1. 设置强缓存：

• 通过 HTTP 响应头控制资源直接从本地缓存读取而不发送请求。
  • Cache-Control：最常用指令包括：

    max-age=31536000  # 表示资源缓存 365 天，常用于静态资源如 CSS 或图片
    public            # 允许 CDN 或中间代理缓存
    immutable         # 确保文件在有效期内不触发重校验
    

  • Expires：设置绝对过期时间，如 Expires: Thu, 31 Dec 2025 23:59:59 GMT，但因依赖客户端时间易出错，优先采用 Cache-Control。
• 针对静态资源 (如图片、库文件) 设置长效缓存，对频繁更新的入口文件避免此类配置。

2. 配置协商缓存：

• 当缓存过期时，浏览器发送请求验证资源是否改变，如未改变则从本地拉取。
  • ETag / If-None-Match：服务器响应 ETag (唯一标识符)，客户端请求时在 If-None-Match 中携带它；若匹配则服务器返回 304 状态码，表示可使用缓存。
  • Last-Modified / If-Modified-Since：服务器响应 Last-Modified (更新时间)，客户端通过 If-Modified-Since 询问更新情况。
• 适用于动态资源如 index.html 页面设置较短 max-age 后配合协商更新。

3. 实施文件版本管理：

• 在资源 URL 中添加内容哈希或版本号（如 app-[hash].js），确保文件更新时浏览器检测出新版本：

  <script src="/static/js/bundle.a1b2c3d4.js"></script>
  

• 借助 Webpack 等构建工具自动哈希文件名。

4. 利用 Service Worker：

• 用于实现自定义缓存策略和离线应用，通过拦截 HTTP 请求管理本地存储：

  // service worker 注册后缓存关键资源的代码段
  self.addEventListener('install', event => {
    event.waitUntil(
      caches.open('app-cache').then(cache => {
        return cache.addAll([
          '/',
          '/styles.css',
          '/bundle.js'
        ]);
      })
    );
  });
  

• 结合 Cache API 控制缓存失效和更新机制。

5. 使用本地存储：

• 采用 localStorage 或 sessionStorage 存储较小数据（如用户首选项），但需避免敏感信息，并定期清理减少性能负担。

6. 最佳实践总结：

• 资源分类处理：
  • 静态资源（如框架库）设长强缓存和 ETag 备用。
  • 动态资源优先协商缓存。
• 用工具（如 Lighthouse）监控缓存命中率。
• 避免缓存超载：合理设置 Cache-Control headers 参数 s-maxage (代用代理缓存) 和 max-age。
• 版本化资源确保变更生效后立即生效。