基于webpack的页面组件加载方法、装置、电子设备及存储介质制造方法及图纸

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

【技术实现步骤摘要】
基于webpack的页面组件加载方法、装置、电子设备及存储介质


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

技术介绍

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

技术实现思路

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

【技术保护点】

【技术特征摘要】
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返回组件信息；解析模块，用于解析所述组件...

【专利技术属性】
技术研发人员：夏志鹏，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：