解决页面缓存问题

页面前段缓存，经常在发布后，发现页面被浏览器缓存下来，没有重新请求后端服务器。尝试过在页面上面加上<meta http-equiv="Pragma" content="no-cache" /> 和 <meta http-equiv="Cache-Control" content="no-cache" /> 和 <meta http-equiv="Expires" content="0" />这些都 没有起到作用，具体原因还没想明白。我的解决办法，在所有要加载的文件名后面加上版本号，当文件变化时，文件的版本号随之变化，这样改变过的文件浏览器就不会从缓存里读取，而是重新加载了。人为一个一个加是很麻烦的事情，那么我们可以用glup帮我们做这个事情。

1.  安装node.js

    node-v6.9.2-x64.mis.zip

链接: https://pan.baidu.com/s/14HRHTwrsyWII76IHvM92Yw 密码: 3rff

2.  将解压后的npm文件夹放到在C:\Users\用户名\AppData\Roaming目录下

npm.zip 下载地址：https://pan.baidu.com/s/1AXRzF9p3CT5qiUkICOs8ng 提取秘密；74vs

AppData文件夹在我的电脑上是隐藏文件夹，找不到时请确认是否没有显示隐藏文件夹

3.  在需要执行脚本的目录下将main_file.zip解压

main_file.zip 下载地址：链接: https://pan.baidu.com/s/1GzEBSltIkv0adKGgeDc5qQ 密码: drmr 

4.  配置从main_file.zip文件中解压出的gulpfile.js文件，根据需要修改其中的各种路径

有关gulp的语法请自行学习

5.  执行脚本

在gulpfile.js所在文件夹空白处按住shift后点击鼠标右键，选择在此处打开命令窗口

输入gulp

等待执行结束就好

6.  Gulp插件已知bug

引用路径不全的文件执行脚本后可能后面没有自动加上版本号

举例：

alkpage.html在我的项目下引用路径为

src\main\webapp\basepage\alkpage\alkpage.html

我的插件是放在src同级目录下

gulpfile.js的配置在在main_file.zip里

alkpage.html中的js、css如果这样引用

<link rel="stylesheet"type="text/css" href="css/alk.css "/>

<script type="text/javascript"src="js/alk.js"></script>

执行gulp操作后结果如下

其余文件都加上了版本号，就这两个没加上，

原因应该跟rev里生成的json中的文件对应关系和gulpfile.js中的文件路径有关

我的应对办法是将这种css、js的引用路径写成如下形式

<link rel="stylesheet"type="text/css" href="../../bagepage/alkpage/css/alk.css"/>

<script type="text/javascript"src="../../bagepage/alkpage/js/alk.js"></script>

然后再执行gulp操作后，所有文件后都加上了版本号

7.  局限性

Gulp脚本只能在js路径、css路径、图片路径、字体路径后加上版本号，浏览器读取这些文件时，因为文件后面版本号变了，浏览器便不会从缓存中读取数据，而是重新加载；

但是，浏览器中还会有html的缓存，而缓存页面中引用的css、js都是老版本的，这样缓存问题还是没有得到解决；

所以我们要对嵌iframe、地址跳转等有关html加载的操作也进行去缓存；

 

8.  去html缓存

在有关页面跳转、iframe引用的地址后面加上一个变量，如时间、随机数

举例：

页面跳转location.href=xxx.html时，要在后面加上?date=new Date().getTime();

iframe嵌页面的地方同上，要在src中的html后加?date= newDate().getTime()，为此，iframe的地址不能在html里写死，要在js里为iframe添加src的路径