[发明专利]组件化架构下的前端接入方法、存储介质

说明书

本发明提供一种组件化架构下的前端接入方法、存储介质，方法包括：配置组件打包后导出的格式为library类型；禁止打包公共代码，配置加载组件库后从接入方的全局变量中查找公共代码；禁用打包工具的Chunk功能；配置编译组件库的入口文件，所述入口文件用于导出组件初始化接口以及UI组件接口。本发明不仅能兼顾Iframe易于使用的优点；而且能优化加载性能、初始化性能和显示效果；再者，还具有减少内存占用以及对接成本的优点。

技术领域

本发明涉及组件化架构领域，具体涉及组件化架构下的前端接入方法、存储介质。

背景技术

在目前业界普遍提倡组件化开发的背景下，复杂的业务往往被拆分成多个具有独立功能的细小组件，不同的业务可以通过自由拼装不同的组件来实现功能复用。

在浏览器环境下(web，h5)，前端的拼装过程主要是通过接入方式最简单的Iframe实现，但是Iframe存在以下缺点：

1、加载性能低下，一个iframe表示一个单独的站点，所以必须加载完整的代码库才能运行；

2、初始化性能低下，由于浏览器的安全策略，Iframe站点无法和外部站点共享信息，这意味着Iframe加载结束后，仍然要做一些重复的初始化，例如用户登录验证，网站配置读取等等；

3、无法跨UI显示，Iframe内的UI布局都是以Iframe左上角为原点，这导致一些UI表现地很奇怪，例如Iframe内部有个消息弹框，用户希望的是弹框是基于浏览器居中的，但是这个UI弹框实际变成Iframe居中，如图1所示，不符合常用的用户交互。

发明内容

本发明所要解决的技术问题是：提供一种组件化架构下的前端接入方法、存储介质，兼顾Iframe易于使用的优点，同时优化加载性能、初始化性能和显示效果。

为了解决上述技术问题，本发明采用的技术方案为：

一种组件化架构下的前端接入方法，包括：

配置组件打包后导出的格式为library类型；

禁止打包公共代码，配置加载组件库后从接入方的全局变量中查找公共代码；

禁用打包工具的Chunk功能；

配置编译组件库的入口文件，所述入口文件用于导出组件初始化接口以及UI组件接口。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述一种组件化架构下的前端接入方法所包含的步骤。

本发明的有益效果在于：在组件化开发时使用Iframe实现，以兼顾Iframe易于使用这一优点；但将接入方式改为library，从而在请求数量、请求大小、初始化速度、内存占用以及UI显示效果等方面都远远优于Iframe。最终实现相较于原本的Iframe接入方式，显著提升加载性能和初始化性能，同时支持跨UI显示。

附图说明

图1为现有技术使用Iframe接入方式的跨UI显示效果；

图2为本发明实施例一种组件化架构下的前端接入方法的流程示意图；

图3为本发明实施例一一种组件化架构下的前端接入方法的流程示意图；

图4为本发明实施例二中运用Iframe接入方式的执行情况示意图；

图5为对应图3数据而运用本发明所述library接入方式的执行情况示意图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。