关于前端页面缓存的问题

426 阅读1分钟

目前会出问题的两种情况

1.每次前端测试环境发版完成,前端页面有时候会莫名其妙的出现白屏,打开F12查看会发现某个js出现404的报错。<br />
2.用户在正在使用时,前端发包导致新发布的功能没办法在用户的界面更新,但是不会白屏。需要用户自己清除缓存才可以更新页面(很多用户不知道如何清除缓存)

问题分析

代码是通过webpack打包,生成对应*文件名*自动带上对应的MD5值。如果文件内容改变的话,那么对应*文件哈希*值也会改变。这样main.js是最新的,main.js依赖的文件也是最新的。问题很可能出在引入main.js的文件上,这个文件就是index.html。
验证分析:
1.如果index.html存在缓存,里面的main.xxxx.js(xxx为随机hash值)的名称必定是旧的。因为发版完成旧的路径肯定找不到对应文件了。的确会造成404的情况,导致无法正常渲染造成白屏
2.用户正在使用的情况下,前端发包如果index.html为旧的缓存,其相应依赖且已经下载到本地也是缓存,这样也的确不会白屏,但是看不到新更新的内容。
所以大概率是index.html出现缓存问题造成的。

解决办法

要求后端配置nginx服务器时对index.html永远不要缓存。

关于用户清缓存的问题

虽然还是解决不了正在访问用户的缓存问题,但是如果新开页面重新请求,便可以请求最新的内容。不必每次都要清除浏览器缓存了