浏览器静态资源缓存问题

一、场景:页面功能不可用,打开控制台发现js静态资源找不到,见下图


二,分析:可能是由于Nginx上发布了新版本,而浏览器存在缓存,此次操作仍然请求的是原来的静态资源。

     

      ps:什么情况用缓存,什么情况会更新?

      js文件比如叫做http://xxx.aaa.com/hello.js,如果更改了hello.js又想让浏览器不要使用缓存而是加载你新的文件,那么就加一个参数,文件地址变成http://xxx.aaa.com/.js?v=111,这样浏览器就理解为2个不同的文件了,就不会直接调用缓存的js文件,而是加载新更改的文件了。

   

      而该项目前端基于vue-cli,vue-cli默认配置css和js的名字都加了哈希值,所以服务器上新版本的css、js就和旧版本的名字是不同的,浏览器会加载新更改的文件。

     不过,打包后的index.html放到服务器里去的时候,由于没有哈希值或其他标识,浏览器判断该文件没有变化,使用的是缓存的index.html,而css和js却加载了更新后的,导致控制台里报错(找不到js文件)

三、解决办法:需要在服务器配置不让缓存index.html

以nginx为例:

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}   

ps: nginx也可以通过 expires 指令来设置浏览器的Header, 使用本指令可以控制HTTP应答中的“Expires”和“Cache-Control”的头标(起到控制页面缓存的作用)。

例如  js css缓存一小时:

location ~.*\.(js|css)?$
 {
 expires 1h;
 }


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

浏览器静态资源缓存问题

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭