一种页面处理方法及装置、设备、存储介质

技术领域

本申请涉及网络技术领域，涉及但不限于一种页面处理方法及装置、设备、存储介质。

背景技术

随着网络技术的飞速发展，越来越多的用户通过浏览器访问网页来获取信息，与此同时，用户对网页响应速度的要求也越来越高。

在基于Vue3搭配Vite4和Ant Design Vue的前端架构中，Ant Design Vue可以提供许多各式各样的样式文件，这极大丰富了网页的展示效果，但是，由于浏览器在首次加载网页时需要编译和处理Ant Design Vue中的所有样式文件，这样会导致首次打开网页时响应速度过慢，渲染时间过长，给用户造成不好的用户体验。

发明内容

为解决上述技术问题，本申请提供了一种页面处理方法及装置、设备、存储介质，不仅可以提高浏览器的首次页面加载速度，减少首次渲染时间，而且实现方案简单高效、不易出错。

本申请的方案是这样实现的：

第一方面，本申请提供了一种页面处理方法，所述方法应用于服务端，所述服务端上运行有构建工具Vite；所述构建工具Vite中包括目标插件；所述方法包括：

通过所述目标插件获取目标路径文件中的Q个目标路径信息；所述目标路径信息用于指向预加载样式文件；所述Q大于或等于1；

通过所述目标插件基于所述Q个目标路径信息，对目标组件库中的预加载样式文件进行调用，得到P个预加载样式文件；所述P大于或等于所述Q；

通过所述目标插件将所述P个预加载样式文件存储至客户端的浏览器中的目标区域，以使所述浏览器基于所述目标区域中的所述P个预加载样式文件对所述目标页面进行加载与渲染。

第二方面，本申请提供了又一种页面处理方法，所述方法应用于客户端，所述客户端的浏览器中的目标区域存储有P个预加载样式文件；所述方法包括：

在接收到目标页面的加载指令的情况下，从所述目标区域中存储的所述P个预加载样式文件中，确定与所述加载指令对应的R个目标预加载样式文件；

至少基于所述R个目标预加载样式文件，加载并渲染所述目标页面。

第三方面，本申请提供了一种页面处理装置，所述装置部署于服务端，所述服务端上运行有构建工具Vite；所述构建工具Vite中包括目标插件；所述装置包括：

获取单元，用于通过所述目标插件获取目标路径文件中的Q个目标路径信息；所述目标路径信息用于指向预加载样式文件；所述Q大于或等于1；

调用单元，用于通过所述目标插件基于所述Q个目标路径信息，对目标组件库中的预加载样式文件进行调用，得到P个预加载样式文件；所述P大于或等于所述Q；

预存储单元，用于通过所述目标插件将所述P个预加载样式文件存储至客户端的浏览器中的目标区域，以使所述浏览器基于所述目标区域中的所述P个预加载样式文件对所述目标页面进行加载与渲染。

第四方面，本申请提供了又一种页面处理装置，所述装置部署于客户端，所述客户端的浏览器中的目标区域存储有P个预加载样式文件；所述装置包括：

确定单元，用于在接收到目标页面的加载指令的情况下，从所述目标区域中存储的所述P个预加载样式文件中，确定与所述加载指令对应的R个目标预加载样式文件；

渲染单元，用于至少基于所述R个目标预加载样式文件，加载并渲染所述目标页面。

第五方面，本申请还提供了一种电子设备，包括：存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述页面处理方法。

第六方面，本申请还提供了一种存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述页面处理方法。

本申请所提供的页面处理方法及装置、设备、存储介质，所述方法应用于服务端，所述服务端上运行有构建工具Vite；所述构建工具Vite中包括目标插件；所述方法包括：通过所述目标插件获取目标路径文件中的Q个目标路径信息；所述目标路径信息用于指向预加载样式文件；所述Q大于或等于1；通过所述目标插件基于所述Q个目标路径信息，对目标组件库中的预加载样式文件进行调用，得到P个预加载样式文件；所述P大于或等于所述Q；通过所述目标插件将所述P个预加载样式文件存储至客户端的浏览器中的目标区域，以使所述浏览器基于所述目标区域中的所述P个预加载样式文件对所述目标页面进行加载与渲染。

对于本申请的方案，通过服务端的构建工具Vite的目标插件，可以获取到目标路径文件中的目标路径信息，进而可以基于该目标路径信息得到目标组件库中的所有预加载样式文件，这样，便可将目标组件库中的所有预加载样式文件提前存储至客户端的浏览器中。可以看出：本申请的方案中，充分利用构建工具Vite的目标插件的特性，通过该目标插件将目标组件库中的所有预加载样式文件提前存储至浏览器中，如此，使得浏览器在首次加载网页时，可以直接从其目标区域中获取目标预加载样式文件来进行页面加载与渲染，无需再去编译和处理目标组件库中的所有样式文件，本申请方案不仅可以提高浏览器的首次页面加载速度，减少首次渲染时间，而且实现方案简单高效、不易出错。

附图说明

图1为本申请实施例提供的页面处理方法的第一种可选的流程示意图；

图2为本申请实施例提供的页面处理方法的第二种可选的流程示意图；

图3为本申请实施例提供的页面处理方法的第三种可选的流程示意图；

图4为本申请实施例提供的页面处理方法的第四种可选的流程示意图；

图5为本申请实施例提供的页面处理方法的第五种可选的流程示意图；

图6为本申请实施例提供的页面处理方法的第六种可选的流程示意图；

图7为本申请实施例提供的页面处理方法的第七种可选的流程示意图；

图8为本申请实施例提供的又一页面处理方法的第一种可选的流程示意图；

图9为本申请实施例提供的页面处理装置的一种可选的结构示意图；

图10为本申请实施例提供的又一页面处理装置的一种可选的结构示意图；

图11为本申请实施例提供的电子设备的一种可选的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对申请的具体技术方案做进一步详细描述。以下实施例用于说明本申请，但不用来限制本申请的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一第二第三”仅是为例区别不同的对象，不代表针对对象的特定排序，不具有先后顺序的限定。可以理解地，“第一第二第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

下面，对本申请实施例提供的页面处理方法及装置、设备、存储介质的各实施例进行说明。

第一方面，本申请提供了一种页面处理方法。该方法应用于服务端。该方法所实现的功能可以通过电子设备中的处理器调用程序代码来实现，当然，程序代码可以保存在存储器中，可见，该电子设备至少包括处理器和存储器。

下面，对本申请实施例提供的页面处理方法进行说明。

图1为本申请实施例提供的页面处理方法的流程示意图，如图1所示，该过程可以包括但不限于下述S101至S103。

该方法应用于服务端，所述服务端上运行有构建工具Vite；所述构建工具Vite中包括目标插件。

服务端，可以为任一具有相关数据处理能力的电子设备。本申请实施例对服务端的具体类型不作限定，可以根据实际情况进行配置。示例性的，服务端可以为某购物网站对应的服务器设备。

预先的，服务端上运行有构建工具Vite。

构建工具Vite，为前端开发与构建工具，用于在软件开发过程中对页面前端代码进行开发与构建。该工具是一个面向JavaScript和TypeScript的开发者的构建工具，旨在通过提供快速构建、编译和部署的体验，来帮助前端开发者更快速地开发应用。Vite提供了丰富的插件应用程序编程接口API(Application Programming Interface)，可供开发者在实际项目开发过程中结合Vite开发出多种多样的插件。

目标插件，可以为构建工具Vite的任一用于预构建的插件。本申请实施例对目标插件的具体类型不作限定，可以根据实际情况进行配置。示例性的，目标插件可以为optimizeDeps插件。

S101、服务端通过所述目标插件获取目标路径文件中的Q个目标路径信息。

目标路径文件，用于存储预加载样式文件对应的路径信息。本申请实施例对目标路径文件的具体格式不作限定，可以根据实际情况进行配置。示例性的，目标路径文件的格式可以为可扩展标记语言(eXtensible Markup Language，XML)格式。

所述目标路径信息用于指向预加载样式文件；所述Q大于或等于1。

本申请实施例对目标路径信息的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，目标路径信息可以是绝对路径信息，也可以是相对路径信息。

本申请实施例对目标路径信息指向的预加载样式文件的具体数量不作限定，可以根据实际情况进行配置。示例性的，一个目标路径信息可以指向一个预加载样式文件，也可以指向多个预加载样式文件。

预加载样式文件，可以为任一组件库中用于定义网页的样式和布局的文件。本申请实施例对预加载样式文件的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，预加载样式文件可以包括各种常用的层叠样式表(Cascading Style Sheets，CSS)规则和样式，如表格样式、按钮样式、颜色样式等等，还可以包括图标文件、字体文件等等。

示例性的，S101可以实施为：服务端通过目标插件从目标组件库中获取目标路径文件，并读取目标路径文件的内容，得到Q个目标路径信息，其中，一个目标路径信息用于指向一个或多个预加载样式文件。

S102、服务端通过所述目标插件基于所述Q个目标路径信息，对目标组件库中的预加载样式文件进行调用，得到P个预加载样式文件。

目标组件库，可以为任一包括样式文件的组件库。本申请实施例对目标组件库的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，目标组件库可以为第三方组件库，也可以为某一项目自主研发的组件库，还可以是构建工具本身自带的组件库。例如，目标组件库可以包括Ant Design Vue组件库、Element-UI组件库等。

所述P大于或等于所述Q。

在一种可能的实施方式中，一个目标路径信息指向一个预加载样式文件，那么，预加载样式文件的数量P等于目标路径信息的数量Q。

在另一种可能的实施方式中，一个目标路径信息指向多个预加载样式文件，那么，预加载样式文件的数量P大于目标路径信息的数量Q。

示例性的，S102可以实施为：服务端通过目标插件遍历Q个目标路径信息，针对Q个目标路径信息中的每个目标路径信息，从目标组件库中获取目标路径信息对应的目标路径下的预加载样式文件，得到P个预加载样式文件。

S103、服务端通过所述目标插件将所述P个预加载样式文件存储至客户端的浏览器中的目标区域，以使所述浏览器基于所述目标区域中的所述P个预加载样式文件对所述目标页面进行加载与渲染。

目标区域，为浏览器中用于存储预加载样式文件的存储区域。本申请实施例对目标区域的具体内容不作限定，可以根据实际情况进行配置。示例性的，目标区域可以是浏览器的缓存。

示例性的，S103可以实施为：服务端通过目标插件将P个预加载样式文件进行打包、构建后存储至客户端的浏览器缓存中，对应的，浏览器基于其缓存中存储的P个预加载样式文件，对目标页面进行加载与渲染。

本申请所提供的页面处理方法，所述方法应用于服务端，所述服务端上运行有构建工具Vite；所述构建工具Vite中包括目标插件；所述方法包括：通过所述目标插件获取目标路径文件中的Q个目标路径信息；所述目标路径信息用于指向预加载样式文件；所述Q大于或等于1；通过所述目标插件基于所述Q个目标路径信息，对目标组件库中的预加载样式文件进行调用，得到P个预加载样式文件；所述P大于或等于所述Q；通过所述目标插件将所述P个预加载样式文件存储至客户端的浏览器中的目标区域，以使所述浏览器基于所述目标区域中的所述P个预加载样式文件对所述目标页面进行加载与渲染。

对于本申请的方案，通过服务端的构建工具Vite的目标插件，可以获取到目标路径文件中的目标路径信息，进而可以基于该目标路径信息得到目标组件库中的所有预加载样式文件，这样，便可将目标组件库中的所有预加载样式文件提前存储至客户端的浏览器中。可以看出：本申请的方案中，充分利用构建工具Vite的目标插件的特性，通过该目标插件将目标组件库中的所有预加载样式文件提前存储至浏览器中，如此，使得浏览器在首次加载网页时，可以直接从其目标区域中获取目标预加载样式文件来进行页面加载与渲染，无需再去编译和处理目标组件库中的所有样式文件，本申请方案不仅可以提高浏览器的首次页面加载速度，减少首次渲染时间，而且实现方案简单高效、不易出错。

本申请实施例还可以包括目标路径文件的获取过程。

参考图2所示的内容，该过程可以包括但不限于下述S201至S203。

S201、服务端通过所述目标插件获取第一路径文件。

第一路径文件，用于存储第一组件库中的样式文件对应的路径信息。本申请实施例对第一路径文件的具体格式不作限定，可以根据实际情况进行配置。示例性的，第一路径文件的格式可以为XML格式。

所述第一路径文件存储有N个第一路径信息，一个所述第一路径信息用于指向第一组件库中的一个第一样式文件；所述N大于或等于1。

第一路径信息，用于指向第一组件库的样式文件。本申请实施例对第一路径信息的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，第一路径信息可以是绝对路径信息，也可以是相对路径信息。

第一组件库，可以为任一包括样式文件的组件库。本申请实施例对第一组件库的具体类型不作限定，可以根据实际情况进行配置。示例性的，第一组件库可以为Ant DesignVue组件库。

示例性的，S201可以实施为：服务端通过目标插件从第一组件库中获取第一路径文件。其中，该第一路径文件中存储有N个第一路径信息，一个第一路径信息用于指向第一组件库中的一个第一样式文件。

S202、服务端通过所述目标插件获取第二路径文件。

第二路径文件，用于存储第二组件库中的样式文件对应的路径信息。本申请实施例对第二路径文件的具体格式不作限定，可以根据实际情况进行配置。示例性的，第二路径文件的格式可以为XML格式。

所述第二路径文件存储有M个第二路径信息，一个所述第二路径信息用于指向第二组件库中的一个第二样式文件；所述M大于或等于1。

第二路径信息，用于指向第二组件库的样式文件。本申请实施例对第二路径信息的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，第二路径信息可以是绝对路径信息，也可以是相对路径信息。

第二组件库，可以为任一个不同于第一组件库、且包括样式文件的组件库。本申请实施例对第二组件库的具体类型不作限定，可以根据实际情况进行配置。示例性的，第二组件库可以为构建工具Vite的组件库。

示例性的，S202可以实施为：服务端通过目标插件从第二组件库中获取第二路径文件。其中，该第二路径文件中存储有N个第二路径信息，一个第二路径信息用于指向第二组件库中的一个第二样式文件。

S203、服务端通过所述目标插件对所述第一路径文件和所述第二路径文件进行处理，得到所述目标路径文件。

示例性的，S203可以实施为：服务端通过目标插件对第一路径文件包括的N个第一路径信息，和第二路径文件包括的M个第二路径信息进行去重后合并，得到目标路径文件。

下面，对S203中服务端通过目标插件对第一路径文件和第二路径文件进行处理，得到目标路径文件的过程进行说明。

参考图3所示的内容，该过程可以包括但不限于下述S301至S302。

S301、服务端通过所述目标插件对所述第一路径文件包括的所述N个第一路径信息，和所述第二路径文件包括的所述M个第二路径信息取并集，得到所述Q个目标路径信息。

示例性的，S301可以实施为：服务端通过目标插件读取第一路径文件的内容，得到N个第一路径信息；目标插件读取第二路径文件的内容，得到M个第二路径信息；目标插件对N个第一路径信息和M个第二路径信息取并集，得到Q个目标路径信息。

S302、服务端通过所述目标插件确定所述目标路径文件包括所述Q个目标路径信息。

示例性的，S302可以实施为：服务端通过目标插件将Q个目标路径信息存储至文件中，得到目标路径文件。

下面，对S201中服务器通过目标插件获取第一路径文件的过程进行说明。

参考图4所示的内容，该过程可以包括但不限于下述S401至S405。

S401、服务端通过所述目标插件中的第一函数读取所述第一组件库中的所有文件夹。

第一函数，用于读取指定目录中的文件夹及其子文件夹。本申请实施例对第一函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第一函数可以为构建工具Vite的fs.readdirSync方法。

示例性的，S401可以实施为：服务端通过目标插件将第一组件库的根目录作为参数传入第一函数，第一函数读取根目录下的所有文件夹及其子文件夹。

S402、服务端通过所述目标插件中的第二函数遍历所述所有文件夹。

第二函数，用于遍历指定目录下的所有文件夹及其子文件夹。本申请实施例对第二函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第二函数可以为构建工具Vite的folders.map方法。

示例性的，S402可以实施为：服务端通过目标插件将第一组件库的根目录作为参数传入第二函数，第二函数遍历根目录下的所有文件夹及其子文件夹。

针对所述所有文件夹中的每个所述文件夹，执行以下处理：

S403、服务端通过所述目标插件中的第三函数判断所述文件夹的名称是否包含目标字符串。

第三函数，用于判断某一字符串中是否包含目标字符串。本申请实施例对第三函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第三函数可以为构建工具Vite的fs.existsSync方法。

所述目标字符串用于表征所述文件夹中存储有所述第一样式文件。

目标字符串，可以为任一字符串。本申请实施例对目标字符串的具体内容不作限定，可以根据实际情况自行设置。示例性的，在第一组件库为Ant Design Vue组件库的情况下，存储样式文件的文件夹的名称中均包含“style”，所以，可以将目标字符串设置为“style”。

示例性的，S403可以实施为：服务端通过目标插件将文件夹名称作为参数传入第三函数，第三函数判断文件夹名称是否包含目标字符串，若是，执行步骤S403，若否，返回。

S404、在所述文件夹的名称包括所述目标字符串的情况下，服务端通过所述目标插件中的第四函数获取所述文件夹的路径信息，作为一个所述第一路径信息。

第四函数，用于获取文件夹的路径信息。本申请实施例对第四函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第四函数可以为构建工具Vite的path.resolve方法。

示例性的，S404可以实施为：在文件夹名称包括目标字符串的情况下，服务端通过目标插件将文件夹名称作为参数传入第四函数，第四函数获取文件夹的路径信息，并将获取到的路径信息作为一个第一路径信息。

S405、服务端通过所述目标插件中的第五函数将所述一个第一路径信息存储至所述第一路径文件。

第五函数，用于将某一路径信息存储至某一文件。本申请实施例对第五函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第五函数可以为构建工具Vite的push方法。

示例性的，S405可以实施为：服务端通过目标插件将一个第一路径信息以及第一路径文件作为参数传入第五函数，第五函数将该第一路径信息存储至该第一路径文件中。

下面，对S202中服务端通过目标插件获取第二路径文件的过程进行说明。

该过程可以包括下述情况一和情况二。

情况一、第二组件库不包括构建工具Vite的组件库的情况；

情况二、第二组件库包括构建工具Vite的组件库的情况。

下面，对情况一中服务端通过目标插件获取第二路径文件的过程进行说明。

针对情况一，第二组件库不包括构建工具Vite的组件库的情况，即第二组件库不为构建工具Vite的组件库的情况，在该种情况下，服务端通过目标插件获取第二路径文件的过程可以参考上述服务端通过目标插件获取第一路径文件的详细描述，此处不再赘述。

下面，对情况二中服务端通过目标插件获取第二路径文件的过程进行说明。

参考图5所示的内容，该过程可以包括但不限于下述S501至S503。

S501、服务端通过所述目标插件中的第六函数确认所述构建工具Vite的配置信息。

第六函数，用于确认构建工具Vite的配置信息。本申请实施例对第六函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第六函数可以为构建工具Vite的configResolved方法。

示例性的，S501可以实施为：服务端通过目标插件将构建工具Vite的配置信息作为参数传入第六函数，第六函数确认构建工具Vite的配置信息。

S502、服务端通过所述目标插件中的第七函数读取所述配置信息，并获取所述配置信息中的所述M个第二路径信息。

第七函数，用于获取配置信息。本申请实施例对第七函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第七函数可以为构建工具Vite的config方法。

示例性的，S502可以实施为：服务端通过目标插件将构建工具Vite的配置文件作为参数传入第七函数，第七函数读取构建工具Vite的配置信息，并获取该配置信息中的M个第二路径信息。

S503、服务端通过所述目标插件中的第八函数将所述M个第二路径信息存储至所述第二路径文件。

第八函数，用于将某一路径信息存储至某一文件。本申请实施例对第八函数的具体内容不作限定，可以根据实际情况自行设置。示例性的，第八函数可以为构建工具Vite的concat方法。

示例性的，S503可以实施为：服务端通过目标插件将M个第二路径信息以及第二路径文件作为参数传入第八函数，第八函数获取将该M个第二路径信息存储至该第二路径文件中。

下面，对S103中服务端通过目标插件将P个预加载样式文件存储至客户端的浏览器中的目标区域的过程进行说明。

该过程可以包括但不限于下述方式一和方式二。

方式一、服务端通过目标插件将P个预加载样式文件中的每个预加载样式文件存储至客户端的浏览器中的目标区域；

方式二、服务端通过目标插件将N个第一样式文件中的每个第一样式文件、M个第二样式文件中的每个第二样式文件，分别存储至客户端的浏览器中的目标区域。

下面，对方式一中服务器通过目标插件将P个预加载样式文件中的每个预加载样式文件存储至客户端的浏览器中的目标区域的过程进行说明。

参考图6所示的内容，该方法可以包括但不限于下述S601至S602。

S601、服务器通过所述目标插件将所述P个预加载样式文件中的每个所述预加载样式文件进行打包，得到P个压缩包。

示例性的，S601可以实施为：服务器通过目标插件遍历P个预加载样式文件，针对P个预加载样式文件中的每个预加载样式文件，将该预加载样式文件进行打包、构建，得到P个压缩包。

S602、服务器通过所述目标插件将所述P个压缩包存储至所述目标区域。

示例性的，S602可以实施为：服务器通过目标插件遍历P个压缩包，针对P个压缩包中的每个压缩包，将该压缩包存储至浏览器的目标区域。

下面，对方式二中服务器通过目标插件将N个第一样式文件中的每个第一样式文件、M个第二样式文件中的每个第二样式文件，分别存储至客户端的浏览器中的目标区域进行说明。

需要说明的是，P个预加载样式文件包括N个第一样式文件和M个第二样式文件。

参考图7所示的内容，该过程可以包括但不限于下述S701至S703。

S701、服务器通过所述目标插件将N个第一样式文件中的每个第一样式文件进行打包，得到所述第一组件库的N个压缩包。

在一种可能的实施方式中，S701可以实施为：服务器通过目标插件遍历N个第一样式文件，针对N个第一样式文件中的每个第一样式文件，将该第一样式文件进行打包、构建，得到第一组件库的N个压缩包。

S702、服务器通过所述目标插件将M个第二样式文件中的每个第二样式文件进行打包，得到所述第二组件库的M个压缩包。

示例性的，S702可以实施为：服务器通过目标插件遍历M个第二样式文件，针对M个第二样式文件中的每个第二样式文件，将该第二样式文件进行打包、构建，得到第二组件库的M个压缩包。

需要说明的是，在方式二中，第一组件库的N个压缩包和第二组件库的M个压缩包被预先进行了区分。

本申请实施例对第一组件库的N个压缩包和第二组件库的M个压缩包的具体区分方式不作限定，可以根据实际情况自行设置。

在一种可能的实施方式中，第一组件库的N个压缩包和第二组件库的M个压缩包是基于命名方式进行区分的。例如，第一组件库的N个压缩包的命名方式为第一字符串拼接每个压缩包的名称，第二组件库的M个压缩包的命名方式为：第二字符串拼接每个压缩包的名称，其中，第一字符串和第二字符串不同。

在另一种可能的实施方式中，第一组件库的N个压缩包和第二组件库的M个压缩包是基于文件夹方式进行区分的。例如，将第一组件库的N个压缩包存储至第一文件夹中，将第二组件库的M个压缩包存储至第二文件夹中，其中，第一文件夹与第二文件夹不同。

S703、服务器通过所述目标插件将所述N个压缩包和M个压缩包存储至所述目标区域。

示例性的，S703可以实施为：服务器通过目标插件遍历第一组件库的N个压缩包，针对该N个压缩包中的每个压缩包，将该压缩包存储至浏览器的目标区域；目标插件遍历第二组件库的M个压缩包，针对该M个压缩包中的每个压缩包，将该压缩包存储至浏览器的目标区域。

第二方面，本申请实施例提供了又一种页面处理方法。该方法所实现的功能可以通过电子设备中的处理器调用程序代码来实现，当然程序代码可以保存在计算机存储介质中，可见，该电子设备至少包括处理器和存储介质。

下面，对本申请实施例提供的又一种页面处理方法进行说明。

图8为本申请实施例的又一种页面处理方法的流程示意图，如图8所示，该过程可以包括但不限于下述S801至S802。

该方法应用于客户端，所述客户端的浏览器中的目标区域存储有P个预加载样式文件。

客户端，可以为任一具有相关数据处理能力的电子设备。本申请实施例对客户端的具体类型不作限定，可以根据实际情况进行配置。示例性的，客户端包括但不限于电脑、终端设备等。

浏览器，可以为任一浏览器。本申请实施例对浏览器的具体类型不作限定，可以根据实际情况进行配置。示例性的，浏览器可以为谷歌浏览器。

目标区域，可以是浏览器的任一存储位置。本申请实施例对目标区域的具体内容不作限定，可以根据实际情况进行配置。示例性的，目标区域可以是浏览器的缓存。

预加载样式文件，可以为任一组件库中用于定义网页的样式和布局的文件。本申请实施例对预加载样式文件的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，预加载样式文件可以包括各种常用的层叠样式表(Cascading Style Sheets，CSS)规则和样式，如表格样式、按钮样式、颜色样式等等，还可以包括图标文件、字体文件等等。

对于获取P个预加载样式文件的过程，可以参考上述第一方面的页面处理方法中得到P个预加载样式文件的详细描述，此处不再赘述。

S801、在接收到目标页面的加载指令的情况下，所述浏览器从所述目标区域中存储的所述P个预加载样式文件中，确定与所述加载指令对应的R个目标预加载样式文件。

目标页面，可以为任一页面。本申请实施例对目标页面的具体类型和数量不作限定，可以根据实际情况进行配置。示例性的，目标页面可以为某购物网站的首页页面。

加载指令，用于指示浏览器打开某一网页。本申请实施例对加载指令的具体类型不作限定，可以根据实际情况进行配置。示例性的，加载指令可以为用户输入网址并进行搜索的操作。

本申请实施例对浏览器从目标区域中存储的P个预加载样式文件中，确定与加载指令对应的R个目标预加载样式文件的具体方式不作限定，可以根据实际情况进行配置。

在一种可能的实施方式中，S801可以实施为：在接收到目标页面的加载指令的情况下，浏览器遍历其目标区域中存储的P个预加载样式文件，将与加载指令对应的预加载样式文件，作为R个目标预加载样式文件。

在另一种可能的实施方式中，S801可以实施为：在接收到目标页面的加载指令的情况下，浏览器遍历其目标区域中存储的N个第一样式文件，将与加载指令对应的第一样式文件，作为R个目标预加载样式文件；或者，浏览器遍历其目标区域中存储的M个第二样式文件，将与加载指令对应的第二样式文件，作为R个目标预加载样式文件；或者，浏览器分别遍历其目标区域中存储的N个第一样式文件、M个第二样式文件，将与加载指令对应的第一样式文件、第二样式文件，作为R个目标预加载样式文件。

S802、所述浏览器至少基于所述R个目标预加载样式文件，加载并渲染所述目标页面。

示例性的，S802可以实施为：浏览器基于目标页面对应的R个目标预加载样式文件，对目标页面中的样式进行加载和渲染，并在浏览器中显示目标页面。

下面，通过一个详细的实施例对本申请的页面处理方法进行说明。

在基于Vue3搭配Vite4和Ant Design Vue的前端框架中，Vue3和Vite4本身并不会导致首次渲染慢，但是，Vue3和Vite4在加载应用程序时需要编译和处理所有组件和模板。所以，在引入Ant Design Vue之后，Ant Design Vue作为一个用户界面(User Interface，UI)组件库，可能会影响首次渲染速度，具体原因如下：

1、大量的组件和样式：Ant Design Vue提供了许多丰富的组件和样式，如果应用程序中使用了很多组件和样式，会增加首次渲染的负担。

2、图标和字体文件：Ant Design Vue中的图标和字体文件也会对首次渲染速度产生影响。

本申请实施例的目的是为了解决在Vue3和Vite4版本下，引入Ant Design Vue UI库之后造成的页面首次渲染时间过长的问题。核心思路包括：

第一、使用Vite工具(相当于上述构建工具Vite)中的optimizeDeps()函数(相当于上述目标插件)以及用于优化Ant Design Vue组件库的辅助函数optimizeAntd()，将Ant Des ign Vue组件库(相当于上述第一组件库)的样式文件(相当于上述第一样式文件)和组件代码分开打包，并对样式进行压缩、打包、构建等优化处理，从而提高页面加载速度和性能表现；

第二、采用预构建技术，预构建是一种优化技术，可以将文件打包成更小、更精简和更高效的形式，并提前加载到浏览器中缓存(相当于上述浏览器的目标区域)起来，以提高网页的性能和响应速度。

下面，对本申请实施例的页面处理方法的具体流程进行说明。

首先，由于项目是Vue3+Vite4的项目，找到项目的入口文件，默认是main.ts，在main.ts中引入Ant Design Vue组件库(相当于上述第一组件库)，并对组件库进行注册。

其次，新建一个ts文件，用来编写预构建方法。具体的，创建一个针对Ant DesignVu e目录结构进行优化的方法：optimizeAntd，该方法具体包括以下步骤：

步骤1、在代码中声明一个字符串数组includes(相当于上述第一路径文件)，并将“ant-design-vue/es”添加到该数组中。这个数组的作用是存储特定目录下所有带有“style”子目录的文件夹的路径(相当于上述第一路径信息)，带有“style”的文件夹(相当于上述第一样式文件)是指Ant Design Vue组件库中的样式文件所在的文件夹。

步骤2、代码使用fs.readdirSync()方法(相当于上述第一函数)读取指定目录下的所有文件和子目录。在这里，使用path.resolve()方法获取目录的绝对路径，以确保能够正确地访问目录。

步骤3、使用folders.map()方法(相当于上述第二函数)遍历指定目录下的每个子目录。对于每个子目录，代码通过path.resolve()方法获取其完整路径，并使用fs.lstatSync()方法获取该路径对应的文件/子目录的状态信息。

步骤4、如果该路径表示一个目录，即isDirectory()方法返回true，则代码进一步通过fs.existsSync()方法(相当于上述第三函数)检查其中是否包含名为“style”的子目录。如果存在，则使用path.resolve()方法(相当于上述第四函数)获取其完整路径，并使用fs.lstatSync()方法再次检查它是否是一个目录，如果是，则通过push()方法(相当于上述第五函数)将该目录完整路径添加到includes数组中。

总之，该过程的作用是搜索指定目录下所有带“style”子目录的文件夹，并将它们的路径添加到includes数组中，以供后续操作使用。最终，includes数组中包含了所有带有“style”子目录的文件夹的路径。该数组可以用于后续操作，例如加载样式表等。

再次，优化预加载依赖方法。optimizeDeps是Vite构建工具中的一个插件，用于优化项目依赖项，可以通过配置vite.config.js文件来启用该插件。这个插件包含了一个钩子函数co nfigResolved，在Vite配置项解析完毕后执行。这个函数接受一个config参数，表示Vite的配置信息。该过程的具体步骤如下：

步骤a、获取optimizeDeps插件的返回值。optimizeDeps插件的返回值是一个对象，其中包含一个name字段和一个configResolved字段。其中name是一个字符串，作为这个插件的标识符使用。

步骤b、使用configResolved函数(相当于上述第六函数)获取Vite的配置信息。confi gResolved是一个回调函数，在Vite配置项解析完毕后执行。通过config函数(相当于上述第七函数)获取一个config参数，表示Vite的配置信息。在这个回调函数中，对Vite的配置信息进行操作以达到优化依赖项的目的。通过读取Vite的配置参数，可以得到optimizeD eps.include配置项(相当于上述第二路径文件，其中存储有第二路径信息)。

步骤c、具体来说，configResolved函数首先将optimizeDeps.include和optimizeAntd()的结果合并起来，并去除重复项，然后将合并后的数组重新分配给config.optimizeDeps.includ e。config.optimizeDeps.include配置项(相当于上述目标路径文件)是一个字符串数组，表示需要被预构建的模块列表。

总体来说，这过程的作用就是把得到的样式文件添加至需要被预构建的模块列表中。

最后，方法的使用，即将整个文件作为插件传递给vite.config.js中的plugins配置项，以使得上述页面处理方法被执行。

可以看出，本申请实施例的页面处理方法，适用于Vue3和Vite4下的引入组件库的首次渲染优化，具体包括：在基于Vue3搭配Vite4和Ant Design Vue的前端框架中，对AntDesign Vue组件库的样式文件和组件代码进行分开打包、压缩、预构建优化。由于AntDesign Vue组件库的样式文件被提前存储至浏览器中，使得浏览器在首次加载网页时，可以直接从其目标区域中获取样式文件来进行页面加载与渲染，无需再去编译和处理AntDesign Vue组件库中的所有样式文件，这样，不仅可以提高浏览器的首次页面加载速度，减少首次渲染时间，而且实现方案简单高效、不易出错。

第三方面，本申请实施例提供一种页面处理装置，所述装置部署于服务端，所述服务端上运行有构建工具Vite；所述构建工具Vite中包括目标插件。如图9所示，页面处理装置90包括：获取单元901、调用单元902、预存储单元903。其中：

获取单元901，用于通过所述目标插件获取目标路径文件中的Q个目标路径信息；所述目标路径信息用于指向预加载样式文件；所述Q大于或等于1。

调用单元902，用于通过所述目标插件基于所述Q个目标路径信息，对目标组件库中的预加载样式文件进行调用，得到P个预加载样式文件；所述P大于或等于所述Q。

预存储单元903，用于通过所述目标插件将所述P个预加载样式文件存储至客户端的浏览器中的目标区域，以使所述浏览器基于所述目标区域中的所述P个预加载样式文件对所述目标页面进行加载与渲染。

在一些实施例中，所述页面处理装置90还包括处理单元904，其中：

所述获取单元901还用于：通过所述目标插件获取第一路径文件；所述第一路径文件存储有N个第一路径信息，一个所述第一路径信息用于指向第一组件库中的一个第一样式文件；所述N大于或等于1；通过所述目标插件获取第二路径文件；所述第二路径文件存储有M个第二路径信息，一个所述第二路径信息用于指向第二组件库中的一个第二样式文件；所述M大于或等于1；

所述处理单元904，用于通过所述目标插件对所述第一路径文件和所述第二路径文件进行处理，得到所述目标路径文件。

在一些实施例中，所述处理单元904具体用于：对所述第一路径文件包括的所述N个第一路径信息，和所述第二路径文件包括的所述M个第二路径信息取并集，得到所述Q个目标路径信息；确定所述目标路径文件包括所述Q个目标路径信息。

在一些实施例中，所述获取单元901还用于：通过所述目标插件中的第一函数读取所述第一组件库中的所有文件夹；通过所述目标插件中的第二函数遍历所述所有文件夹；针对所述所有文件夹中的每个所述文件夹，执行以下处理：通过所述目标插件中的第三函数判断所述文件夹的名称是否包含目标字符串；所述目标字符串用于表征所述文件夹中存储有所述第一样式文件；在所述文件夹的名称包括所述目标字符串的情况下，通过所述目标插件中的第四函数获取所述文件夹的路径信息，作为一个所述第一路径信息；通过所述目标插件中的第五函数将所述一个第一路径信息存储至所述第一路径文件。

在一些实施例中，在所述第二组件库包括所述构建工具Vite的组件库的情况下，所述获取单元901还用于：通过所述目标插件中的第六函数确认所述构建工具Vite的配置信息；通过所述目标插件中的第七函数读取所述配置信息，并获取所述配置信息中的所述M个第二路径信息；通过所述目标插件中的第八函数将所述M个第二路径信息存储至所述第二路径文件。

在一些实施例中，所述预存储单元903具体用于：将所述P个预加载样式文件中的每个所述预加载样式文件进行打包，得到P个压缩包；将所述P个压缩包存储至所述目标区域；或者，将N个第一样式文件中的每个第一样式文件进行打包，得到所述第一组件库的N个压缩包；将M个第二样式文件中的每个第二样式文件进行打包，得到所述第二组件库的M个压缩包；将所述N个压缩包和M个压缩包存储至所述目标区域。

第四方面，本申请实施例提供了又一种页面处理装置，所述装置部署于客户端，所述客户端的浏览器中的目标区域存储有P个预加载样式文件。如图10所示，页面处理装置10包括：确定单元1001、渲染单元1002。其中：

确定单元1001，用于在接收到目标页面的加载指令的情况下，从所述目标区域中存储的所述P个预加载样式文件中，确定与所述加载指令对应的R个目标预加载样式文件；

渲染单元1002，用于至少基于所述R个目标预加载样式文件，加载并渲染所述目标页面。

第五方面，本申请实施例提供一种电子设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实施例中提供的页面处理方法中的步骤。

下面结合图11所示的电子设备110，对电子设备的结构图进行说明。

在一示例中，如图11所示，所述电子设备110包括：一个处理器1101、至少一个通信总线1102、至少一个外部通信接口1103和存储器1104。其中，通信总线1102配置为实现这些组件之间的连接通信。其中，外部通信接口1103可以包括标准的有线接口和无线接口。

存储器1104配置为存储由处理器1101可执行的指令和应用，还可以缓存待处理器1101以及电子设备中各模块待处理或已经处理的数据(例如，报文数据、图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机访问存储器(Random Access Memory，RAM)实现。

第六方面，本申请实施例提供一种存储介质，也就是计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中提供的页面处理方法中的步骤。

这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请存储介质和设备实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。

应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一些实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Re ad Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。

或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。