浏览器缓存更新JS缓存（破坏缓存）

HTTP 缓存

缓存(Cache)最早应用于处理器，用于解决CPU访问内存过慢的问题。

HTTP 缓存加快了用户页面响应，减少了去服务器获取资源的等待时间。

带来的问题

我们更新服务器文件后，由于缓存的缘故，用户依旧使用了之前的文件，经常会遇到javascript提示"方法不存在"。

常见解决方式

关于JS文件，我们在 URL 后面（通常是文件名后面）会加上版本号

<script src="jquery.js"></script>

修改后:

<script src="jquery.js?v=1.1"></script>

我们的解决方式

我们是多页面网站，修改版本号会比较麻烦,所以配合freemarker使用

freemarker提供变量version

public class MyFreeMarkerConfigurer extends FreeMarkerConfigurer {
    @Override
    public void afterPropertiesSet() throws IOException, TemplateException {
        super.afterPropertiesSet();
        Configuration cfg = this.getConfiguration();
        cfg.setSharedVariable("version",System.currentTimeMillis());
    }
}

页面使用该变量

<script src="jquery.js?v=${version}"></script>

给所有页面script标签后快速追加版本号方式

以idea为例,快捷键ctrl+shift+r，选中In Project，下方方式可供参考

JS替换，可参考下方CSS替换

<\s*script.*src\s*=\s*('|")\s*([A-Za-z0-9-_/.]+)\s*('|")
替换为 
<script src=$1$2?v=${version}$3

CSS替换

<link href=('\S*').*>
替换为 
<link href=$1 media="all" rel="stylesheet"/>

其它问题

静态页面问题无法使用freemarker变量问题

普通静态页面不能使用freemarker变量，所以需要把html页面当作freemarker模板处理，就是将它配置在了templateLoaderPath下

<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
     <property name="templateLoaderPath"><value>/WEB-INF/freemarker/</value></property>
</bean>

这样有两个好处：一个是可以使用freemarker变量，另一个是重启项目后模板引擎重新加载模板，页面不会被缓存（这个原因是推测的，推测依据是这样的：模板引擎的模板来自于文本，文本不似时间，它没有时间属性，每次输出的都是新页面）。

JS内部版本号问题

如何将版本号传递js，在模板页面定义版本，在需要版本的js文件中直接使用即可。

<script>
    window.version=${version};
</script>

我们的项目是多页面项目，使用了requirejs，在对应的js中添加如下代码，让子页面继承父页面的版本号，这样就不用每个页面写如上代码了

version=parent.version

参考文档

developer.mozilla.org/zh-CN/docs/…

浏览器更新JS缓存（破坏缓存）