前端编程中，如何消除浏览器缓存

                       

在前端编程中，Brackets与nginx是我最喜欢的组合，调试代码与接口全在本地，完全能达到那种飞一般的编程感觉。

但在开发中，最容易郁闷的是，html与js文件容易被浏览器缓存，文件都已经更新了，但感觉服务器返回的文件依然是上上上次的，非要手动清除一次浏览器的缓存，才能查看到最新的文件，这特么的也太烦了不是？

查看静态文件的请求头信息，如下：

Accept-Ranges:bytesContent-Length:211089Content-Type:application/javascriptDate:Tue, 29 Nov 2016 04:26:40 GMTETag:"583c0ad3-33891"Last-Modified:Mon, 28 Nov 2016 10:45:39 GMTServer:nginx/1.10.2
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
   
   

从Date与Last-Modified字段就可以看出，js文件被浏览器缓存了，缓存的时间还将近一天，于是就想到为js文件添加头信息，偷了一次懒，直接在根路径添加缓存头信息，如下：

location / {    root   E:/Workspace/yii-es6-amd;    index  index.html index.htm;    add_header Cache-Control no-cache;    add_header Cache-Control private;    expires 0s;}
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
   
   

结果，所有的静态文件依旧那么牢牢地保持缓存状态，继续添加过滤规则，如下：

#   利用正则表达式匹配静态资源目录location ~ /dest/(.*) {    root   E:/Workspace/yii-es6-amd;    add_header Cache-Control no-cache;    add_header Cache-Control private;    expires 0s;}
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
   
   

然后请求服务器，返回的头信息如下：

Accept-Ranges:bytesCache-Control:no-cacheCache-Control:max-age=0Cache-Control:privateConnection:keep-aliveContent-Length:514Content-Type:text/htmlDate:Tue, 29 Nov 2016 07:03:25 GMTETag:"583d283b-202"Expires:Tue, 29 Nov 2016 07:03:25 GMTLast-Modified:Tue, 29 Nov 2016 07:03:23 GMT
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
    
    
8
    
    
9
    
    
10
    
    
11
   
   

可以看出，Date与Expires字段完全相等，这下浏览器再也不缓存页面了。

需要特别指出的是，浏览器页面缓存与nginx的页面缓存完全是两个不同的概念，一个缓存在客户端，一个缓存在服务器端，上面的方法只是告诉浏览器，文件不需要缓存，与服务器端的页面缓存完全不相关。