解决浏览器缓存带来的问题

发表于 | 分类于 ， ， ，

原由

每当更改了前端某些js，html等文件，并重新发布服务时总是得需要清理浏览器缓存，要不然无法正确显示页面。要想理解浏览器缓存的逻辑可参考这篇文章：浏览器缓存知识。

尝试做过一些修改比如参考我想转行之—-微信浏览器缓存 ,但是这些方法要么实现不够优雅过于麻烦，要么指标不治本。

解决

后来想到通过nginx修改HTTP的header来欺骗后端服务不走缓存。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location /vendor/echarts/echarts.js {
            rewrite ^ http://localhost:38080/vendor/echarts/echarts.js;
        }

        location / {
            root   html;
            index  index.html index.htm;
			proxy_pass http://localhost:38080;
			expires -1;
			proxy_set_header If-Modified-Since "";
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

添加的内容为：

1
2
3
4
5
6
7
8
location /vendor/echarts/echarts.js {
    rewrite ^ http://localhost:38080/vendor/echarts/echarts.js;
    }

location / {
	expires -1;
	proxy_set_header If-Modified-Since "";
    }

第一个localtion表示请求echars.js文件时走缓存，因为发现echarts.js请求时间比较长，很影响页面的打开体验，而且echars.js基本上不会做更改。

expires表示让nginx不进行缓存。
proxy_set_header欺骗服务后端，这是第一次请求文件。