[发明专利]基于webpack的页面组件加载方法、装置、电子设备及存储介质

说明书

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

技术领域

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

背景技术

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

发明内容

本申请实施例的目的在于提供一种基于webpack的页面组件加载方法、装置、电子设备及存储介质，用于克服以上技术缺陷之一，其中，本申请至少能够在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而能够提前加载资源，提高了页面加载效率，减少了页面白屏时间。

本申请第一方面公开一种基于webpack的页面组件加载方法，所述方法包括：

在目标页面的构建编译阶段，向后台配置系统发送ajax请求，以使得所述后台配置系统接收到所述ajax请求时，基于所述ajax请求携带的目标页面的ID返回组件信息；

解析所述组件信息并得到解析结果，其中，所述解析结果至少包括两个或两个以上的目标组件的解析信息；

获取每个所述目标组件的域名；

基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，其中，组件资源链接包括两个或两个以上的所述目标组件的资源链接；

基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件；

获取预加载信息和位置信息；

基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件。

在本申请第一方面中，在目标页面的构建编译阶段，通过向后台配置系统发送ajax请求，能够使所述后台配置系统基于所述ajax请求携带的目标页面的ID返回组件信息，进而能够解析所述组件信息并得到至少一个目标组件的解析信息，同时，通过获取每个所述目标组件的域名，进而能够基于每个所述目标组件的解析信息和每个所述目标组件的域名生成组件资源链接，进而基于所述webpack在目标页面的编译阶段，获取所述目标页面的原始文件和预加载信息和位置信息，能够基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原始文件，最终实现在目标页面的构建编译阶段，就将目标页面的组件插入到目标页面中的原始文件中，从而提取加载页面资源、提高页面加载效率。

另一方面，由于组件资源链接包括两个或两个以上的所述目标组件的资源链接，因此，一次ajax请求能够获取两个目标组件的资源链接，进而能够减少页面资源请求次数，从而降低页面闪动，其中，每产生一次页面资源请求，目标页面为加载最新返回的资源，会刷新一次，进而如果页面资源请求次数过大，目标页面会频繁闪动，而如果减少页面资源请求次数，就能够降低页面闪动的次数。

在本申请第一方面中，作为一种可选的实施方式，所述组件资源链接包括样式文件资源链接和脚本资源链接；