CN112925573A - 网页加载的方法、装置、设备和计算机可读介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页加载的方法、装置、设备和计算机可读介质。

背景技术

随着互联网的不断发展，万维网(Web)页面变得越来越重要，负责Web页面开发的前端工作者也将更多的精力放在关注如何提高工作效率以及页面性能上。

在前端不断的发展过程中，各种技术栈所对应的社区变得越来越繁荣，为了减少开发者的工作，社区中不乏优秀的组件库出现，例如antd、elementui等优秀的组件库，极大的提高了前端开发者的工作效率。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

在网页加载组件的过程中，需将组件库提供所有组件一次性加载到网页中，导致网页加载速度较慢。

发明内容

有鉴于此，本发明实施例提供一种网页加载的方法、装置、设备和计算机可读介质，由于无需将第一组件库提供所有组件全部加入到网页中，因此能够提高网络加载速度。

为实现上述目的，根据本发明实施例的一个方面，提供了一种网页加载的方法，包括：

配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；

建立所述模块打包器的文件依赖树；

遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；

将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。

所述建立所述模块打包器的文件依赖树，包括：

从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树。

所述从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树，包括：

从所述模块打包器的多个入口文件开始，依次查找所述入口文件所依赖的文件；

建立所述模块打包器的多个文件依赖树。

所述遍历所述文件依赖树的所有文件，包括：

使用所述模块打包器中配置的打包方案，依次处理所述文件依赖树的文件。

所述文件依赖树的文件的格式包括sass文件、css文件和babel文件中的一种或多种。

所述将所述所有文件压缩后生成浏览器可识别的文件，包括：

使用uglifyjs，将所述所有文件压缩后生成浏览器可识别的文件。

所述可识别的文件的格式是css文件或js文件。

根据本发明实施例的第二方面，提供了一种网页加载的装置，包括：

配置模块，用于配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；

建立模块，用于建立所述模块打包器的文件依赖树；

遍历模块，用于遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；

压缩模块，用于将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。

根据本发明实施例的第三方面，提供了一种网页加载的电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述的方法。

根据本发明实施例的第四方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述的方法。

上述发明中的一个实施例具有如下优点或有益效果：因为配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称；建立模块打包器的文件依赖树；遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段；将所有文件压缩后生成浏览器可识别的文件，可识别的文件供浏览器加载上述第二组件库中的组件。由于无需将第一组件库提供所有组件全部加入到网页中，只需要加载第二组件库中的组件，因此能够提高网络加载速度。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的网页加载的方法的主要流程的示意图；

图2是根据本发明实施例的网页加载图标的流程示意图；

图3是根据本发明实施例的网页加载的装置的主要结构的示意图；

图4是本发明实施例可以应用于其中的示例性系统架构图；

图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

优秀的组件库如antd和elementui等，在一定程度上存在一定的缺陷。

作为一个示例，在网页中正常使用import的方式引入图标。其中图标属于组件。可以使用import{Icon}form“组件库”，在需要引入的地方使用代码插入：<Icon type＝”window”/>，这样在网页中即可显示出窗口图标。

组件库需要将提供的所有组件一次性加载到网页中，导致网页加载速度较慢，进而在一定程度上降低了页面的性能。

为了解决网页加载速度较慢的技术问题，可以采用以下本发明实施例中的技术方案。

参见图1，图1是根据本发明实施例的网页加载的方法主要流程的示意图，以预设字段替换第一组件库的名称的字段，这样浏览器无需加载第一组件库中所有的组件，仅需要加载第二组件库中的组件。如图1所示，具体包括以下步骤：

S101、配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称，第二组件库包括第一组件库的部分组件。

前端开发者在开发过程中，为了提高工作效率同时降低每次开发可能带来的bug率的提高，经常会使用一些社区比较出名的组件库。作为一个示例，前端开发者经常使用ant design以及elementui。在本发明实施例中，可以将ant design或elementui，作为第一组件库。

在本发明实施例中，第一组件库中包括多个组件。与第一组件库相对应的是第二组件库，第二组件库中包括一个或多个组件。可以理解的是，第二组件库包括部分第一组件库中的组件。示例性的，组件可以包括以下的一种或多种：图标、css文件和js文件。

作为一个示例，第一组件库中包括组件1、组件2、组件3、组件4和组件5。第二组件库中包括组件1、组件2和组件3。即，第二组件库中的组件均属于第一组件库。

在本发明的一个实施例中，可以预先设置第二组件库。新建一个文件夹作为第二组件库。第二组件库可以存放于根目录下。在第二组件库中导入网页加载涉及的组件，其中组件具体可以窗口图标。窗口图标export{default as window}from“第一组件库”，即：窗口图标来源于第一组件库。第一组件库和第二组件库均可以是js文件。

模块打包器(webpack)是代码编译工具，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。

为了能够减少网页加载所涉及的组件，可以配置webpack的预设字段，预设字段包括第一组件库的名称和第二组件库的名称。

作为一个示例，配置webpack中的alias字段，设置alias＝[[‘第一组件库’]，‘第二组件库’]。

该配置的含义为：当加载组件库时，并不是加载第一组件库，而是加载第二组件库。可以理解的是，并不是从第一组件库中引入所有的组件，而是只引入所需要的组件，即引入第二组件库中的组件。

S102、建立模块打包器的文件依赖树。

依赖文件是用于输入从而产生目标的文件，一个目标通常涉及几个依赖文件。由多个相互依赖的依赖文件，可以构成文件依赖树。

在本发明实施例中，需要建立webpack的文件依赖树。具体来说，webpack编译开始，webpack查找配置中的入口文件。可以从webpack的入口文件开始，依次查找入口文件所依赖的文件，建立webpack的文件依赖树。

入口文件即webpack运行过程中查找的第一个文件，即webpack在运行时，先从第一个文件开始依次寻找依赖关系，上述第一个文件就是入口文件。从入口文件开始，依次查找入口文件所依赖的文件，以及依赖的文件所依赖的文件，最后建立webpack的文件依赖树。

此外，为webpack配置的插件注册钩子函数，注册钩子函数的意义为在webpack运行过程中，为插件寻找合适的时机介入，为插件服务。注册第二组件库的名称，为后续遍历文件依赖树做准备。

在本发明的一个实施例中，入口文件可以是一个，也可以是多个。

在入口文件是一个的情况下，从一个入口文件开始，依次查找该入口文件所依赖的文件，以及依赖的文件所依赖的文件，最后形成一个文件依赖树。

在入口文件是多个的情况下，从多个入口文件开始，依次查找每个入口文件所依赖的文件，以及依赖的文件所依赖的文件，最后形成多个文件依赖树。作为一个示例，一个入口文件对应一个文件依赖树。其中，可以按照配置划分，多个依赖树存放于一个文件中，或多个文件中。

S103、遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段。

建立文件依赖树的目的在于，获知所有从输入到产生目标涉及的文件。上述涉及的文件中包括有第一组件库名称的字段，这样在加载网页的过程中，能够加载第一组件库中所有的组件。然后，由于需要加载第一组件库中所有的组件，导致网页加载速度较慢，进而降低了页面的性能。

在本发明实施例中，第二组件库包括第一组件库中的一个或多个组件，而且第二组件库中的组件是加载网页所需的组件。那么，加载第二组件库的组件，就可以无需加载第一组件库中所有的组件，并且不影响网页的正常加载。因此，可以以预设字段替换原始字段。

具体来说，遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段，这样文件依赖树的所有文件加载组件库并非是之前的第一组件库，而是第二组件库。

在本发明的一个实施例中，可以使用webpack中配置的打包方案(loader)，依次处理文件依赖树的文件。loader用于对源代码进行转换。

在webpack中，由于文件依赖树的文件格式不同，则需要针对不同的文件格式配置对应的loader。在本发明实施例中，文件依赖树的文件的格式包括以下的一种或多种：sass文件、css文件和babel文件。

那么，可以针对文件依赖树的文件的格式，使用webpack中与之相对应的laoder依次处理文件。

作为一个示例，在遍历依赖树中所有文件的过程中，使用sass-loader处理sass文件；使用css-loader处理css文件；使用babel-loader将es6文件转为es5文件。

可以理解的是，对于依赖树中每个文件，均有对应的laoder，以处理该文件。

此外，在遍历依赖树中所有文件的过程中，插件也会介入。已注册的钩子函数为插件寻找合适的时机介入，为插件服务。作为一个示例，使用commonchunkplugin插件，可以根据预设配置将公共文件提取，以缓存文件。作为另一个示例，使用htmlwebpackplugin将css文件和js文件的引用，插入到html文件中。

S104、将所有文件压缩后生成浏览器可识别的文件，可识别的文件供浏览器加载第二组件库中的组件。

遍历文件依赖树的所有文件之后，为了便于浏览器加载网页，可以将所有文件压缩，以生成浏览器可识别的文件。

作为一个示例，使用uglifyjs，将所有文件压缩后生成浏览器可识别的文件。uglifyjs是用来压缩混淆JS文件，同时会对代码尽可能的优化，使得最后输出的js代码文件非常小。

在本发明的一个实施例中，可识别的文件的格式是css文件或js文件。可以理解的是，使用uglifyjs，将所有文件压缩后，输出浏览器可识别的文件的格式是css文件或js文件。

将css文件或js文件部署到服务器，浏览器可通过访问服务器访问网页。加载第二组件库后，在网页中即可看到第二组件库中的组件。

本发明实施例中的技术方案主要应用于浏览器。浏览器是用来显示在万维网或局域网等内的文字、图像及其他信息的软件，它还可以让用户与这些文件进行交互操作。浏览器是电脑上网时经常使用到的应用软件。

用户通过浏览器可以加载网页。在多个平台中，如：windows、mac、Linux、Android、IOS均有浏览器。因此，本发明的实施例可以在上述系统中运行。

在上述实施例中，配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称；建立模块打包器的文件依赖树；遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段；将所有文件压缩后生成浏览器可识别的文件，可识别的文件供浏览器加载上述第二组件库中的组件。

上述第二组件库包括加载网页所需的组件，按需加载的方式加快了文件编译及打包的速度，不仅解决了前端开发者因使用几个组件而引入几十个组件的难题，也避免了网页加载的多余内容带来bug的可能性。

由于无需将第一组件库提供所有组件全部加入到网页中，只需要加载指定第二组件库中的组件，因此能够提高网络加载速度。

另外，采用本发明实施例中的技术方案，由于减少加载网页数据，进而提高网页展示速度，降低用户白屏的等待时间，一定程度上提高了用户体验。

参见图2，图2是根据本发明实施例的网页加载图标的流程示意图。图3中具体以组件为图标为例，示例性说明本发明实施例中的技术方案。

S201、建立第二组件库。

由于在加载网页的过程中，不需要加载第一组件库中的全部图标。因此，建立第二组件库。第二组件库中包括的图标属于第一组件库。可以理解的是，第二组件库是第一组件库的一部分，第二组件库中的图标是加载网页所需的图标。第一组件库和第二组件库均可以是js文件。

S202、webpack中配置预设字段。

在webpack中配置预设字段，预设字段包括第一组件库的名称和第二组件库的名称。

S203、webpack查找入口文件。

webpack查找配置中的入口文件，以建立文件依赖树。

S204、注册插件的钩子函数。

注册插件的钩子函数，为在webpack运行过程中，为插件寻找合适的时机介入。

S205、注册第二组件库。

注册第二组件库的名称，为后续遍历文件依赖树做准备。

S206、通过入口文件，建立依赖树。

从入口文件开始，依次查找入口文件所依赖的文件，以及依赖的文件所依赖的文件，最后建立webpack的文件依赖树。

S207、遍历依赖树，处理各种格式的文件。

遍历文件依赖树的所有文件，处理各种样式的文件，由预设字段替换原始字段。

S208、压缩文件，供加载网页使用。

处理依赖树各种格式的文件和插件介入之后，压缩文件得到css文件或js文件。可以将css文件或js文件部署到服务器，浏览器可通过访问服务器访问网页。加载第二组件库后，在网页中即可看到第二组件库中的图标。

图3是根据本发明实施例的网页加载的装置的主要结构的示意图。网页加载的装置可以实现网页加载的方法，如图3所示，网页加载的装置具体包括：

配置模块301，用于配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称，第二组件库包括第一组件库的部分组件。

建立模块302，用于建立模块打包器的文件依赖树。

遍历模块303，用于遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段。

压缩模块304，用于将所有文件压缩后生成浏览器可识别的文件，可识别的文件供浏览器加载第二组件库中的组件。

在本发明的一个实施例中，建立模块302，具体用于从模块打包器的入口文件开始，依次查找入口文件所依赖的文件，建立模块打包器的文件依赖树。

在本发明的一个实施例中，建立模块302，具体用于从模块打包器的多个入口文件开始，依次查找入口文件所依赖的文件；建立模块打包器的多个文件依赖树。

在本发明的一个实施例中，遍历模块303，具体用于使用模块打包器中配置的打包方案，依次处理文件依赖树的文件。

在本发明的一个实施例中，文件依赖树的文件的格式包括sass文件、css文件和babel文件中的一种或多种：。

在本发明的一个实施例中，压缩模块304，具体用于使用uglifyjs，将所有文件压缩后生成浏览器可识别的文件。

在本发明的一个实施例中，可识别的文件的格式是css文件或js文件。

图4示出了可以应用本发明实施例的网页加载的方法或网页加载的装置的示例性系统架构400。

如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的网页加载的方法一般由服务器405执行，相应地，网页加载的装置一般设置于服务器405中。

应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图5，其示出了适于用来实现本发明实施例的终端设备的计算机系统500的结构示意图。图5示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括发送单元、获取单元、确定单元和第一处理单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，发送单元还可以被描述为“向所连接的服务端发送图片获取请求的单元”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：

配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；

建立所述模块打包器的文件依赖树；

遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；

将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。

根据本发明实施例的技术方案，因为配置模块打包器的预设字段，字段包括第一组件库的名称和第二组件库的名称；建立模块打包器的文件依赖树；遍历文件依赖树的所有文件，并由预设字段替换原始字段，原始字段是所有文件中加载第一组件库的名称的字段；将所有文件压缩后生成浏览器可识别的文件，可识别的文件供浏览器加载上述第二组件库中的组件。由于无需将第一组件库提供所有组件全部加入到网页中，只需要加载第二组件库中的组件，因此能够提高网络加载速度。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种网页加载的方法，其特征在于，包括：

配置模块打包器的预设字段，所述预设字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；

建立所述模块打包器的文件依赖树；

遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；

将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。

2.根据权利要求1所述网页加载的方法，其特征在于，所述建立所述模块打包器的文件依赖树，包括：

从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树。

3.根据权利要求2所述网页加载的方法，其特征在于，所述从所述模块打包器的入口文件开始，依次查找所述入口文件所依赖的文件，建立所述模块打包器的文件依赖树，包括：

从所述模块打包器的多个入口文件开始，依次查找所述入口文件所依赖的文件；

建立所述模块打包器的多个文件依赖树。

4.根据权利要求1所述网页加载的方法，其特征在于，所述遍历所述文件依赖树的所有文件，包括：

使用所述模块打包器中配置的打包方案，依次处理所述文件依赖树的文件。

5.根据权利要求4所述网页加载的方法，其特征在于，所述文件依赖树的文件的格式包括sass文件、css文件和babel文件中的一种或多种。

6.根据权利要求1所述网页加载的方法，其特征在于，所述将所述所有文件压缩后生成浏览器可识别的文件，包括：

使用uglifyjs，将所述所有文件压缩后生成浏览器可识别的文件。

7.根据权利要求1所述网页加载的方法，其特征在于，所述可识别的文件的格式是css文件或js文件。

8.一种网页加载的装置，其特征在于，包括：

配置模块，用于配置模块打包器的预设字段，所述字段包括第一组件库的名称和第二组件库的名称，所述第二组件库包括所述第一组件库的部分组件；

建立模块，用于建立所述模块打包器的文件依赖树；

遍历模块，用于遍历所述文件依赖树的所有文件，并由所述预设字段替换原始字段，所述原始字段是所述所有文件中加载所述第一组件库的名称的字段；

压缩模块，用于将所述所有文件压缩后生成浏览器可识别的文件，所述可识别的文件供浏览器加载所述第二组件库中的组件。

9.一种网页加载的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的方法。

10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。

Images