如何清理Next.js/React/Chrome缓存？清缓存后仍显示旧参数怎么办

• 本地构建产物残留：删除node_modules重装依赖不会自动清理旧的构建输出文件，devServer内存缓存、框架专属缓存目录（如Vite的.vite、Umi的.umi）里的旧代码未被覆盖，旧参数还存留在未更新的打包产物中
• Chrome非普通缓存未清理：你清理的是Chrome普通静态资源缓存，不包含Service Worker离线缓存、LocalStorage/SessionStorage/IndexedDB等站点存储内容，很多配置了PWA的项目会将静态资源长期缓存在Service Worker中
• 框架层面的运行时缓存：如果项目配置了Vue keep-alive、React路由缓存之类的运行时缓存逻辑，旧的参数值会被保存在内存中，刷新页面也不会自动清除
• 上层节点缓存：如果请求走了本地代理、公司内网网关或者公共CDN，节点可能还缓存了旧的静态资源或者接口响应内容，未触发更新
• 依赖版本未对齐：如果重命名的参数属于第三方依赖，你清理的是yarn全局缓存，若本地私有npm源还缓存了旧版本依赖，重装时依然会拉取未更新的旧包

1. 清理构建层缓存

• 删除项目下所有构建相关的缓存目录和输出目录：

rm -rf dist build .cache .vite .umi

• 重启本地开发服务时添加强制清缓存参数，如Vite使用vite --force，Webpack使用webpack --no-cache

2. 清理Chrome全量站点数据

• 打开Chrome开发者工具，切换到「Application」标签页，找到「Storage」分类下的「Clear site data」，勾选所有选项（包含Service Workers、Local Storage、IndexedDB等）后执行清除
• 也可以直接使用Chrome隐身模式访问应用，快速验证是否为浏览器缓存导致的问题
  注意：清理站点数据会删除当前站点所有本地存储的用户配置、登录态等内容，操作前可按需导出需要的信息

3. 排查项目缓存配置

• 全局搜索业务代码，确认是否有将相关参数手动写入localStorage、sessionStorage等本地存储的逻辑，如有则删除对应存储项
• 若项目开启了PWA功能，临时关闭Service Worker注册逻辑，或更新Service Worker的文件哈希/版本号触发全量缓存更新
• 关闭Vue keep-alive、React路由缓存等运行时缓存配置，验证参数是否更新

4. 对齐依赖与网络缓存

• 如果重命名的参数属于第三方依赖，确认package.json、yarn.lock中依赖版本是否已经更新到修改参数后的版本，避免版本锁定导致拉取旧包
• 如果应用部署在CDN上，手动触发CDN节点缓存刷新，或给静态资源配置带哈希值的文件名，强制浏览器拉取最新资源

内容的提问来源于stack exchange，提问作者János