缓存工具如何设置网络缓存

本文目录导读：

1. 浏览器缓存（前端开发者/普通用户）
2. CDN 缓存（如 Cloudflare、阿里云 CDN）
3. 反向代理/Nginx 缓存
4. Service Worker 缓存（PWA 场景）
5. 系统代理工具（如 Fiddler、Charles）
6. 编程框架/库（如 Axios、VueUse）
7. 关键原则

缓存工具设置网络缓存的方式取决于你使用的具体工具或场景,以下是几种常见场景的设置方法：

浏览器缓存（前端开发者/普通用户）

• HTTP 头设置（开发者）：通过服务器响应头控制，常用字段：
  • Cache-Control: max-age=3600（缓存1小时）
  • Expires: Wed, 21 Oct 2025 07:28:00 GMT（指定过期时间）
  • ETag / Last-Modified（条件请求验证缓存有效性）
• 浏览器 DevTools：F12 → Network → 勾选“Disable cache”（临时禁用）
• 清除缓存：设置 → 隐私与安全 → 清除浏览数据 → 选择“缓存图片和文件”

CDN 缓存（如 Cloudflare、阿里云 CDN）

• 登录 CDN 控制台 → 缓存配置 → 设置“缓存过期时间”：
  • 静态文件（图片、CSS、JS）建议缓存 30 天
  • 动态 API 建议不缓存或缓存很短时间（如 60 秒）
• 高级规则：通过 Cache-Control 头或 CDN 规则引擎精细控制（如忽略参数、遵循源站头）

反向代理/Nginx 缓存

• Nginx 配置示例：

  location /static/ {
      expires 30d;                # 设置过期时间30天
      add_header Cache-Control "public, immutable";
  }
  location /api/ {
      proxy_cache my_cache;       # 启用缓存
      proxy_cache_valid 200 1h;   # 成功响应缓存1小时
      proxy_cache_key "$scheme$request_method$host$request_uri";
  }

• 常用指令：
  • proxy_cache_path（定义缓存路径和大小）
  • proxy_cache_use_stale（源站故障时用旧缓存）

Service Worker 缓存（PWA 场景）

• 使用 Cache API 在 Service Worker 中手动控制：

  self.addEventListener('fetch', (event) => {
      event.respondWith(
          caches.match(event.request).then((response) => {
              return response || fetch(event.request).then((res) => {
                  return caches.open('my_cache').then((cache) => {
                      cache.put(event.request, res.clone()); // 缓存响应的副本
                      return res;
                  });
              });
          })
      );
  });

• 策略选择：Cache First（先读缓存）、Network First（先网络后缓存）

系统代理工具（如 Fiddler、Charles）

• Fiddler：Rules → Performance → Simulate Modem Speeds（模拟缓存）
• Charles：Tools → Rewrite → 添加规则（如修改响应头添加 Cache-Control: max-age=3600）
• V2Ray/Clash：在配置中调整 proxy 或 rule-providers 的缓存策略（通常仅影响代理行为，不直接管理 HTTP 缓存）

编程框架/库（如 Axios、VueUse）

• Axios：使用 axios-cache-adapter 插件：

  import { setupCache } from 'axios-cache-adapter';
  const cache = setupCache({ maxAge: 15 * 60 * 1000 }); // 15分钟
  const api = axios.create({ adapter: cache.adapter });

• VueUse：useFetch 的 cache 选项：

  const { data } = useFetch('/api/data', { cache: 'force-cache' });

关键原则

如果目的是解决性能优化，通常建议：

1. 对不变化的资源（CSS/JS/图片）设置 Cache-Control: max-age=31536000, immutable
2. 对 API 使用 ETag 或 Last-Modified 实现“最多请求一次”
3. 利用 CDN 的边缘缓存减轻源站压力

如果需要更具体的配置示例（如具体工具、编程语言或服务器类型），请补充细节，我可以提供针对性代码。

标签： 网络缓存设置