网页加载的方法、装置、设备和计算机可读介质制造方法及图纸

本发明专利技术公开了网页加载的方法、装置、设备和计算机可读介质，涉及计算机技术领域。该方法的一具体实施方式包括：配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；建立所述模块打包器的文件依赖树；遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段包括所述所有文件中加载所述第一组件库的名称的字段；将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。该实施方式由于无需将组件库提供所有组件全部加入到网页中，因此能够提高网络加载速度。网络加载速度。网络加载速度。

【技术实现步骤摘要】
网页加载的方法、装置、设备和计算机可读介质


[0001]本专利技术涉及计算机
，尤其涉及一种网页加载的方法、装置、设备和计算机可读介质。

技术介绍

[0002]随着互联网的不断发展，万维网(Web)页面变得越来越重要，负责Web页面开发的前端工作者也将更多的精力放在关注如何提高工作效率以及页面性能上。
[0003]在前端不断的发展过程中，各种技术栈所对应的社区变得越来越繁荣，为了减少开发者的工作，社区中不乏优秀的组件库出现，例如antd、elementui等优秀的组件库，极大的提高了前端开发者的工作效率。
[0004]在实现本专利技术过程中，专利技术人发现现有技术中至少存在如下问题：
[0005]在网页加载组件的过程中，需将组件库提供所有组件一次性加载到网页中，导致网页加载速度较慢。

技术实现思路

[0006]有鉴于此，本专利技术实施例提供一种网页加载的方法、装置、设备和计算机可读介质，由于无需将第一组件库提供所有组件全部加入到网页中，因此能够提高网络加载速度。
[0007]为实现上述目的，根据本专利技术实施例的一个方面，提供了一种网页加载的方法，包括：
[0008]配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；
[0009]建立所述模块打包器的文件依赖树；
[0010]遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；
[0011]将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。
[0012]所述建立所述模块打包器的文件依赖树，包括：
[0013]从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树。
[0014]所述从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树，包括：
[0015]从所述模块打包器的多个入口文件开始，依次查找所述入口文件所依赖的文件；
[0016]建立所述模块打包器的多个文件依赖树。
[0017]所述遍历所述文件依赖树的所有文件，包括：
[0018]使用所述模块打包器中配置的打包方案，依次处理所述文件依赖树的文件。
[0019]所述文件依赖树的文件的格式包括sass文件、css文件和babel文件中的一种或多
种。
[0020]所述将所述所有文件压缩后生成浏览器可识别的文件，包括：
[0021]使用uglifyjs，将所述所有文件压缩后生成浏览器可识别的文件。
[0022]所述可识别的文件的格式是css文件或js文件。
[0023]根据本专利技术实施例的第二方面，提供了一种网页加载的装置，包括：
[0024]配置模块，用于配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；
[0025]建立模块，用于建立所述模块打包器的文件依赖树；
[0026]遍历模块，用于遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；
[0027]压缩模块，用于将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。
[0028]根据本专利技术实施例的第三方面，提供了一种网页加载的电子设备，包括：
[0029]一个或多个处理器；
[0030]存储装置，用于存储一个或多个程序，
[0031]当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述的方法。
[0032]根据本专利技术实施例的第四方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述的方法。
[0033]上述专利技术中的一个实施例具有如下优点或有益效果：因为配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称；建立模块打包器的文件依赖树；遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段；将所有文件压缩后生成浏览器可识别的文件，可识别的文件供浏览器加载上述第二组件库中的组件。由于无需将第一组件库提供所有组件全部加入到网页中，只需要加载第二组件库中的组件，因此能够提高网络加载速度。
[0034]上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
[0035]附图用于更好地理解本专利技术，不构成对本专利技术的不当限定。其中：
[0036]图1是根据本专利技术实施例的网页加载的方法的主要流程的示意图；
[0037]图2是根据本专利技术实施例的网页加载图标的流程示意图；
[0038]图3是根据本专利技术实施例的网页加载的装置的主要结构的示意图；
[0039]图4是本专利技术实施例可以应用于其中的示例性系统架构图；
[0040]图5是适于用来实现本专利技术实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
[0041]以下结合附图对本专利技术的示范性实施例做出说明，其中包括本专利技术实施例的各种
细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本专利技术的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
[0042]优秀的组件库如antd和elementui等，在一定程度上存在一定的缺陷。
[0043]作为一个示例，在网页中正常使用import的方式引入图标。其中图标属于组件。可以使用import{Icon}form“组件库”，在需要引入的地方使用代码插入：<Icon type＝”window”/>，这样在网页中即可显示出窗口图标。
[0044]组件库需要将提供的所有组件一次性加载到网页中，导致网页加载速度较慢，进而在一定程度上降低了页面的性能。
[0045]为了解决网页加载速度较慢的技术问题，可以采用以下本专利技术实施例中的技术方案。
[0046]参见图1，图1是根据本专利技术实施例的网页加载的方法主要流程的示意图，以预设字段替换第一组件库的名称的字段，这样浏览器无需加载第一组件库中所有的组件，仅需要加载第二组件库中的组件。如图1所示，具体包括以下步骤：
[0047]S101、配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称，第二组件库包括第一组件库的部分组件。
[0048]前端开发者在开发过程中，为了提高工作效率同时降低每次开发可能带来的bug率的提高，经常会使用一些社区比较出名的组件库。作为一本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页加载的方法，其特征在于，包括：配置模块打包器的预设字段，所述预设字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；建立所述模块打包器的文件依赖树；遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。2.根据权利要求1所述网页加载的方法，其特征在于，所述建立所述模块打包器的文件依赖树，包括：从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树。3.根据权利要求2所述网页加载的方法，其特征在于，所述从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树，包括：从所述模块打包器的多个入口文件开始，依次查找所述入口文件所依赖的文件；建立所述模块打包器的多个文件依赖树。4.根据权利要求1所述网页加载的方法，其特征在于，所述遍历所述文件依赖树的所有文件，包括：使用所述模块打包器中配置的打包方案，依次处理所述文件依赖树的文件。5.根据权利要求4所述网页加载的方法，其特征在于，所述文件依赖树的文件的格式包括sass文件、css...

【专利技术属性】
技术研发人员：单开元，康建云，
申请(专利权)人：北京京东世纪贸易有限公司，
类型：发明
国别省市：