静态资源强缓存核心是内容哈希命名+cache-control: public, immutable；文件名随内容变化确保url更新，浏览器自动弃旧取新，html则须禁用强缓存以防404。

静态资源实施强缓存策略的核心是“让浏览器放心长期存，且内容一变就自动换新”。这不靠猜、不靠刷新，而靠两件事：文件名随内容变化 + HTTP 响应头明确告诉浏览器“这个地址永远不变”。

用内容哈希命名静态资源文件

如果 JS 或 CSS 文件名始终是 app.js，哪怕内容改了，浏览器仍认为是同一个文件，继续用旧缓存——这是缓存失效最常见的原因。

• 构建时生成带内容哈希的文件名，例如 app.a1b2c3d4.js、style.e5f6g7h8.css
• Webpack 用户：输出配置中用 contenthash（别用 hash 或 chunkhash）
• Vite 默认启用内容哈希，一般无需额外设置
• 确保 HTML 中引用的路径也同步更新（html-webpack-plugin 或 Vite 的 HTML 插件会自动处理）

给静态资源配强缓存响应头

一旦文件名自带哈希，就可以安全地设极长缓存时间，并加 immutable 指令，彻底跳过协商验证请求。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐响应头：Cache-Control: public, max-age=31536000, immutable（即一年）
• 也可配合 Expires 头（如 Expires: Thu, 31 Dec 2027 23:59:59 GMT），但 Cache-Control 优先级更高
• Nginx 配置示例：

  location ~* \.(js|css|png|jpg|gif|woff2|ttf|eot|webp|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header X-Content-Type-Options nosniff;
  }

配合 CDN 加速与域名分离

强缓存真正生效，需要用户实际从边缘节点拿到资源，而不是直连源站。

• 静态资源使用独立子域名（如 static.example.com），并接入 CDN
• 前端构建时设置 publicPath 指向 CDN 域名（Webpack 的 output.publicPath 或 Vite 的 base）
• CDN 控制台中，为该域名配置合理的缓存规则（如 JS/CSS 缓存 30 天以上，图片类可更长）
• 确保 CDN 回源时，Nginx 返回的响应头未被覆盖或清除

避免和 HTML 缓存策略冲突

HTML 本身不能强缓存，否则用户可能一直加载旧 HTML，导致引用的 JS/CSS 路径 404 或功能异常。

• HTML 响应头必须设为：Cache-Control: no-cache 或 max-age=0, must-revalidate
• Nginx 示例：location = /index.html { add_header Cache-Control "no-cache"; }
• 确保 HTML 是轻量级入口，真正承载逻辑和样式的 JS/CSS/图片才是强缓存主力