(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211320142.7 (22)申请日 2022.10.26 (71)申请人 平安银行股份有限公司 地址 518000 广东省深圳市罗湖区深南 东 路5047号 (72)发明人 夏志鹏　 (74)专利代理 机构 北京超凡宏宇专利代理事务 所(特殊普通 合伙) 11463 专利代理师 唐正瑜 (51)Int.Cl. G06F 9/445(2018.01) G06F 9/451(2018.01) (54)发明名称 基于webpack的页面组件加载方法、 装置、 电 子设备及存 储介质 (57)摘要 本申请提供一种基于webpack的页面组件加 载方法、 装置、 电子设备及存储介质， 其中， 基于 webpack的页面组件加载方法包括： 在目标页面 的构建编译阶段， 向后台配置系统发送ajax请 求， 以使获取组件信息； 解析组件信息并得到解 析结果， 基于每个目标组件的解析信息和每个目 标组件的域名生成组件资源链接， 其中， 组件资 源链接包括两个或两个以上的目标组件的资源 链接； 基于webpack在目标页面的编译阶段， 获取 目标页面的原始文件； 基于预加载信息和位置信 息将组件资源链接插入到目标页面的原始文件。 本申请能够在目标页面的构建编译阶段， 就将目 标页面的组件插入到目标页面中的原始文件中， 从而能够提前加载资源， 提高了页面加载效率， 减少了页面白屏时间。 权利要求书2页 说明书8页 附图3页 CN 115509642 A 2022.12.23 CN 115509642 A 1.一种基于webpack的页面组件加载 方法， 其特 征在于， 所述方法包括： 在目标页面的构建编译阶段， 向后 台配置系统发送ajax请求， 以使得所述后 台配置系 统接收到所述ajax请求时， 基于所述ajax请求携带的目标页面的ID返回组件信息； 解析所述组件信息并得到解析结果， 其中， 所述解析结果至少包括两个或两个以上的 目标组件的解析信息； 获取每个所述目标组件的域名； 基于每个所述目标组件的解析信 息和每个所述目标组件的域名生成组件资源链接， 其 中， 组件资源链接包括两个或两个以上的所述目标组件的资源链接； 基于所述 webpack在目标页面的编译阶段， 获取 所述目标页面的原 始文件； 获取预加载信息和位置信息； 基于所述预加载信息和所述位置信息将所述组件资源链接插入到所述目标页面的原 始文件。 2.如权利要求1所述的方法， 其特征在于， 所述组件资源链接包括样式文件资源链接和 脚本资源链接； 以及， 所述基于所述预加载信 息和所述位置信 息将所述组件资源链接插入到所述目标 页面的原 始文件， 包括： 基于所述预加载信息和所述位置信息将所述样式文件资源链接与所述目标页面的原 始文件中的l ink标签绑定； 基于所述预加载信息和所述位置信息将所述脚本资源链接与所述目标页面的原始文 件中的script标签绑定 。 3.如权利要求1所述的方法， 其特征在于， 所述解析所述组件信息并得到解析结果， 包 括： 轮询所述组件信息， 并得到每个所述目标组件的解析信息， 所述目标组件的解析信息 包括所述目标组件的组件空间和所述目标组件的组件名称。 4.如权利要求1所述的方法， 其特征在于， 所述基于所述webpack在目标页面的编译阶 段， 获取所述目标页面的原 始文件， 包括： 基于所述webpack 的compiler.plugin钩子函数监听在所述目标页面 的编译阶段中的 emit事件， 以得到所述目标页面的原 始文件。 5.一种基于webpack的页面组件加载装置， 其特 征在于， 所述装置包括： 发送模块， 用于在目标页面的构建编译阶段， 向后台配置系统发送ajax请求， 以使得所 述后台配置系统接收到所述ajax请求时， 基于所述ajax请求携带的目标页面的ID返回组件 信息； 解析模块， 用于解析所述组件信息并得到解析结果， 其中， 所述解析结果至少包括两个 或两个以上的目标组件的解析信息； 第一获取模块， 用于获取每 个所述目标组件的域名； 生成模块， 用于基于每个所述目标组件的解析信 息和每个所述目标组件的域名生成组 件资源链接， 其中， 组件资源链接包括两个或两个以上的所述目标组件的资源链接； 第二获取模块， 用于基于所述webpack在目标页面的编译阶段， 获取所述目标页面的原 始文件；权　利　要　求　书 1/2 页 2 CN 115509642 A 2第三获取模块， 用于获取 预加载信息和位置信息； 加载模块， 用于基于所述预加载信 息和所述位置信 息将所述组件资源链接插入到所述 目标页面的原 始文件。 6.如权利要求5所述的装置， 其特征在于， 所述组件资源链接包括样式文件资源链接和 脚本资源链接； 以及， 所述加载模块， 包括： 第一绑定子模块， 用于基于所述预加载信 息和所述位置信 息将所述样式文件资源链接 与所述目标页面的原 始文件中的l ink标签绑定； 第二绑定子模块， 用于基于所述预加载信 息和所述位置信 息将所述脚本资源链接与 所 述目标页面的原 始文件中的script标签绑定 。 7.如权利要求5所述的装置， 其特征在于， 所述解析模块执行解析所述组件信 息并得到 解析结果的方式具体为： 轮询所述组件信息， 并得到每个所述目标组件的解析信息， 所述目标组件的解析信息 包括所述目标组件的组件空间和所述目标组件的组件名称。 8.如权利要求1所述的方法， 其特征在于， 所述第二获取模块执行基于所述webpack在 目标页面的编译阶段， 获取 所述目标页面的原 始文件的具体方式为： 基于所述webpack 的compiler.plugin钩子函数监听在所述目标页面 的编译阶段中的 emit事件， 以得到所述目标页面的原 始文件。 9.一种电子设备， 其特 征在于， 包括： 处理器； 以及 存储器， 配置用于存储机器可读指令， 所述指令在由所述处理器执行时， 执行如权利要 求1‑4任一项所述的基于webpack的页面组件加载 方法方法。 10.一种存储介质， 其特征在于， 所述存储介质存储有计算机程序， 所述计算机程序被 处理器执行如权利要求1 ‑7任一项所述的基于webpack的页面组件加载 方法。权　利　要　求　书 2/2 页 3 CN 115509642 A 3