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

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

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

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

Accept-Ranges:bytes
Content-Length:211089
Content-Type:application/javascript
Date:Tue, 29 Nov 2016 04:26:40 GMT
ETag:"583c0ad3-33891"
Last-Modified:Mon, 28 Nov 2016 10:45:39 GMT
Server:nginx/1.10.2

从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;
}

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

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

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

Accept-Ranges:bytes
Cache-Control:no-cache
Cache-Control:max-age=0
Cache-Control:private
Connection:keep-alive
Content-Length:514
Content-Type:text/html
Date:Tue, 29 Nov 2016 07:03:25 GMT
ETag:"583d283b-202"
Expires:Tue, 29 Nov 2016 07:03:25 GMT
Last-Modified:Tue, 29 Nov 2016 07:03:23 GMT

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

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