解决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请求，因此也会被缓存。

---

一、按需添加版本号

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

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

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

二、自动生成版本号(以时间戳，或者生成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是放在后端的那么修改的操做最好是由后端来处理更迅速更快捷。

三、经过请求修改版本号

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

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

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

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

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

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