最稳妥的自动化清理方式是在构建阶段注入唯一时间戳（或结合git hash），前端启动时比对版本，不一致则清空localstorage、indexeddb、cache storage并刷新页面；需同时确保index.html不被强缓存。
直接在构建阶段注入唯一时间戳（或结合 Git Hash），再于前端启动时比对版本，不一致就清空 localStorage、IndexedDB、Cache Storage 等，是最稳妥的自动化清理方式。关键不在“加时间戳”本身，而在于用它触发运行时缓存重置逻辑。
Webpack：构建时注入时间戳 + 全局变量
在 webpack.config.js 中使用 DefinePlugin 注入构建时刻：
- 取当前时间戳：
const buildTime = new Date().toISOString() - 配合 Git 短哈希（推荐更稳定）：
require('child_process').execSync('git rev-parse --short HEAD').toString().trim() - 拼成唯一标识，如
2026-05-24T09:30:15.123Z-8a3f1b7 - 通过
plugins: [new webpack.DefinePlugin({ __BUILD_TIME__: JSON.stringify(buildTime) })]注入为全局常量
Vite：用 define 预定义 + rollupOptions 输出带时间戳文件名
Vite 默认不给 HTML 加 hash，但可通过配置让 JS/CSS 文件名包含时间戳，同时注入变量供运行时读取：
- 在
vite.config.ts中定义：define: { __BUILD_TIME__: JSON.stringify(new Date().toISOString()) } - 同时配置
build.rollupOptions.output，例如：entryFileNames: `assets/[name]-${Date.now()}.[hash].js` - 注意：避免只用
Date.now()（多线程构建可能冲突），建议改用process.env.BUILD_TIME || Date.now()并在打包命令中统一传入
运行时检测版本并清理缓存
入口文件（如 main.ts）顶部加入判断逻辑，不依赖任何框架生命周期：
- 读取上一次保存的版本：
localStorage.getItem('__APP_VERSION__') - 与当前注入的
__BUILD_TIME__或__APP_VERSION__比较 - 不一致则执行：
→localStorage.clear()
→indexedDB.deleteDatabase('your-db-name')
→caches.keys().then(keys => keys.forEach(key => caches.delete(key)))
→ 最后location.reload() - 一致则仅写入当前版本：
localStorage.setItem('__APP_VERSION__', __BUILD_TIME__)
补充要点：别漏掉 index.html 的缓存陷阱
JS/CSS 加了时间戳，但 index.html 往往被强缓存住，导致新资源加载不到：
- 确保服务器对
index.html返回Cache-Control: no-cache或max-age=0 - 不要依赖
<meta>标签禁用缓存（多数现代浏览器已忽略） - CDN 用户需单独配置 HTML 路径缓存策略为「不缓存」或「短 TTL」
