CN111176628B - 组件化架构下的前端接入方法、存储介质 - Google Patents

组件化架构下的前端接入方法、存储介质 Download PDF

Info

Publication number
CN111176628B
CN111176628B CN201911316003.5A CN201911316003A CN111176628B CN 111176628 B CN111176628 B CN 111176628B CN 201911316003 A CN201911316003 A CN 201911316003A CN 111176628 B CN111176628 B CN 111176628B
Authority
CN
China
Prior art keywords
component
library
loading
packaging
configuring
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201911316003.5A
Other languages
English (en)
Other versions
CN111176628A (zh
Inventor
刘德建
陈铭
陈耀灿
郭玉湖
陈宏�
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Tianquan Educational Technology Ltd
Original Assignee
Fujian Tianquan Educational Technology Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fujian Tianquan Educational Technology Ltd filed Critical Fujian Tianquan Educational Technology Ltd
Priority to CN201911316003.5A priority Critical patent/CN111176628B/zh
Publication of CN111176628A publication Critical patent/CN111176628A/zh
Application granted granted Critical
Publication of CN111176628B publication Critical patent/CN111176628B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

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

Description

组件化架构下的前端接入方法、存储介质
技术领域
本发明涉及组件化架构领域，具体涉及组件化架构下的前端接入方法、存储介质。
背景技术
在目前业界普遍提倡组件化开发的背景下，复杂的业务往往被拆分成多个具有独立功能的细小组件，不同的业务可以通过自由拼装不同的组件来实现功能复用。
在浏览器环境下(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接入方式的执行情况示意图。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
本发明最关键的构思在于：仅更改加载方式，即可兼容Iframe的优点，同时提升加载性能、初始化性能以及跨UI显示效果。
本发明涉及的技术术语解释:
Figure BDA0002325849090000031
请参照图2，本发明提供一种组件化架构下的前端接入方法，包括：
配置组件打包后导出的格式为library类型；
禁止打包公共代码，配置加载组件库后从接入方的全局变量中查找公共代码；
禁用打包工具的Chunk功能；
配置编译组件库的入口文件，所述入口文件用于导出组件初始化接口以及UI组件接口。
从上述描述可知，本发明的有益效果在于：能够提升加载性能和初始化性能；同时基于library的加载方式解决了iframe加载方式跨UI显示效果不佳的问题。
进一步地，还包括：
使用方接入library后，将公共代码添加到全局变量中；
使用脚本标签加载组件库；
依据所述入口文件，对组件库进行初始化和渲染组件UI。
由上述描述可知，对应之前配置的library接入方式，同步修改接入时的逻辑，确保正常且正确的以library接入。
进一步地，所述入口文件还用于导出组件启动的默认配置。
由上述描述可知，对应不同业务，只需在默认配置的基础上进行修改以适配即可，能够明显提高启动速度，同时降低对接成本。
进一步地，所述禁止打包公共代码，具体为：
通过修改打包工具的配置文件，配置禁止打包包括SDK、前端框架以及UI框架。
由上述描述可知，基于library接入方式可共享组件数据的特点，省去上述占据50％-80％体积的公共代码的打包过程，从而大幅度地减少打包尺寸，提高打包效率，并能够节省内存。
本发明提供的另一个技术方案为：
一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述一种组件化架构下的前端接入方法所包含的所有步骤。
从上述描述可知，对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。并且，各方法的流程被执行后，同样能获取各个方法对应的有益效果。
其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。本发明的有益效果在于：
实施例一
请参照图3，本实施例提供一种组件化架构下的前端接入方法，在现有的前端接入方法上，将各组件打包成对应的库(library)，接入方对接由使用Iframe改为加载组件库，以提升性能。
具体而言，实施方式包括：
S1：将组件项目导出格式修改为library类型；
本实施例基于业界最常用的打包工具Webpack进行项目打包，因此通过修改webpack配置文件中关于导出部分的配置来达到目的。
一具体实例中的伪代码如下：
Figure BDA0002325849090000051
S2：提取公共依赖；
组件以Library方式被加载后，基于library加载方式的特性，组件能够共享接入方的所有数据，所以组件中没必对公共的代码进行打包。根据实践经验，常见的公共代码包括SDK、前端框架(react，vue，angular……)、UI框架(antd，elementUI……)等等。
因此，配置打包工具禁止打包公共代码，且加载组件库后从接入方的全局变量中查找公共代码。
这个步骤是一个非常重要的优化，因为根据实际分析结果，在一个组件项目中，公共部分的代码占据了大约50％～80％的体积，这意味着剥离公共代码后，最终打包尺寸将大幅减小，不仅提高了打包效率，且节省了内存。
一具体实例中，WebPack通过在配置文件中实现上述功能，例如：
Figure BDA0002325849090000052
Figure BDA0002325849090000061
S3：禁用打包工具的Chunk功能；
在大量的实践中发现，在Library环境下，如果将代码打包成多个Chunk并不会提升性能。这是因为在提取公共依赖库后，Library的代码已经非常小了，通常一个组件压缩后不超过250k。结合目前的网络环境，如果将这么小的文件拆分成多个Chunk加载，浏览器为并发加载而产生的开销加上HTTP协议的通信占用的资源，将比加载文件本身的成本更高。因此，通过禁用打包WebPack的Chunk功能，能显著提升加载性能，同时降低成本。
在一具体实例中，禁用Chunk功能的具体实现，只要删掉WebPack相关的插件即可，例如(SpriteChunkPlugin等)。
S4：增加组件库编译的入口文件；
由于开发环境(web)和接入环境(Library)不同，所以需要一个专门用于编译Library的入口文件，这个文件至少导出以下内容：
4.1组件启动的默认配置；
组件启动的配置根据不同业务而不用，例如当前国际化环境等。
所述默认配置在文中的作用是，接入方可以直接使用或者只需根据需要修改其中某项具体配置即可，传递给api的参数进行初始化。不同的接入方的配置往往不一样，这个时候，接入方就可以先获取默认配置，然后修改需要定制的地方，在将修改之后的配置传递给api参数进行初始化。
比如library提供黄色、绿色两种样式的皮肤，默认配置是黄色；然后接入方需要绿色，那就获取到默认配置后，把配置中关于皮肤相关配置改成绿色，然后将修改后的配置传递给api参数即可。当然还可以有各种形形色色的参数。
通过导出一个默认的配置，不仅能节省对接成本，而且能明显缩短启动时间。
4.2组件初始化接口；
组件在使用前，往往需要一些准备工作，比如实例化框架，读取国际化语言包等等。
在本实施例中，需要导出一个api，用于实现上述准备工作，该api的参数是准备工作所必要的配置信息(就是上一步的内容)。
需要特别注意地是，本实施例基于library载入地初始化操作和Iframe环境的初始化操作不同。因为Library可以实现和接入方数据共享，所以一些重复地初始化可以省略，例如(用户鉴权，公共配置加载，公共国际化等)，对比Iframe将进一步提升初始化性能。
4.3UI组件接口；
表示需要暴露给外部使用的UI。假设登录组件，其UI可能是一个提示用户输入账号密码的登录框。这个组件接口参数是传递给UI的参数，返回值是UI本身的实例化对象。
以下是在一个具体实例中的简单伪代码:
Figure BDA0002325849090000071
S5：使用方接入Library；
具体而言，包括：
5.1将上述S2步骤的公共依赖，添加到全局变量中；
根据WebPack规范，Library中的公共依赖，在Library被加载后，默认从全局变量中查找；例如，接入方已经加载过react，并且将其存储在全局变量，所以library不用打包react，直接复用接入方的react即可。
5.2原先使用Iframe加载站点的地方，调整为使用Script标签加载组件代码；
例如原先的写法是：<iframesrc＝’http://www.kk.com/index.html/>；
现在改成：<script src＝’http://www.kk.com/library.js/>。
5.3初始化组件；
调用通过S4步骤的4.2中Library已经暴露出(提供)的初始化接口，对Library进行初始化；
5.4渲染组件；
在需要渲染的地方，调用S4步骤的4.3提供的UI组件接口渲染组件UI。
实施例二
本实施例对应实施例一提供一具体运用场景：
假设目前有个业务，其代码包含以下几部分：
业务代码：大小10k，加载耗时1s；
脚手架：大小10k，加载耗时1s；
ui框架react：大小10k，加载耗时1s；
ui组件antd：大小10k，加载耗时1s；
iframe中的性能分析如下：
加载全部代码40k，耗时4s；用户鉴权，耗时1s；渲染组件，耗时1s；共计：6s。
在library环境中，性能分析如下：
加载业务和脚手架代码20k，耗时2s；渲染组件，耗时1s；共计3s。
改为library方式加载的具体操作实例为：
1、修改导出类型，修改webpack配置；
Figure BDA0002325849090000091
2、提取公共依赖；
Figure BDA0002325849090000092
3、删除chunk功能；
删除webpack的chunk。
4、增加入口文件；
Figure BDA0002325849090000093
Figure BDA0002325849090000101
5、接入Library；
5.1接入方将react和antd以全局的方式加载；
5.2接入方加载library.js；
5.3在渲染前进行Library；
window.myDemo.init(window.myDemo.config)。
5.4渲染；
window.myDemo.renderUI({title:‘这是一个按钮’})。
如图4和图5，为在一实际项目应用中，分别对应Iframe环境下的执行情况以及Library环境下的执行情况。其中，图4大约在1380ms后渲染完成，加载数量为1.9MB(最下方数据)；而图5大约在700ms后渲染完成，加载数量为810KB。由此可见，以Library方式加载的组件，在请求数量、请求大小、初始化速度以及内存占用上都要远远优于Iframe加载的方式。
实施例三
本实施例对应实施例一和实施例二，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述实施例一或实施例二所述的一种组件化架构下的前端接入方法所包含的步骤。具体的步骤内容在此不进行复述，详情请参阅实施例一或实施例二的记载。
综上所述，本发明提供的一种组件化架构下的前端接入方法、存储介质，不仅能兼顾Iframe易于使用的优点；而且能优化加载性能、初始化性能和显示效果；再者，还具有减少内存占用以及对接成本的优点。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (3)

1.一种组件化架构下的前端接入方法，其特征在于，包括：
配置组件打包后导出的格式为library类型；
禁止打包公共代码，配置加载组件库后从接入方的全局变量中查找公共代码；
禁用打包工具的Chunk功能；
配置编译组件库的入口文件，所述入口文件用于导出组件初始化接口以及UI组件接口；
还包括：
使用方接入library后，将公共代码添加到全局变量中；
使用脚本标签加载组件库；
依据所述入口文件，对组件库进行初始化和渲染组件UI；
所述入口文件还用于导出组件启动的默认配置。
2.如权利要求1所述的一种组件化架构下的前端接入方法，其特征在于，所述禁止打包公共代码，具体为：
通过修改打包工具的配置文件，配置禁止打包包括SDK、前端框架以及UI框架。
3.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时，能够实现上述权利要求1或2所述的一种组件化架构下的前端接入方法所包含的步骤。
CN201911316003.5A 2019-12-19 2019-12-19 组件化架构下的前端接入方法、存储介质 Active CN111176628B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911316003.5A CN111176628B (zh) 2019-12-19 2019-12-19 组件化架构下的前端接入方法、存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911316003.5A CN111176628B (zh) 2019-12-19 2019-12-19 组件化架构下的前端接入方法、存储介质

Publications (2)

Publication Number Publication Date
CN111176628A CN111176628A (zh) 2020-05-19
CN111176628B true CN111176628B (zh) 2023-04-18

Family

ID=70657535

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911316003.5A Active CN111176628B (zh) 2019-12-19 2019-12-19 组件化架构下的前端接入方法、存储介质

Country Status (1)

Country Link
CN (1) CN111176628B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113591000B (zh) * 2021-07-13 2024-04-19 青岛海信移动通信技术有限公司 一种浏览器引擎的切换方法和装置及设备
CN113626124B (zh) * 2021-08-16 2024-03-08 南京赛宁信息技术有限公司 一种用于iFrame微前端架构的组件状态共享方法与装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104216700A (zh) * 2013-09-10 2014-12-17 侯金涛 基于云计算的html5应用的打包、安装、卸载、运行方法及系统
CN107153636A (zh) * 2017-04-18 2017-09-12 北京思特奇信息技术股份有限公司 一种实现以pdf格式快速导出业务数据的方法及系统
CN110286917A (zh) * 2019-05-21 2019-09-27 深圳壹账通智能科技有限公司 文件打包方法、装置、设备及存储介质
CN110377274A (zh) * 2019-07-08 2019-10-25 紫光云技术有限公司 基于Single-Spa的微前端架构系统及开发、部署方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8612963B2 (en) * 2010-12-02 2013-12-17 International Business Machines Corporation Guided problem resolution in deploying an application

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104216700A (zh) * 2013-09-10 2014-12-17 侯金涛 基于云计算的html5应用的打包、安装、卸载、运行方法及系统
CN107153636A (zh) * 2017-04-18 2017-09-12 北京思特奇信息技术股份有限公司 一种实现以pdf格式快速导出业务数据的方法及系统
CN110286917A (zh) * 2019-05-21 2019-09-27 深圳壹账通智能科技有限公司 文件打包方法、装置、设备及存储介质
CN110377274A (zh) * 2019-07-08 2019-10-25 紫光云技术有限公司 基于Single-Spa的微前端架构系统及开发、部署方法

Also Published As

Publication number Publication date
CN111176628A (zh) 2020-05-19

Similar Documents

Publication Publication Date Title
US10810359B2 (en) System and method for provisioning a mobile software application to a mobile device
CN105094786B (zh) 基于JavaScript定制页面的方法及系统
US7865528B2 (en) Software, devices and methods facilitating execution of server-side applications at mobile devices
US6823504B1 (en) Method and apparatus for interfacing a javascript interpreter with library of host objects implemented in java
WO2018210096A1 (zh) 一种基于规则引擎的规则配置方法、终端、设备以及存储介质
CN109614147B (zh) 一种phy寄存器读写方法和装置
CN111176628B (zh) 组件化架构下的前端接入方法、存储介质
US20140317537A1 (en) Browser based application program extension method and device
CN107402792B (zh) 应用软件安装包的集成方法、装置、设备及存储介质
US20050160414A1 (en) System and method for dynamically adding features to software applications
CN110895471A (zh) 安装包生成方法、装置、介质及电子设备
US6898786B1 (en) Javascript interpreter engine written in Java
US11934420B2 (en) Systems and methods for componentization and plug and play workflows
CN110045997B (zh) 基础功能模块的对象初始化方法、装置、设备和存储介质
US20060248097A1 (en) Creating customisable applications
CN113626001A (zh) 一种基于脚本的api动态编排方法及装置
CN102148755A (zh) 大型机注入组件和仿真器与大型机间传输的分组的操纵法
CN112379863A (zh) 跨浏览器和小程序的webGL开发方法、装置和计算机设备
US11029970B2 (en) Operating system extension framework
CN117195239A (zh) 微应用资源包生成方法、装置、计算机设备和存储介质
Sharan et al. Scripting in Java
CN113268277A (zh) 一种基于web的客户端访问方法及终端设备
CN113608745A (zh) 一种初始化用户权限的方法及存储介质
CN117931319A (zh) 应用程序页面跳转控制方法、装置、电子设备及存储介质
CN117369823A (zh) 一种基于file协议访问本地演示文件的方法及系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant