前端缓存策略与资源分片（Cache-Control、ETag 与 SW 验证）

概述资源分片将大文件拆分为关键与次要片段, 结合长缓存与验证机制在版本升级时仅更新变动片段。配合ETag与SW的 `stale-while-revalidate`, 可兼顾速度与一致性。关键实践与参数指纹命名: `app.[hash].js` `chunk.[hash].js`缓存策略: `Cache-Control: public, max-age=31536000, immutable`HTML策略: `no-cache` 搭配 `ETag` 或 `Last-Modified`SW策略: 关键资源预缓存, 次要资源 `stale-while-revalidate`监测指标: `FCP` `LCP` 与回源比例示例/配置/实现location ~* \.(js|css|woff2|png)$ { add_header Cache-Control "public, max-age=31536000, immutable"; } location = /index.html { add_header Cache-Control "no-cache"; } // Node生成ETag(示意) import crypto from "crypto" function etag(buf) { return '"' + crypto.createHash('md5').update(buf).digest('hex') + '"' } // Service Worker self.addEventListener('install', (e) => { e.waitUntil(caches.open('v1').then(c => c.addAll(['/css/app.css', '/js/critical.js']))) }) self.addEventListener('fetch', (e) => { e.respondWith( caches.match(e.request).then(r => r || fetch(e.request).then(resp => { const clone = resp.clone(); caches.open('v1').then(c => c.put(e.request, clone)); return resp })) ) }) 验证首次访问: 关键资源命中预缓存, 首屏时间下降升级验证: 仅更新变动片段, 观察网络面板命中率与回源比例头部检查: 静态资源存在 `immutable` 与长TTL, HTML返回 `no-cache` 与ETag指标改进: 使用Lighthouse记录 `FCP` `LCP` 改善幅度注意事项严格使用指纹确保长缓存资源可安全复用HTML与API需设置不缓存或短缓存, 保证数据一致SW需处理版本失效与清理策略, 防止陈旧资源注意跨域与CDN缓存层的 `Vary` 与压缩设置