一种前端升级后清除页面缓存的方法及装置制造方法及图纸

本技术运用于前端页面开发领域，提供了一种前端升级后清除页面缓存的方法及装置，主要解决解决了原有技术需要清除缓存并重新登录才能获取页面最新样式的难题，主要方案包括在配置文件中将版本号加入js，以便页面渲染时按照版本号加载；insert json.js中将版本号加入json.js，在生成打包文件的路径中包含版本号；配置文件webpack.childpro.config.js中版本号加入js，声明前端需要清理缓存的模块名称及其版本号，根据业务逻辑将需要清理缓存的模块名称及其版本号对应后写入cookie，作为与前端文件版本号的比对标准，根据前述声明实现加载前端需要清理缓存的模块js、css文件的方法；在前端frameweb目录的index.html文件中增加valm

【技术实现步骤摘要】
一种前端升级后清除页面缓存的方法及装置


[0001]本技术运用于前端页面开发领域，实现对前端页面加载进行控制，解决每次前端升级后用户都需要手动去清除缓存并重新登录才能使用新功能的难题。

技术介绍

[0002]应用系统前端代码升级后，用户在浏览器端需要手动清理缓存，并再次登录才能使用最新发布的功能。因浏览器端为多用户，用户体验较差，故需对前端页面加载方式进行优化，使用户不用清缓存就能使用新版功能。
[0003]为此专利2021110292190，一种前端升级后免清缓存的页面加载方法及装置，在实际使用中其存在如下缺点：
[0004]1、将前端需要清理缓存的模块名称及其版本号存储到数据库，每次前端版本号变化后都需要去数据库维护数据，在实际操作中存在安全风险，一定程度上会出现数据变更后未提交事务导致页面404情况；
[0005]2、将前端需要清理缓存的模块名称及其版本号存储到数据库，需要后台单独提供接口、前端实现方法请求后台服务，增加人力成本；
[0006]3、将前端需要清理缓存的模块名称及其版本号存储到数据库，整个交互过程就会受到网络、程序处理、数据库之间的影响，从而页面加载会出现耗时较长、用户体验变差。

技术实现思路

[0007]本方案主要解决问题是基于webpack工具对前端代码进行打包，然后利用cookie机制，通过将声明的前端需要清除缓存的模块及版本号和cookie中存储的数据进行比对，若发生变化后则根据新的版本号刷新cookie存储数据并调用loadjs函数和loadCss函数来加载js、css资源进行页面再次渲染，解决了原有技术需要清除缓存并重新登录才能获取页面最新样式的难题。
[0008]本专利技术为解决上述技术问题采用以下技术手段：
[0009]一种前端升级后清除页面缓存的方法，包括以下步骤：
[0010]步骤1：在webpack配置文件webpack.base.config.js中将版本号加入js，以便页面渲染时按照版本号加载；
[0011]步骤2：配置文件insertjson.js中将版本号加入json.js，在生成打包文件的路径中包含版本号；
[0012]步骤3：配置文件webpack.childpro.config.js中版本号加入js，以便页面渲染时按照版本号加载；
[0013]步骤4：在vpcommon目录添加文件valm
‑
version.js，声明前端需要清理缓存的模块名称及其版本号，在initscript函数中根据业务逻辑将需要清理缓存的模块名称及其版本号对应后写入cookie，作为与前端文件版本号的比对标准，根据前述声明实现加载前端需要清理缓存的模块js、css文件的方法；
[0014]步骤5：在前端frameweb目录的index.html文件中增加valm
‑
version.js的script配置，在页面刷新时，实时加载valm
‑
version.js进行渲染页面。
[0015]上述技术方案中，所述步骤1包括以下步骤：
[0016]步骤1.1：将更新后前端的版本号加入到配置文件webpack.base.config.js中，打包后的js文件后缀会包含该版本号：
[0017]步骤1.2：用配置文件的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；
[0018]步骤1.3：确定入口：根据配置中的entry找出所有的入口文件；
[0019]步骤1.4：编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
[0020]步骤1.5：完成模块编译：在经过上一步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
[0021]步骤1.6：输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表；
[0022]步骤1.7：输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，生成后缀中包含版本号的js文件；
[0023]上述技术方案中，所述步骤4包括以下步骤：
[0024]步骤4.1：声明webinfo变量，将前端valm下的基础模块(frameweb)、平台模块(vpplatweb、vpmweb)、定制模块(vptestweb、zbyhweb)、其他模块(vpweb、vpflow)、公共资源(vpcommon、vpstatic)中需要清除缓存的模块vpplatweb、vpmweb、vptestweb、zbyhweb进行有序书写；
[0025]步骤4.2：声明webversion变量，根据webinfo变量值的书写顺序，将前端需要清除缓存的模块版本号依次书写；
[0026]步骤4.3：定义initscirpt函数，根据webinfo的变量值进行遍历，加载需要清除缓存模块下的json.webversion[i].js，利用cookie机制将前端需要清除缓存的模块名称和其版本号进行对应存储，以此来方便后续识别前端需要清除缓存模块的版本号是否变化；
[0027]步骤4.4：在initscirpt函数被触发后，从cookie中获取需要清除缓存的模块及其版本号将其与webversion变量进行比对，来判断前端需要清除缓存模块的版本号是否发生变化，若变化则刷新前端需要清除缓存模块在cookie中记录的版本号数据，并调用loadjs函数和loadCss函数再次加载js、css资源；
[0028]步骤4.5：在common.js文件中定义了loadjs函数和loadCss函数，以便在步骤4.4中前端需要清理缓存的模块的版本号发生变化后进行加载js、css资源。
[0029]本专利技术还提供了一种前端升级后清除页面缓存的装置，包括以下步骤：
[0030]配置模块：在webpack配置文件webpack.base.config.js中将版本号加入js，以便页面渲染时按照版本号加载：
[0031]文件路径生产模块：配置文件insertjson.js中将版本号加入json.js，在生成打包文件的路径中包含版本号；
[0032]版本号加入JS模块：配置文件webpack.childpro.config.js中版本号加入js，以便页面渲染时按照版本号加载；
[0033]浏览器cookie：声明前端需要清除缓存的模块名称及其版本号，将版本号对应信息写入cookie中，作为与前端文件版本号的比对标准；
[0034]版本号查询模块：在前端页面刷新时加载valm
‑
version.js，触发其中的initscript函数，使之判断声明的前端需要清理缓存的模块的版本号与c本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端升级后清除页面缓存的方法，其特征在于，包括以下步骤：步骤1：在web
p
ack配置文件web
p
ack.base.config.js中将版本号加入js，以便页面渲染时按照版本号加载；步骤2：配置文件insertjson.js中将版本号加入json.js，在生成打包文件的路径中包含版本号；步骤3：配置文件web
p
ack.child
p
ro.config.js中版本号加入js，以便页面渲染时按照版本号加载；步骤4：在vpcommon目录添加文件valm
‑
version.js，声明前端需要清理缓存的模块名称及其版本号，在initscript函数中根据业务逻辑将需要清理缓存的模块名称及其版本号对应后写入cookie，作为与前端文件版本号的比对标准，根据前述声明实现加载前端需要清理缓存的模块js、css文件的方法；步骤5：在前端frameweb目录的index.html文件中增加valm
‑
version.js的script配置，在页面刷新时，实时加载valm
‑
version.js进行渲染页面。2.根据权利要求1所述的一种前端升级后清除页面缓存的方法，其特征在于，所述步骤1包括以下步骤：步骤1.1：将更新后前端的版本号加入到配置文件webpack.base.config.js中，打包后的js文件后缀会包含该版本号；步骤1.2：用配置文件的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；步骤1.3：确定入口：根据配置中的entry找出所有的入口文件；步骤1.4：编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；步骤1.5：完成模块编译：在经过上一步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；步骤1.6：输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表；步骤1.7：输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，生成后缀中包含版本号的js文件。3.根据权利要求1所述的一种前端升级后清除页面缓存的方法，其特征在于，所述步骤4包括以下步骤：步骤4.1：声明webinfo变量，将前端valm下的frameweb、vpplatweb、vpmweb、vptestweb、zbyhweb、vpweb、vpflow、vpcommon、vpstatic中需要清除缓存的模块vpplatweb、vpmweb、vptestweb、zbyhweb进行有序书写；步骤4.2：声明webversion变量，根据webinfo变量值的书写顺序，将前端需要清除缓存的模块版本号依次书写；步骤4.3：定义initscirpt函数，根据webinfo的变量值进行遍历，加载需要清除缓存模块下的json.webversion[门.js，利用cookie机制将前端需要清除缓存的模块名称和其版本号进行对应存储，以此来方便后续识别前端需要清除缓存模块的版本号是否变化；步骤4.4：在initscirpt函数被触发后，从cookie中获取需要清除缓存的模块及其版本
号将其与webversion变量进行比对，来判断前端需要清除缓存模块的版本号是否发生变化，若变化则刷新前端需要清除缓存模块在cookie中记录的版本号数据，并调用loadjs函数和loadCss函数再次加载js、css资源；步骤4.5：在common.js文件中定义了loadjs函数和loadCss函数，以便在步骤4.4中前端需要清理缓存的模块的版本号发生变化后进行加载js、css资源。4.一种前端升级后清除页面缓存的装置，其特征在...

【专利技术属性】
技术研发人员：史晋彪，程峰，李耀，田骏，陈胜灵，谭敏，
申请(专利权)人：武汉众邦银行股份有限公司，
类型：发明
国别省市：