如何处理前端版本更新时历史本地缓存的自动擦除-js教程-PHP中文网

前端版本更新通过文件名哈希化（如app.a1b2c3.js）使浏览器自动忽略旧缓存，index.html禁用强缓存（Cache-Control: no-cache），JS/CSS设immutable长效缓存，辅以version.json版本检测提示刷新。

前端版本更新时，浏览器不会自动擦除旧缓存，但可以通过设计策略让旧缓存“自然失效”，从而实现等效的自动擦除。关键不在于强行删除用户本地缓存（技术上不可行），而在于让浏览器主动放弃使用过期资源。

文件名哈希化：最可靠的基础方案

每次构建时，为 JS、CSS、图片等静态资源生成唯一文件名（如 app.a1b2c3.js）。文件内容变化 → 哈希值变化 → URL 变化 → 浏览器视为全新资源，自动忽略旧缓存。

Webpack 中配置 filename: "[name].[contenthash].js"，Vite 默认启用 contentHash
HTML 文件中引用的资源路径由构建工具自动注入，无需手动维护
未修改的资源保持原哈希，仍可复用缓存，兼顾更新与性能

HTML 入口文件禁强缓存

index.html 是整个应用的入口，必须确保用户每次访问都能拿到最新版本。它不能靠文件名哈希（因为路径固定），需依赖 HTTP 响应头控制：

Nginx 示例：location = /index.html { add_header Cache-Control "no-cache"; }
或更严格：Cache-Control: no-store, must-revalidate，彻底跳过缓存流程
避免仅用标签——它对 HTML 本身无效，仅影响子资源请求

服务端配合缓存策略

光靠前端构建不够，需服务器明确告诉浏览器哪些该缓、哪些不该缓：

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

JS/CSS（带哈希）：设 Cache-Control: public, max-age=31536000, immutable，1 年内不校验，提升加载速度
HTML/JSON 接口（如版本检查）：设 Cache-Control: no-cache 或 max-age=0，强制每次验证
避免混用 Expires 和 Cache-Control，后者优先级更高，统一用后者即可