基于webpack的页面组件加载方法、装置、电子设备及存储介质与流程

1.本技术涉及计算机领域，具体而言，涉及一种基于webpack的页面组件加载方法、装置、电子设备及存储介质。

背景技术：

2.目前，现有页面组件化技术方案多是采用引入组件加载器，当客户访问页面时，借助组件加载器的能力动态获取组件脚本和样式文件，然后插入到当前页面中。这种方案的确实现了动态可配置，但同时也牺牲了页面效率和客户体验。动态加载样式和脚本，导致加载的时机比较滞后，客户访问页面后页面长时间空白无内容，同时，当配置组件比较多时，页面会出现闪动现象。这些种种不足将极大降低客户满意度。

技术实现要素：

3.本技术实施例的目的在于提供一种基于webpack的页面组件加载方法、装置、电子设备及存储介质，用于克服以上技术缺陷之一，其中，本技术至少能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。
4.本技术第一方面公开一种基于webpack的页面组件加载方法，所述方法包括：
5.在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得所述后台配置系统接收到所述ajax请求时，基于所述ajax请求携带的目标页面的id返回组件信息；
6.解析所述组件信息并得到解析结果，其中，所述解析结果至少包括两个或两个以上的目标组件的解析信息；
7.获取每个所述目标组件的域名；
8.基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的所述目标组件的资源链接；
9.基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件；
10.获取预加载信息和位置信息；
11.基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件。
12.在本技术第一方面中，在目标页面的构建编译阶段，通过向后台配置系统发送ajax请求，能够使所述后台配置系统基于所述ajax请求携带的目标页面的id返回组件信息，进而能够解析所述组件信息并得到至少一个目标组件的解析信息，同时，通过获取每个所述目标组件的域名，进而能够基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，进而基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件和预加载信息和位置信息，能够基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件，最终实现在目标页面的构建编译阶段，就将
目标页面的组件插入到目标页面中的原始文件中，从而提取加载页面资源、提高页面加载效率。
13.另一方面，由于组件资源链接包括两个或两个以上的所述目标组件的资源链接，因此，一次ajax请求能够获取两个目标组件的资源链接，进而能够减少页面资源请求次数，从而降低页面闪动，其中，每产生一次页面资源请求，目标页面为加载最新返回的资源，会刷新一次，进而如果页面资源请求次数过大，目标页面会频繁闪动，而如果减少页面资源请求次数，就能够降低页面闪动的次数。
14.在本技术第一方面中，作为一种可选的实施方式，所述组件资源链接包括样式文件资源链接和脚本资源链接；
15.以及，所述基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件，包括：
16.基于所述预加载信息和所述位置信息将所述样式文件资源链接与所述目标页面的原始文件中的link标签绑定；
17.基于所述预加载信息和所述位置信息将所述脚本资源链接与所述目标页面的原始文件中的script标签绑定。
18.在本可选的实施方式中，基于所述预加载信息和所述位置信息能够将所述样式文件资源链接与所述目标页面的原始文件中的link标签绑定，另一方面，基于所述预加载信息和所述位置信息能够将所述脚本资源链接与所述目标页面的原始文件中的script标签绑定。
19.在本技术第一方面中，作为一种可选的实施方式，所述解析所述组件信息并得到解析结果，包括：
20.轮询所述组件信息，并得到每个所述目标组件的解析信息，所述目标组件的解析信息包括所述目标组件的组件空间和所述目标组件的组件名称。
21.在本可选的实施方式中，通过轮询所述组件信息，能够得到每个所述目标组件的解析信息。
22.在本技术第一方面中，作为一种可选的实施方式，所述基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件，包括：
23.基于所述webpack的compiler.plugin钩子函数监听在所述目标页面的编译阶段中的emit事件，以得到所述目标页面的原始文件。
24.在本可选的实施方式中，基于所述webpack的compiler.plugin钩子函数监听在所述目标页面的编译阶段中的emit事件，能够获取所述目标页面的原始文件。
25.本技术第二方面公开一种基于webpack的页面组件加载装置，所述装置包括：
26.发送模块，用于在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得所述后台配置系统接收到所述ajax请求时，基于所述ajax请求携带的目标页面的id返回组件信息；
27.解析模块，用于解析所述组件信息并得到解析结果，其中，所述解析结果至少包括两个或两个以上的目标组件的解析信息；
28.第一获取模块，用于获取每个所述目标组件的域名；
29.生成模块，用于基于每个所述目标组件的解析信息和每个所述目标组件的域名生
成组件资源链接，其中，组件资源链接包括两个或两个以上的所述目标组件的资源链接；
30.第二获取模块，用于基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件；
31.第三获取模块，用于获取预加载信息和位置信息；
32.加载模块，用于基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件。
33.在本技术第二方面中，在目标页面的构建编译阶段，通过向后台配置系统发送ajax请求，能够使所述后台配置系统基于所述ajax请求携带的目标页面的id返回组件信息，进而能够解析所述组件信息并得到至少一个目标组件的解析信息，同时，通过获取每个所述目标组件的域名，进而能够基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，进而基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件和预加载信息和位置信息，能够基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件，最终实现在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而提取加载页面资源、提高页面加载效率。
34.另一方面，由于组件资源链接包括两个或两个以上的所述目标组件的资源链接，因此，一次ajax请求能够获取两个目标组件的资源链接，进而能够减少页面资源请求次数，从而降低页面闪动，其中，每产生一次页面资源请求，目标页面为加载最新返回的资源，会刷新一次，进而如果页面资源请求次数过大，目标页面会频繁闪动，而如果减少页面资源请求次数，就能够降低页面闪动的次数。
35.在本技术第二方面中，作为一种可选的实施方式，所述组件资源链接包括样式文件资源链接和脚本资源链接；
36.以及，所述加载模块，包括：
37.第一绑定子模块，用于基于所述预加载信息和所述位置信息将所述样式文件资源链接与所述目标页面的原始文件中的link标签绑定；
38.第二绑定子模块，用于基于所述预加载信息和所述位置信息将所述脚本资源链接与所述目标页面的原始文件中的script标签绑定。
39.在本可选的实施方式中，基于第一绑定子模块和第二绑定子模块，能够基于所述预加载信息和所述位置信息将所述样式文件资源链接与所述目标页面的原始文件中的link标签绑定，和基于所述预加载信息和所述位置信息将所述脚本资源链接与所述目标页面的原始文件中的script标签绑定。
40.在本技术第二方面中，作为一种可选的实施方式，所述解析模块执行解析所述组件信息并得到解析结果的方式具体为：
41.轮询所述组件信息，并得到每个所述目标组件的解析信息，所述目标组件的解析信息包括所述目标组件的组件空间和所述目标组件的组件名称。
42.在本可选的实施方式中，通过轮询所述组件信息，能够得到每个所述目标组件的解析信息。
43.在本技术第二方面中，作为一种可选的实施方式，所述第二获取模块执行基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件的具体方式为：
44.基于所述webpack的compiler.plugin钩子函数监听在所述目标页面的编译阶段中的emit事件，以得到所述目标页面的原始文件。
45.在本可选的实施方式中，基于所述webpack的compiler.plugin钩子函数监听在所述目标页面的编译阶段中的emit事件，能够获取所述目标页面的原始文件。
46.本技术第三方面公开一种电子设备，其包括：
47.处理器；以及
48.存储器，配置用于存储机器可读指令，所述指令在由所述处理器执行时，执行本技术第一方面的基于webpack的页面组件加载方法。
49.本技术的电子设备通过执行本技术的页面组件加载方法，至少能能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。
50.本技术第四方公开一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行本技术第一方面公开的基于webpack的页面组件加载方法。
51.本技术的存储介质通过执行本技术的页面组件加载方法，至少能能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。
附图说明
52.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
53.图1是本技术实施例公开的一种基于webpack的页面组件加载方法的流程示意图；
54.图2是本技术实施例公开的一种基于webpack的页面组件加载装置的结构示意图；
55.图3是本技术实施例公开的一种电子设备的结构示意图。
具体实施方式
56.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行描述。
57.实施例一
58.请参阅图1，图1是本技术实施例公开的一种基于webpack的页面组件加载方法的流程示意图，如图1所示，本技术实施例的方法包括以下步骤：
59.101、在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得后台配置系统接收到ajax请求时，基于ajax请求携带的目标页面的id返回组件信息；
60.102、解析组件信息并得到解析结果，其中，解析结果至少包括两个或两个以上的目标组件的解析信息；
61.103、获取每个目标组件的域名；
62.104、基于每个目标组件的解析信息和每个目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的目标组件的资源链接；
63.105、基于webpack在目标页面的编译阶段，获取目标页面的原始文件；
64.106、获取预加载信息和位置信息；
65.107、基于预加载信息和位置信息将组件资源链接插入到目标页面的原始文件。
66.在本技术实施例中，在目标页面的构建编译阶段，通过向后台配置系统发送ajax请求，能够使后台配置系统基于ajax请求携带的目标页面的id返回组件信息，进而能够解析组件信息并得到至少一个目标组件的解析信息，同时，通过获取每个目标组件的域名，进而能够基于每个目标组件的解析信息和每个目标组件的域名生成组件资源链接，进而基于webpack在目标页面的编译阶段，获取目标页面的原始文件和预加载信息和位置信息，能够基于预加载信息和位置信息将组件资源链接插入到目标页面的原始文件，最终实现在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而提取加载页面资源、提高页面加载效率。
67.另一方面，由于组件资源链接包括两个或两个以上的目标组件的资源链接，因此，一次ajax请求能够获取两个目标组件的资源链接，进而能够减少页面资源请求次数，从而降低页面闪动，其中，每产生一次页面资源请求，目标页面为加载最新返回的资源，会刷新一次，进而如果页面资源请求次数过大，目标页面会频繁闪动，而如果减少页面资源请求次数，就能够降低页面闪动的次数。
68.在本技术实施例中，目标页面的生命周期包括构建编译阶段和运行阶段，其中，目标页面在运行阶段的特征为目标页面的原始文件已展示在屏幕上，基于此，本技术实施例是在运行阶段之前的构建编译阶段加载目标页面的目标组件，这样一来，就能够提前加载目标组件。
69.在本技术实施例中，针对步骤101，ajax请求是一种异步请求，因此，终端可通过异步的方获取后台配置系统返回目标页面的id。
70.在本技术实施例中，针对步骤101，后台配置系统预先存储有组件信息，其中，组件信息与目标页面的id绑定，因此，后台配置系统能够在接收到ajax请求，查询到目标页面的id对应的组件信息，并返回目标页面的id对应的组件信息。
71.在本技术实施例中，针对步骤102，解析结果至少包括两个或两个以上的目标组件的解析信息是解析结果包括了两个或两个以上目标组件的组件名称等信息。
72.在本技术实施例中，针对步骤103，目标组件的域名可以基于目标组件的使用环境参数得到。
73.在本技术实施例中，作为一种可选的实施方式，组件资源链接包括样式文件资源链接和脚本资源链接，相应地，步骤：基于预加载信息和位置信息将组件资源链接插入到目标页面的原始文件，包括以下子步骤：
74.基于预加载信息和位置信息将样式文件资源链接与目标页面的原始文件中的link标签绑定；
75.基于预加载信息和位置信息将脚本资源链接与目标页面的原始文件中的script标签绑定。
76.在本可选的实施方式中，基于预加载信息和位置信息能够将样式文件资源链接与目标页面的原始文件中的link标签绑定，另一方面，基于预加载信息和位置信息能够将脚本资源链接与目标页面的原始文件中的script标签绑定。
77.在本技术实施例中，作为一种可选的实施方式，解析组件信息并得到解析结果，包
括以下子步骤：
78.轮询组件信息，并得到每个目标组件的解析信息，目标组件的解析信息包括目标组件的组件空间和目标组件的组件名称。
79.在本可选的实施方式中，通过轮询组件信息，能够得到每个目标组件的解析信息。
80.在本技术实施例中，作为一种可选的实施方式，步骤：基于webpack在目标页面的编译阶段，获取目标页面的原始文件，包括以下子步骤：
81.基于webpack的compiler.plugin钩子函数监听在目标页面的编译阶段中的emit事件，以得到目标页面的原始文件。
82.在本可选的实施方式中，基于webpack的compiler.plugin钩子函数监听在目标页面的编译阶段中的emit事件，能够获取目标页面的原始文件。
83.实施例二
84.请参阅图2，图2是本技术实施例公开的一种基于webpack的页面组件加载装置的结构示意图，如图2所示，本技术实施例的装置包括以下功能模块：
85.发送模块201，用于在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得后台配置系统接收到ajax请求时，基于ajax请求携带的目标页面的id返回组件信息；
86.解析模块202，用于解析组件信息并得到解析结果，其中，解析结果至少包括两个或两个以上的目标组件的解析信息；
87.第一获取模块203，用于获取每个目标组件的域名；
88.生成模块204，用于基于每个目标组件的解析信息和每个目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的目标组件的资源链接；
89.第二获取模块205，用于基于webpack在目标页面的编译阶段，获取目标页面的原始文件；
90.第三获取模块206，用于获取预加载信息和位置信息；
91.加载模块207，用于基于预加载信息和位置信息将组件资源链接插入到目标页面的原始文件。
92.在本技术实施例中，在目标页面的构建编译阶段，通过向后台配置系统发送ajax请求，能够使后台配置系统基于ajax请求携带的目标页面的id返回组件信息，进而能够解析组件信息并得到至少一个目标组件的解析信息，同时，通过获取每个目标组件的域名，进而能够基于每个目标组件的解析信息和每个目标组件的域名生成组件资源链接，进而基于webpack在目标页面的编译阶段，获取目标页面的原始文件和预加载信息和位置信息，能够基于预加载信息和位置信息将组件资源链接插入到目标页面的原始文件，最终实现在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而提取加载页面资源、提高页面加载效率。
93.另一方面，由于组件资源链接包括两个或两个以上的目标组件的资源链接，因此，一次ajax请求能够获取两个目标组件的资源链接，进而能够减少页面资源请求次数，从而降低页面闪动，其中，每产生一次页面资源请求，目标页面为加载最新返回的资源，会刷新一次，进而如果页面资源请求次数过大，目标页面会频繁闪动，而如果减少页面资源请求次数，就能够降低页面闪动的次数。
94.在本技术实施例中，作为一种可选的实施方式，组件资源链接包括样式文件资源链接和脚本资源链接；相应地，加载模块，包括以下子模块：
95.第一绑定子模块，用于基于预加载信息和位置信息将样式文件资源链接与目标页面的原始文件中的link标签绑定；
96.第二绑定子模块，用于基于预加载信息和位置信息将脚本资源链接与目标页面的原始文件中的script标签绑定。
97.在本可选的实施方式中，基于第一绑定子模块和第二绑定子模块，能够基于预加载信息和位置信息将样式文件资源链接与目标页面的原始文件中的link标签绑定，和基于预加载信息和位置信息将脚本资源链接与目标页面的原始文件中的script标签绑定。
98.在本技术实施例中，作为一种可选的实施方式，解析模块202执行解析组件信息并得到解析结果的方式具体为：
99.轮询组件信息，并得到每个目标组件的解析信息，目标组件的解析信息包括目标组件的组件空间和目标组件的组件名称。
100.在本可选的实施方式中，通过轮询组件信息，能够得到每个目标组件的解析信息。
101.在本技术实施例中，作为一种可选的实施方式，第二获取模块205执行基于webpack在目标页面的编译阶段，获取目标页面的原始文件的具体方式为：
102.基于webpack的compiler.plugin钩子函数监听在目标页面的编译阶段中的emit事件，以得到目标页面的原始文件。
103.在本可选的实施方式中，基于webpack的compiler.plugin钩子函数监听在目标页面的编译阶段中的emit事件，能够获取目标页面的原始文件。
104.需要说明的是，关于本技术实施例的装置的其他详细说明，请参阅本技术实施例一的相关说明，本技术实施例对此不作赘述。
105.实施例三
106.请参阅图3，图3是本技术实施例公开的一种电子设备的结构示意图，如图3所示，本技术实施例的电子设备包括：
107.处理器301；以及
108.存储器302，配置用于存储机器可读指令，指令在由处理器301执行时，执行本技术实施例一的基于webpack的页面组件加载方法。
109.本技术实施例的电子设备通过执行本技术的页面组件加载方法，至少能能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。
110.实施例四
111.本技术实施例公开一种存储介质，存储介质存储有计算机程序，计算机程序被处理器执行本技术实施例公开的基于webpack的页面组件加载方法。
112.本技术的存储介质通过执行本技术的页面组件加载方法，至少能能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。
113.实施例五
114.本技术实施例公开一种计算机产品，该计算机产品存储有计算机程序，计算机程
序被处理器执行本技术实施例公开的基于webpack的页面组件加载方法。
115.本技术的计算机产品通过执行本技术的页面组件加载方法，至少能能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。
116.在本技术所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
117.另外，作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
118.再者，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
119.需要说明的是，功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，rom)随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
120.在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。
121.以上仅为本技术的实施例而已，并不用于限制本技术的保护范围，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。

技术特征：

1.一种基于webpack的页面组件加载方法，其特征在于，所述方法包括：在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得所述后台配置系统接收到所述ajax请求时，基于所述ajax请求携带的目标页面的id返回组件信息；解析所述组件信息并得到解析结果，其中，所述解析结果至少包括两个或两个以上的目标组件的解析信息；获取每个所述目标组件的域名；基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的所述目标组件的资源链接；基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件；获取预加载信息和位置信息；基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件。2.如权利要求1所述的方法，其特征在于，所述组件资源链接包括样式文件资源链接和脚本资源链接；以及，所述基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件，包括：基于所述预加载信息和所述位置信息将所述样式文件资源链接与所述目标页面的原始文件中的link标签绑定；基于所述预加载信息和所述位置信息将所述脚本资源链接与所述目标页面的原始文件中的script标签绑定。3.如权利要求1所述的方法，其特征在于，所述解析所述组件信息并得到解析结果，包括：轮询所述组件信息，并得到每个所述目标组件的解析信息，所述目标组件的解析信息包括所述目标组件的组件空间和所述目标组件的组件名称。4.如权利要求1所述的方法，其特征在于，所述基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件，包括：基于所述webpack的compiler.plugin钩子函数监听在所述目标页面的编译阶段中的emit事件，以得到所述目标页面的原始文件。5.一种基于webpack的页面组件加载装置，其特征在于，所述装置包括：发送模块，用于在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得所述后台配置系统接收到所述ajax请求时，基于所述ajax请求携带的目标页面的id返回组件信息；解析模块，用于解析所述组件信息并得到解析结果，其中，所述解析结果至少包括两个或两个以上的目标组件的解析信息；第一获取模块，用于获取每个所述目标组件的域名；生成模块，用于基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的所述目标组件的资源链接；第二获取模块，用于基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件；
第三获取模块，用于获取预加载信息和位置信息；加载模块，用于基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件。6.如权利要求5所述的装置，其特征在于，所述组件资源链接包括样式文件资源链接和脚本资源链接；以及，所述加载模块，包括：第一绑定子模块，用于基于所述预加载信息和所述位置信息将所述样式文件资源链接与所述目标页面的原始文件中的link标签绑定；第二绑定子模块，用于基于所述预加载信息和所述位置信息将所述脚本资源链接与所述目标页面的原始文件中的script标签绑定。7.如权利要求5所述的装置，其特征在于，所述解析模块执行解析所述组件信息并得到解析结果的方式具体为：轮询所述组件信息，并得到每个所述目标组件的解析信息，所述目标组件的解析信息包括所述目标组件的组件空间和所述目标组件的组件名称。8.如权利要求1所述的方法，其特征在于，所述第二获取模块执行基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件的具体方式为：基于所述webpack的compiler.plugin钩子函数监听在所述目标页面的编译阶段中的emit事件，以得到所述目标页面的原始文件。9.一种电子设备，其特征在于，包括：处理器；以及存储器，配置用于存储机器可读指令，所述指令在由所述处理器执行时，执行如权利要求1-4任一项所述的基于webpack的页面组件加载方法方法。10.一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被处理器执行如权利要求1-7任一项所述的基于webpack的页面组件加载方法。

技术总结

本申请提供一种基于webpack的页面组件加载方法、装置、电子设备及存储介质，其中，基于webpack的页面组件加载方法包括：在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使获取组件信息；解析组件信息并得到解析结果，基于每个目标组件的解析信息和每个目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的目标组件的资源链接；基于webpack在目标页面的编译阶段，获取目标页面的原始文件；基于预加载信息和位置信息将组件资源链接插入到目标页面的原始文件。本申请能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。减少了页面白屏时间。减少了页面白屏时间。