前端发版总被用户说“没更新”?一文搞懂浏览器缓存,彻底解决!

有时候我们发了新版,结果用户看到的还是老界面。 你:"我更新了啊!" 用户:"我这儿没变啊!" 然后你俩开始互相怀疑人生。 那咋办?总不能让用户都清缓存吧? 当然不能。 我们得让浏览器自己知道"该换新的了"。 核心思路就一条:让静态资源的文件名变一变。 浏览器靠文件名判断是不是同一个文件。 文件名变了,它就会重新下载。

方法1:加时间戳(简单粗暴)

以前:

html 复制代码
<script src="/js/app.js"></script>

现在:

html 复制代码
<script src="/js/app.js?v=20250901"></script>

或者用时间戳:

html 复制代码
<script src="/js/app.js?t=1725153600"></script>

发版的时候,改一下vt的值,浏览器看到后发现文件名不一样,就会重新下载。

优点:简单,立马见效

缺点:每次发版都得手动改,容易忘记。

方法2:用构建工具加hash(推荐!)

这是现在最主流的做法。 你用WebpackViteRollup这些工具打包时,它会自动给文件名加一串hash

html 复制代码
<script src="/js/app.a1b2c3d.js"></script>

你代码一改,hash就变。

比如下次变成:

html 复制代码
<script src="/js/app.e4f5g6h.js"></script>

浏览器看到后发现文件名不一样,会自动拉新文件。

使用时需要检查你的打包配置,确保输出文件带hash。

Vite配置(vite.config.js):

js 复制代码
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]'
      }
    }
  }
})

Vue CLI(vue.config.js):

js 复制代码
module.exports = {
  filenameHashing: true, // 默认就是 true,别关掉!
}

只要这个开着,JS/CSS 文件名就会变,浏览器就会更新。

优点:全自动,不用操心

优点:用户无感知,体验好

优点:还能利用缓存(没改的文件hash不变,继续用旧的)

来看看Vue的项目

只要你用的是Vue CLI、Vite或 Webpack打包,发版时默认就解决了缓存问题。 因为它们会自动给文件名加hash。 比如你打包后:

bash 复制代码
dist/
├── assets/app.8a2b1f3.js
├── assets/chunk-vendors.a1b2c3d.js
└── index.html

你改了代码,再打包,hash就变了:

bash 复制代码
assets/app.x9y8z7w.js  # 新文件

虽说是这样,但为啥还有人卡在旧版本?

文件名带hash,但index.html这个入口文件本身可能被缓存了

流程:

  • index.html里引用了app.8a2b1f3.js
  • 用户第一次访问,加载了index.html和对应的JS
  • 你发新版,index.html指向app.x9y8z7w.js
  • 但用户浏览器缓存了旧的index.html,还在引用app.8a2b1f3.js
  • 结果:页面还是旧的

这是入口文件缓存导致的发版无效。

解决方案

方法1:让index.html不被缓存

这是最简单有效的办法。 配置Nginx,让index.html不缓存:

nginx 复制代码
location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

这样每次用户访问,都会重新下载最新的 index.html,自然就拿到新的 JS 文件名。

注意:其他静态资源(js/css)可以长期缓存,只有 index.html 要禁缓存。

方法2:根据版本号来控制

每一次更新都新建一个文件夹

然后修改Nginx配置

nginx 复制代码
location / {
	root /home/server/html/yudao-vue3/version_1_2_5;
	index index.html index.htm;
	try_files $uri $uri/ /index.html;
}

最后: 缓存这事看着小,真出问题能让我们忙半天。 提前设好机制,发版才能睡得香。 搞定!

我是大华,专注分享前后端开发的实战笔记。关注我,少走弯路,一起进步!

📌往期精彩

《Elasticsearch 太重?来看看这个轻量级的替代品 Manticore Search》

《只会写 Mapper 就敢说会 MyBatis?面试官:原理都没懂》

《别学23种了!Java项目中最常用的6个设计模式,附案例》

《写给小公司前端的 UI 规范:别让页面丑得自己都看不下去》

《Vue3+TS设计模式:5个真实场景让你代码更优雅》

相关推荐
Dolphin_海豚11 小时前
【译】Vue.js 下一代实现指南 - 下卷
前端·掘金翻译计划·vapor
Apifox11 小时前
理解和掌握 Apifox 中的变量(临时、环境、模块、全局变量等)
前端·后端·测试
小白_ysf11 小时前
阿里云日志服务之WebTracking 小程序端 JavaScript SDK (阿里SDK埋点和原生uni.request请求冲突问题)
前端·微信小程序·uni-app·埋点·阿里云日志服务
你的电影很有趣11 小时前
lesson52:CSS进阶指南:雪碧图与边框技术的创新应用
前端·css
Jerry11 小时前
Compose 延迟布局
前端
前端fighter11 小时前
Vue 3 路由切换:页面未刷新问题
前端·vue.js·面试
lskblog11 小时前
使用 PHP Imagick 扩展实现高质量 PDF 转图片功能
android·开发语言·前端·pdf·word·php·laravel
whysqwhw11 小时前
Node-API 学习二
前端
whysqwhw11 小时前
Node-API 学习一
前端
Jenna的海糖11 小时前
Vue 中 v-model 的 “双向绑定”:从原理到自定义组件适配
前端·javascript·vue.js