[发明专利]一种前端升级后免清缓存的页面加载方法及装置

说明书

本技术运用于前端页面开发领域，提供了一种前端升级后免清缓存的页面加载方法及装置，主要解决解决了原有技术需要清除缓存并重新登录才能获取页面最新样式的难题，主要方案包括在配置文件中将版本号加入js，以便页面渲染时按照版本号加载；配置文件中将版本号加入json.js，在生成打包文件的路径中包含版本号；配置文件中版本号加入js，以便页面渲染时按照版本号加载；数据库中新建用于存储新版本号的表，将版本号对应信息写入表中，作为与前端文件版本号的比对标准；在前端页面中请求后端程序，使之同步查询版本号数据表；将查询到的版本号返回前端，前端根据返回的版本号加载js文件并渲染页面。

技术领域

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

背景技术

应用系统前端代码升级后，用户在浏览器端需要清理缓存，并再次登录才能使用最新发布的功能。因浏览器端为多用户，用户体验较差，故需对前端页面加载方式进行优化，使用户不用清缓存就能使用新版功能。

发明内容

本方案主要解决问题是基于webpack工具对前端代码进行打包，然后通过AJAX数据交互方式，在页面加载时向后台请求和接收数据，获取前端页面最新版本号并根据该版本号渲染页面，解决了原有技术需要清除缓存并重新登录才能获取页面最新样式的难题。

本发明为解决上述技术问题采用以下技术手段：

一种前端升级后免清缓存的页面加载方法，包括以下步骤：

步骤1：在webpack配置文件webpack.base.config.js中将版本号加入js，以便页面渲染时按照版本号加载；

步骤2：配置文件insertjson.js中将版本号加入json.js，在生成打包文件的路径中包含版本号；

步骤3：配置文件webpack.childpro.config.js中版本号加入js，以便页面渲染时按照版本号加载；

步骤4：数据库中新建用于存储新版本号的表，将版本号对应信息写入表中，作为与前端文件版本号的比对标准；

步骤5：在前端页面中请求后端程序，使之同步查询版本号数据表；

步骤6：springcloudgateway服务网关接到http请求后，分发给后端并执行接口逻辑，最后将查询到的版本号返回前端，前端根据返回的版本号加载js文件并渲染页面。

上述技术方案中，所述步骤1包括以下步骤：

步骤1.1：将更新后前端的版本号加入到配置文件中，打包后的js文件后缀会包含该版本号；

步骤1.2：用上一步配置中得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；

步骤1.3：确定入口：根据配置中的entry找出所有的入口文件；

步骤1.4：编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

步骤1.5：完成模块编译：在经过上一步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。

步骤1.6：输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表；

步骤1.7：输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，生成后缀中包含版本号的js文件；

上述技术方案中，所述步骤5包括以下步骤：