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

mikyou 发布于2019-08-21 14:43 / 1722人阅读

摘要：即在内添加版本号的解决方案这样的做法的确可以达到清缓存的目的。重新渲染而代理又缓存了的，如果在更新的话就只能继续改版本号。

最近项目中出现修改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、按需添加版本号

根据以上分析，一个很大众的解决方案出现了。即在

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

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

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

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

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

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

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

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

3、通过请求修改版本号

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

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

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

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

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

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

云服务器 GPU云服务器更新缓存数据 js 动态加载js js 动态加载视频 js 动态加载数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88007.html

前端模块化

摘要：如果想让模块再次执行，必须清楚缓存同步加载模块只有加载完成之后，才能执行后面的操作运行时加载中的实现对象中提供了一个构造函数，每个模块都是构造函数的实例。什么是模块化 1、模块化模块化是自顶向下逐层将系统划分成若干更好的可管理模块的方式，用来分割、组织和打包软件,达到高度解耦 2、模块模块是可组合、分解、更换的单元；每个模块完成一个特定子功能，模块间通过某种方式组装起来，成为...

liukai90 2019-08-23 11:45 评论0 收藏0
腾讯祭出大招VasSonic，让你的H5页面首屏秒开

摘要：经过一系列优化后，在平台上，点击到页面首屏展示的耗时从平均多降低为，优化以上。而现在页面为了更好地为用户推荐喜欢的内容，我们后台引入机器学习和随机算法来做智能个性化推荐。另外还有部分的内容是随机算法推荐的。 VasSonic成长历程前言 2017.8.8 14时，SNG增值产品部Vas团队研发的轻量级高性能Hybrid框架VasSonic通过了公司最终审核，作为腾讯开源组件分享给大...

xzavier 2019-08-01 17:25 评论0 收藏0