大家集思广益，有什么好的方法可以解决页面缓存的问题？

Question

今天遇到了一个页面缓存的问题，找了半天以为代码错误，后来才发现是页面缓存的问题，临时想了个解决方法直接在路径后面加了个时间戳，不知道大家有什么好的方法，貌似听说有的采用文件用md5的方式命名。。。不太清楚，求指点。

Answer 1

这个要看你的具体需求了.

1. 如果你不想让页面被缓存, 即cache-control: max-age=0, 那么你加一个时间戳也是可以的.

2. 如果你想让浏览器强制缓存你的页面, 比如a.css这个文件, 那么你就不能用时间戳, 而应该是用带版本号后缀或内容摘要算法(MD5)的方式来加后缀或者命名文件.

顺便说一点带版本号和MD5方式的区别, 假设你让所有css文件都缓存了, 那么当你只更新部分文件, 又不想用户放弃未更新文件的缓存时, 就可以用md5的方式, 这样就只有更新过的文件引用的URL才会变化,导致重新向服务器请求, 而未改变的则继续取用本地缓存.

Answer 2

你可以使用gulp或者grunt的时间戳插件，比如：

https://www.npmjs.com/package...

https://www.npmjs.com/package...

Answer 3

现在的前端基本都是工程化了，项目文件夹下面有src 和dist 文件夹，src 里面放源码。
老项目可以直接加入gulp来解决问题，gulp简单易学，任务添加方便。
使用gulp-rev gulp-replace 之类的就能添加文件MD5，如果能力高，可以只改页面引用的地方加入？rev=MD5，文件名称不变。
相关用法请 npm 搜索 并查看文档

Answer 4

方法一、【META】

HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息，包括浏览器，中间缓存服务器，Web服务器。
meta可以用来在HTML文档中模拟HTTP协议的响应禁止缓存

<meta http-equiv="Pragma" content="no-cache">//用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

缺点：在移动端比如微信浏览器，可能完全无效

方法二：添加md5版本号

原理:文件内容变化了，在文件名后面自动添加md5值。很多工具都可以实现，如gulp的插件gulp-rev，webpack的各种[hash]输出命名。

Answer 5

加版本号啊

Answer 6

利用打包工具比如gulp等在引用静态资源文件后面问号带上值

Answer 7

使用gulp为你的文件自动添加md5版本号
http://www.tuicool.com/articl...

Answer 8

加个时间戳不就好了？每次请求都是一个，反正每次缓存的都是废弃的版本！也就是防止缓存了；