处理js动态加载、缓存、更新

2024年4月11日 280次阅读 来源: caozheng550

近来项目中涌现修正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版本用来消灭缓存

这个只是个主意！！平常不能这么用，太风险了~~ -。-被中间人进击效劳器就直接爆炸了。

以上纯属个人主意，假如有疑问迎接提出。假如有什么更好的看法和主意喜好您不要悭吝~ 谢谢您！

    原文作者：caozheng550
    原文地址: https://segmentfault.com/a/1190000007404333
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞