CN115982504A - 一种通用的前端工程化缓存优化部署方法及系统 - Google Patents

Abstract

本发明公开了一种通用的前端工程化缓存优化部署方法及系统，涉及云计算技术领域。包括：静态资源服务器获取待发布的静态资源文件，对静态资源文件生成编译压缩后的文件名；静态资源服务器在待发布的静态资源文件发布时，将编译压缩后的文件名维护到资源代理中心以及资源匹配中心仓库；浏览器根据用户的访问需求，通过本地缓存模块和/或资源代理中心和/或资源匹配中心仓库获取所需的静态资源文件。本发明通过脚本解决静态资源修改后，自动处理文件名的修改问题；当静态资源与动态网页分离部署时能够实现平滑升级；当有用户由于缓存仍在请求旧资源时自动监测并加载最新资源。

Description

一种通用的前端工程化缓存优化部署方法及系统

技术领域

本发明涉及云计算技术领域，特别是指一种通用的前端工程化缓存优化部署方法及系统。

背景技术

由于业务场景的复杂化，前端工程的代码量越来越繁重，导致前端升级维护越来越棘手。最重要的是提升用户体验，加快网页脚本程序js、对网页内容进行排版、装饰的层叠样式表css等静态资源的加载速度，利用好浏览器缓存，但同时有新功能上线时，防止缓存问题，引起的无法下载最新的js、css、文档等静态资源的状况，亟需一种解决方案解决此类问题。

目前为了解决此类问题，往往在升级时手动修改文件版本号，此类工作比较繁重，而且容易遗漏或调整了未变化的静态资源，还有当静态资源与动态网页分离部署时，无法平滑的升级。

发明内容

本发明针对现有技术在升级时手动修改文件版本号比较繁重，而且容易遗漏或调整了未变化的静态资源，还有当静态资源与动态网页分离部署时，无法平滑地升级的问题，提出了本发明。

为解决上述技术问题，本发明提供如下技术方案：

一方面，本发明提供了一种通用的前端工程化缓存优化部署方法，该方法由通用的前端工程化缓存优化部署系统实现，该系统包括静态资源服务器、资源代理中心、资源匹配中心仓库以及浏览器；

该方法包括：

S1、静态资源服务器获取待发布的静态资源文件，对静态资源文件生成编译压缩后的文件名。

S2、静态资源服务器在待发布的静态资源文件发布时，将编译压缩后的文件名维护到资源代理中心以及资源匹配中心仓库。

S3、浏览器根据用户的访问需求，通过本地缓存模块和/或资源代理中心和/或资源匹配中心仓库获取所需的静态资源文件。

可选地，S1中的静态资源服务器获取待发布的静态资源文件，对静态资源文件生成编译压缩后的文件名，包括：

S11、静态资源服务器通过开源软件项目Jenkins调用分布式版本控制系统git拉取待发布的静态资源文件。

S12、读取静态资源文件，并获取静态资源文件中没有唯一标识的静态资源文件，在没有唯一标识的静态资源文件顶部写入唯一标识，将修改后的静态资源文件发送至git仓库中。

S13、通过模块化打包工具webpack对修改后的静态资源文件进行编译压缩，得到编译压缩后的静态资源文件。

S14、对编译压缩后的静态资源文件利用webpack哈希功能计算哈希值。

S15、将哈希值以及唯一标识追加到编译压缩后的静态资源文件的文件名中。

可选地，S12中的唯一标识通过通用唯一识别码UUID算法生成。

可选地，S2中的将编译压缩后的文件名维护到资源代理中心以及资源匹配中心仓库，包括：

将编译压缩后的文件名维护到资源代理中心，将编译压缩后的文件名对应的最终网络地址维护到资源匹配中心仓库。

可选地，S3中的浏览器根据用户的访问需求，通过本地缓存模块和/或资源代理中心和/或资源匹配中心仓库获取所需的静态资源文件，包括：

浏览器根据用户的访问需求，获取访问需求中所需的静态资源文件，判断所需的静态资源文件的缓存是否已失效，若已失效，则通过资源代理中心加载所需的静态资源文件；若未失效，则通过本地缓存模块、资源代理中心以及资源匹配中心仓库加载所需的静态资源文件。

可选地，通过本地缓存模块、资源代理中心以及资源匹配中心仓库加载所需的静态资源文件，包括：

判断所需的静态资源文件是否已在服务端清理，若否，则通过本地缓存模块加载所需的静态资源文件；若是，则通过本地缓存模块向资源代理中心进行异步资源请求，资源代理中心通过资源匹配中心仓库匹配最新的所需的静态资源文件，然后通过资源服务器响应给浏览器。

另一方面，本发明提供了一种通用的前端工程化缓存优化部署系统，该系统应用于实现通用的前端工程化缓存优化部署方法，该系统包括静态资源服务器、资源代理中心、资源匹配中心仓库以及浏览器；

其中：

静态资源服务器，用于获取待发布的静态资源文件，对静态资源文件生成编译压缩后的文件名；在待发布的静态资源文件发布时，将编译压缩后的文件名维护到资源代理中心以及资源匹配中心仓库。

资源代理中心，用于获取所需的静态资源文件。

资源匹配中心仓库，用于匹配检索所需的最新的静态资源文件。

浏览器，用于浏览器根据用户的访问需求，通过本地缓存模块和/或资源代理中心和/或资源匹配中心仓库获取所需的静态资源文件。

可选地，静态资源服务器，进一步用于：

S11、静态资源服务器通过开源软件项目Jenkins调用分布式版本控制系统git拉取待发布的静态资源文件。

S12、读取静态资源文件，并获取静态资源文件中没有唯一标识的静态资源文件，在没有唯一标识的静态资源文件顶部写入唯一标识，将修改后的静态资源文件发送至git仓库中。

S13、通过模块化打包工具webpack对修改后的静态资源文件进行编译压缩，得到编译压缩后的静态资源文件。

S14、对编译压缩后的静态资源文件利用webpack哈希功能计算哈希值。

S15、将哈希值以及唯一标识追加到编译压缩后的静态资源文件的文件名中。

可选地，唯一标识通过通用唯一识别码UUID算法生成。

可选地，静态资源服务器，进一步用于：

将编译压缩后的文件名维护到资源代理中心，将编译压缩后的文件名对应的网络地址维护到资源匹配中心仓库。

可选地，浏览器，进一步用于：

浏览器根据用户的访问需求，获取访问需求中所需的静态资源文件，判断所需的静态资源文件的缓存是否已失效，若已失效，则通过资源代理中心加载所需的静态资源文件；若未失效，则通过本地缓存模块、资源代理中心以及资源匹配中心仓库加载所需的静态资源文件。

可选地，浏览器，进一步用于：

判断所需的静态资源文件是否已在服务端清理，若否，则通过本地缓存模块加载所需的静态资源文件；若是，则通过本地缓存模块向资源代理中心进行异步资源请求，资源代理中心通过资源匹配中心仓库匹配最新的所需的静态资源文件，然后通过资源服务器响应给浏览器。

本发明实施例提供的技术方案带来的有益效果至少包括：

上述方案中，利用程序自动计算hash值，修改文件名称，解放了手动劳力；自动检测旧版本的资源请求，主动转发到新的资源文件，提高了用户体验；发布静态资源时，可以平滑升级，用户无感知；升级成功可以清除旧资源，节省服务器资源。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的通用的前端工程化缓存优化部署方法流程示意图；

图2是本发明实施例提供的通用的前端工程化缓存优化部署方法流程示意图；

图3是本发明实施例提供的通用的前端工程化缓存优化部署系统框图。

具体实施方式

为使本发明要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具体实施例进行详细描述。

如图1所示，本发明实施例提供了一种通用的前端工程化缓存优化部署方法，该方法由通用的前端工程化缓存优化部署系统实现。如图1所示的通用的前端工程化缓存优化部署方法流程图，该方法的处理流程可以包括如下的步骤：

S1、静态资源服务器获取待发布的静态资源文件，对静态资源文件生成编译压缩后的文件名。

可选地，上述步骤S1可以包括如下步骤S11-S15：

S11、静态资源服务器通过开源软件项目Jenkins调用分布式版本控制系统git拉取待发布的静态资源文件。

S12、读取静态资源文件，并获取静态资源文件中没有唯一标识的静态资源文件，在没有唯一标识的静态资源文件顶部写入唯一标识，将修改后的静态资源文件发送至git仓库中。

可选地，唯一标识通过通用唯一识别码UUID算法生成。

S13、通过模块化打包工具webpack对修改后的静态资源文件进行编译压缩，得到编译压缩后的静态资源文件。

S14、对编译压缩后的静态资源文件利用webpack哈希功能计算哈希值。

S15、将哈希值以及唯一标识追加到编译压缩后的静态资源文件的文件名中。

一种可行的实施方式中，如图2所示，当资源需要发布时，首先通过Jenkins（一种对脚本、样式等静态文件的模块化打包工具）调用git（一种基于命令的快速、可扩展的分布式版本控制系统）拉取资源文件。首先读取资源文件，检查源代码文件是否有唯一标识，如果没有则在源文件顶部，写入一行文件唯一标识，唯一标识可通过UUID（UniversallyUnique Identifier，通用唯一识别码）算法生成，并将此修改结果push到git仓库中。然后通过webpack（一种对脚本、样式等静态文件的模块化打包工具）对静态资源进行编译压缩，对编译压缩后产生的资源文件，利用webpack哈希功能对此资源算出一个哈希值，并将此哈希值以及文件唯一标识追加到编译后的资源文件的文件名中。

S2、静态资源服务器在待发布的静态资源文件发布时，将编译压缩后的文件名维护到资源代理中心，将编译压缩后的文件名对应的最终网络地址维护到资源匹配中心仓库。

一种可行的实施方式中，对资源进行发布时，同时将此资源名称维护到资源代理中心，用于匹配资源请求。并根据资源文件的唯一标识，将资源名对应网络地址维护到资源匹配中心仓库，用于对过期资源请求时的正确资源或信息响应，解决资源下载时，将404等编程异常信息直接呈现给用户的现象。

S3、浏览器根据用户的访问需求，通过本地缓存模块和/或资源代理中心和/或资源匹配中心仓库获取所需的静态资源文件。

可选地，上述步骤S3可以包括：

浏览器根据用户的访问需求，获取访问需求中所需的静态资源文件，判断所需的静态资源文件的缓存是否已失效，若已失效，则通过资源代理中心加载所需的静态资源文件；若未失效，则判断所需的静态资源文件是否已在服务端清理，若否，则通过本地缓存模块加载所需的静态资源文件；若是，则通过本地缓存模块向资源代理中心进行异步资源请求，资源代理中心通过资源匹配中心仓库匹配最新的所需的静态资源文件，然后通过资源服务器响应给浏览器。

一种可行的实施方式中，当用户通过浏览器访问资源系统时，如果浏览器缓存失效请求资源时，通过资源代理中心，进行正常的资源文件响应。如果缓存的网页内容未失效，但对于网页中需要下载的资源（例如点击某按钮下载的资源或异步模块的异步文件异步加载时）已经在服务端清理后，将无法正常响应的资源请求，此时将由资源匹配中心仓库，检索最新的资源文件并响应给浏览器端，或通过静态资源服务器加载新资源，同时对于已下架资源将给予友好提醒。

进一步地，本发明通过资源检测中心，检测过期资源请求，并自动响应最新资源。

现有技术中所采用的技术为生成新文件名对应的配置文件，然后根据新文件名和配置文件输出对应的资源文件链接地址来解决此问题，本发明不用生成配置文件。

进一步地，现有技术解决方案是先打War包，再解压War包，再修改War中的文件名和引用地址，最后再重新打包成War包。本发明是在编译静态资源的同时一次性处理了文件名和引用地址，简化了操作步骤。

进一步地，本发明还增加了其他专利中没有的处理过程：浏览器请求过时的资源文件时，资源中心匹配仓库会返回友好的指示信息，而不是直接返回404错误，从而使浏览器端更容易做到准确提醒最终用户发生了什么事情。

本发明实施例中，利用程序自动计算hash值，修改文件名称，解放了手动劳力；自动检测旧版本的资源请求，主动转发到新的资源文件，提高了用户体验；发布静态资源时，可以平滑升级，用户无感知；升级成功可以清除旧资源，节省服务器资源。

如图3所示，本发明实施例提供了一种通用的前端工程化缓存优化部署系统，该系统应用于实现通用的前端工程化缓存优化部署方法，该系统包括静态资源服务器、资源代理中心、资源匹配中心仓库以及浏览器；

其中：

静态资源服务器，用于获取待发布的静态资源文件，对静态资源文件生成编译压缩后的文件名；在待发布的静态资源文件发布时，将编译压缩后的文件名维护到资源代理中心以及资源匹配中心仓库。

资源代理中心，用于获取所需的静态资源文件。

资源匹配中心仓库，用于匹配检索所需的最新的静态资源文件。

浏览器，用于浏览器根据用户的访问需求，通过本地缓存模块和/或资源代理中心和/或资源匹配中心仓库获取所需的静态资源文件。

可选地，静态资源服务器，进一步用于：

S11、静态资源服务器通过开源软件项目Jenkins调用分布式版本控制系统git拉取待发布的静态资源文件。

S12、读取静态资源文件，并获取静态资源文件中没有唯一标识的静态资源文件，在没有唯一标识的静态资源文件顶部写入唯一标识，将修改后的静态资源文件发送至git仓库中。

S13、通过模块化打包工具webpack对修改后的静态资源文件进行编译压缩，得到编译压缩后的静态资源文件。

S14、对编译压缩后的静态资源文件利用webpack哈希功能计算哈希值。

S15、将哈希值以及唯一标识追加到编译压缩后的静态资源文件的文件名中。

可选地，唯一标识通过通用唯一识别码UUID算法生成。

可选地，静态资源服务器，进一步用于：

将编译压缩后的文件名维护到资源代理中心，将编译压缩后的文件名对应的网络地址维护到资源匹配中心仓库。

可选地，浏览器，进一步用于：

浏览器根据用户的访问需求，获取访问需求中所需的静态资源文件，判断所需的静态资源文件的缓存是否已失效，若已失效，则通过资源代理中心加载所需的静态资源文件；若未失效，则通过本地缓存模块、资源代理中心以及资源匹配中心仓库加载所需的静态资源文件。

可选地，浏览器，进一步用于：

判断所需的静态资源文件是否已在服务端清理，若否，则通过本地缓存模块加载所需的静态资源文件；若是，则通过本地缓存模块向资源代理中心进行异步资源请求，资源代理中心通过资源匹配中心仓库匹配最新的所需的静态资源文件，然后通过资源服务器响应给浏览器。

本发明实施例中，利用程序自动计算hash值，修改文件名称，解放了手动劳力；自动检测旧版本的资源请求，主动转发到新的资源文件，提高了用户体验；发布静态资源时，可以平滑升级，用户无感知；升级成功可以清除旧资源，节省服务器资源。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种通用的前端工程化缓存优化部署方法，其特征在于，所述方法由通用的前端工程化缓存优化部署系统实现，所述系统包括静态资源服务器、资源代理中心、资源匹配中心仓库以及浏览器；

所述方法包括：

S1、所述静态资源服务器获取待发布的静态资源文件，对所述静态资源文件生成编译压缩后的文件名；

S2、所述静态资源服务器在所述待发布的静态资源文件发布时，将所述编译压缩后的文件名维护到所述资源代理中心以及资源匹配中心仓库；

S3、所述浏览器根据用户的访问需求，通过本地缓存模块和/或所述资源代理中心和/或所述资源匹配中心仓库获取所需的静态资源文件。

2.根据权利要求1所述的方法，其特征在于，所述S1中的所述静态资源服务器获取待发布的静态资源文件，对所述静态资源文件生成编译压缩后的文件名，包括：

S11、所述静态资源服务器通过开源软件项目Jenkins调用分布式版本控制系统git拉取待发布的静态资源文件；

S12、读取所述静态资源文件，并获取所述静态资源文件中没有唯一标识的静态资源文件，在所述没有唯一标识的静态资源文件顶部写入唯一标识，将修改后的静态资源文件发送至git仓库中；

S13、通过模块化打包工具webpack对所述修改后的静态资源文件进行编译压缩，得到编译压缩后的静态资源文件；

S14、对所述编译压缩后的静态资源文件利用webpack哈希功能计算哈希值；

S15、将所述哈希值以及唯一标识追加到编译压缩后的静态资源文件的文件名中。

3.根据权利要求2所述的方法，其特征在于，所述S12中的唯一标识通过通用唯一识别码UUID算法生成。

4.根据权利要求1所述的方法，其特征在于，所述S2中的将所述编译压缩后的文件名维护到所述资源代理中心以及资源匹配中心仓库，包括：

将所述编译压缩后的文件名维护到所述资源代理中心，将所述编译压缩后的文件名对应的网络地址维护到所述资源匹配中心仓库。

5.根据权利要求1所述的方法，其特征在于，所述S3中的所述浏览器根据用户的访问需求，通过本地缓存模块和/或所述资源代理中心和/或所述资源匹配中心仓库获取所需的静态资源文件，包括：

所述浏览器根据用户的访问需求，获取所述访问需求中所需的静态资源文件，判断所需的静态资源文件的缓存是否已失效，若已失效，则通过所述资源代理中心加载所需的静态资源文件；若未失效，则通过本地缓存模块、所述资源代理中心以及资源匹配中心仓库加载所需的静态资源文件。

6.根据权利要求5所述的方法，其特征在于，所述通过本地缓存模块、所述资源代理中心以及资源匹配中心仓库加载所需的静态资源文件，包括：

判断所需的静态资源文件是否已在服务端清理，若否，则通过本地缓存模块加载所需的静态资源文件；若是，则通过本地缓存模块向所述资源代理中心进行异步资源请求，所述资源代理中心通过所述资源匹配中心仓库匹配最新的所需的静态资源文件，然后通过资源服务器响应给所述浏览器。

7.一种通用的前端工程化缓存优化部署系统，其特征在于，所述系统包括静态资源服务器、资源代理中心、资源匹配中心仓库以及浏览器；

其中：

所述静态资源服务器，用于获取待发布的静态资源文件，对所述静态资源文件生成编译压缩后的文件名；在所述待发布的静态资源文件发布时，将所述编译压缩后的文件名维护到所述资源代理中心以及资源匹配中心仓库；

所述资源代理中心，用于获取所需的静态资源文件；

所述资源匹配中心仓库，用于匹配检索所需的最新的静态资源文件；

所述浏览器，用于浏览器根据用户的访问需求，通过本地缓存模块和/或所述资源代理中心和/或所述资源匹配中心仓库获取所需的静态资源文件。

8.根据权利要求7所述的系统，其特征在于，所述静态资源服务器，进一步用于：

S11、所述静态资源服务器通过开源软件项目Jenkins调用分布式版本控制系统git拉取待发布的静态资源文件；

S12、读取所述静态资源文件，并获取所述静态资源文件中没有唯一标识的静态资源文件，在所述没有唯一标识的静态资源文件顶部写入唯一标识，将修改后的静态资源文件发送至git仓库中；

S13、通过模块化打包工具webpack对所述修改后的静态资源文件进行编译压缩，得到编译压缩后的静态资源文件；

S14、对所述编译压缩后的静态资源文件利用webpack哈希功能计算哈希值；

S15、将所述哈希值以及唯一标识追加到编译压缩后的静态资源文件的文件名中。

9.根据权利要求7所述的系统，其特征在于，所述静态资源服务器，进一步用于：

将所述编译压缩后的文件名维护到所述资源代理中心，将所述编译压缩后的文件名对应的网络地址维护到所述资源匹配中心仓库。

10.根据权利要求7所述的系统，其特征在于，所述浏览器，进一步用于：

所述浏览器根据用户的访问需求，获取所述访问需求中所需的静态资源文件，判断所需的静态资源文件的缓存是否已失效，若已失效，则通过所述资源代理中心加载所需的静态资源文件；若未失效，则通过本地缓存模块、所述资源代理中心以及资源匹配中心仓库加载所需的静态资源文件。

Images