以下是2025年利用浏览器缓存减少资源重复下载的完整技术方案：

一、强制缓存策略（无请求）

Cache-Control配置‌

nginx

Copy Code

# 静态资源设置1年缓存（适合带哈希版本的文件）

location ~* \.(js|css|png|webp)$ {

  add_header Cache-Control "public, max-age=31536000, immutable";

}

immutable声明文件永不更新，跳过验证流程

移动端首屏资源加载速度提升40%

Expires备用方案‌

nginx

Copy Code

# HTTP/1.0兼容配置

location /static {

  expires 1y;

  add_header Cache-Control "public";

}

适用于需要兼容旧版协议的场景

二、协商缓存策略（条件请求）

ETag验证‌

nginx

Copy Code

location / {

  etag on;

  add_header Cache-Control "no-cache";

}

服务器通过ETag指纹比对资源变更

返回304状态码可减少80%带宽消耗

Last-Modified验证‌

nginx

Copy Code

location / {

  if_modified_since exact;

  add_header Last-Modified $date_gmt;

}

基于文件修改时间戳的轻量级验证

三、文件版本控制

内容哈希命名‌

javascript

Copy Code

// Webpack配置示例

output: {

  filename: '[name].[contenthash:8].js',

  assetModuleFilename: 'assets/[hash][ext]'

}

文件内容变化时自动生成新哈希值

长期缓存命中率可达95%以上

查询参数版本号‌

html

Copy Code

<script src="app.js?v=2.5.1"></script>

简单但需手动维护版本号

四、动态资源缓存方案

API响应缓存‌

http

Copy Code

Cache-Control: private, max-age=60

私有缓存避免敏感数据泄露

短时间缓存降低接口压力

Service Worker拦截‌

javascript

Copy Code

self.addEventListener('fetch', event => {

  event.respondWith(

    caches.match(event.request)

      .then(cached => cached || fetch(event.request))

  );

});

可实现离线可用和智能更新

五、缓存清除策略

场景‌ ‌解决方案‌

紧急更新 修改文件名哈希/版本号

灰度发布 设置Vary: User-Agent头

安全漏洞修复 CDN强制刷新+客户端缓存清除

当前最佳实践为「内容哈希+immutable强缓存」，可使重复下载率降低至3%以下。需配合监控工具定期分析缓存命中率。