前端版本更新通过文件名哈希化（如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，彻底跳过缓存流程 - 避免仅用
<meta>标签——它对 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，后者优先级更高，统一用后者即可
可选增强：版本检测 + 用户提示
对强一致性要求高的场景（如金融类操作），可在运行时主动发现版本变更并引导刷新：
立即学习“前端免费学习笔记（深入）”；
- 构建时生成
version.json（含时间戳或 Git commit hash） - 前端定时或路由切换时请求该文件，比对本地已存版本号
- 不一致时弹出提示：“检测到新版本，是否立即刷新？”，点击后执行
location.reload(true) - 注意：此方式不替代哈希+HTTP头，而是用户体验补充
