解决js动态加载、缓存、更新

最近项目中出现修改js，线上并没有实时更新而是使用的缓存中的js。

当然如果你的页面是单页面应用的话，解决方案就很简单了，修改index.js后面的版本号就好了。

mudel.export = {
    //html文件名 不能重名-。-
    'a':{
        //主js文件
        js : ['a.js','b.js'] //兼容修改多个JS
        css : []
    }
}

如果html放在前端的话，也会简单很多，可以使用gulp在打包的时候配置一下--src a ，让gulp去自动完成替换版本号操作。

这里解决的是当html放在后端使用VM或者其他模板引擎渲染出来的。

• 究其原因是因为后端的路由通过get请求返回html。而get请求通过配置被缓存，所以导致html被缓存。

• 而js请求也属于get请求，所以也会被缓存。

---

1、按需添加版本号

根据以上分析，一个很大众的解决方案出现了。即在<script>内添加版本号的解决方案：

<script src="a.js?v=1"></script>

这样的做法的确可以达到清缓存的目的。这里客户端会先去和代理中的缓存进行对比，发现请求参数发生了变更，所以重新从服务器中获取js。重新渲染而代理又缓存了v=2的js，如果在更新的话就只能继续改版本号。

2、自动生成版本号(以时间戳，或者生成UUID)

既然方案一可以解决缓存问题那么“懒虫”们就想到可以动态的设置版本号，思想就是每次生成不重复的ID就可以了。但是这样子又引发了其他问题。

<script src=`a.js?v=${date}`></script>

导致只要访问这个JS无论是不是修改过这个js都会从服务器重新取得js，导致没有缓存的存在浪费了很多的流量和很差的体验。类似的方案也可以在meta Tag中做配置也可以实现无缓存设置。

<meta http-equiv="Pragma" content="no-cache"> 

类似的方案很多，也可以添加script Tag，动态添加需要引入的JS。在使用webpack打包的时候在末尾的文件中添加一段JS

<script>
    window.load_page = function ( path ){
        var staticPath = "..." //动态设置的static path
        var $script = document.createElement("script");
        $script.src = static + path + '.js'; //这里想怎么改就怎么改
        document.body.appendChild($script); //动态生成的js放到body最底部
    }
</script>

VM或者jsp等...在后端模板渲染的html中写入以下JS

<script> 
    load_page("js/a") //线上js放置的位置 我们项目是生成在dist目录下 
</script>

额~~好吧，其实没啥用。

既然html是放在后端的那么修改的操作最好是由后端来处理更迅速更快捷。

3、通过请求修改版本号

可以通过本地开启已个服务写一个简单的HTML，有input 和button就可以了。每次局部上线的时候将文件名写入input框，同时前后端要有一个共同的约定模板由前端书写

mudel.export = {
    //js文件名 key 这里可以使用不能重名-。-
    //可以使用symbol
    'a':'具体的路径a.js'
}

发送请求后，后端解析文件名找到对应文件，对模板引擎中的?v=xxx 进行替换。

4、写一个node放在服务器上跑，用来修改线上的js版本用来清除缓存

这个只是个想法！！一般不能这么用，太危险了~~ -。-被中间人攻击服务器就直接爆炸了。

以上纯属个人想法，如果有疑问欢迎提出。如果有什么更好的意见和想法喜欢您不要吝啬~ 谢谢您！