前端跃动：qiankun框架在电力行业应用实践

科技 2024-08-20 08:15 浙江

导语

随着电力行业信息化建设的不断深入，系统的复杂性和多样性日益增加，随之而来的是需求频繁变动、迭代周期急剧缩短以及系统稳定性要求的不断提升。尽管传统单体前端架构因其简单性和部署便捷性，在小至中等规模的项目中提供便利的管理和维护，但在面对和处理大型项目时，其在多团队并行开发、快速迭代和可扩展性方面的局限性开始显现。而微前端架构通过将前端应用拆分为可以独立开发、测试和部署的小型业务单元，不仅提升了开发效率，也增强了系统的灵活性和响应速度。

基于此，本文提出基于微前端qiankun的跨应用技术方案，旨在构建一个可扩展、高性能和可维护的应用框架，进一步优化电力行业的信息化开发流程，提高开发效率和系统可维护性，期待与各位读者的交流和互动。

【名词解释】

1、微前端：是一种软件架构模式，旨在将前端单体应用拆分为小而独立的、可独立部署和维护的微服务。微前端的目标是使前端开发更加容易、可维护和可扩展，并能够实现团队之间的协作。

2、qiankun：是一个基于微前端架构的开源前端框架。它由蚂蚁集团开发和维护，旨在帮助开发者更简单高效构建和维护复杂的大型前端应用。

电力行业前端架构挑战与重构需求

目前，电力行业前端大多采用传统单体应用架构，由于电力行业业务具有多元化，复杂化的特点，整体业务涵盖了电力发电、输电、配电和销售等多个环节，应用也涉及工单中心、客户服务、所务管理等十几大模块。

随着电力行业的业务快速发展和用户需求不断变化，前端架构需要能够快速扩展和适应变化。但传统单体前端架构在面对这些挑战时显得力不从心，难以满足当前的开发需求。具体来说，现框架存在以下三个方面的痛点：

痛点1：多团队协作开发受限

电力行业业务涉及面广、需求多样，如供电所系统工单中心需整合所内各项业务流程，统一管理各类工单；设备维护需定期对设备进行检查和维护；对外服务需快速响应处理客户各类诉求等。每个模块业务复杂且独立性强，往往需要不同的专业团队来负责。然而，传统单体应用架构在多团队并行开发方面具有局限性，迫切需要一种对多团队并行开发支持优异的技术解决方案。

痛点2：代码结构复杂，扩展难度大

随着电力行业信息化逐步推广，为了推进项目进度响应个性化需求，会复用已有项目成果，开发团队需要基于源代码进行大量改造。但传统单体应用架构的代码结构复杂，扩展性受限：

模块耦合度高，导致在修改时，需要同时修改多个模块，增加了开发和维护的难度；定制化难度大，面对不同客户的个性化需求，需要对源代码进行大量改造，增加系统复杂度，难以灵活应对需求变化。

为了应对系统复杂性的不断增长和满足架构上可扩展性要求，迫切需要一种更具扩展性的技术解决方案。

痛点3：功能迭代更新速度慢

随着客户新需求的不断涌现，项目团队需要不断地对原有功能进行优化和更新。传统单体应用架构在快速迭代方面存在以下困难：

整体部署风险高，每次优化和更新时，都需要重新构建、测试和部署整个应用，导致迭代周期长且风险高；发布频率受限，由于整体部署和测试的时间成本高，频繁发布变得困难，无法快速响应客户的需求变化。变更影响大，任何一个模块的变更都可能影响整个系统的功能和稳定性，增加了发布和维护的风险。

优化迭代项目架构（如划分重构路由架构），虽能解决部分开发问题，但无法彻底解决因项目体量大、耦合性强而导致的启动慢问题。为了加快项目迭代效率，需要一种能够支持模块化开发、独立部署和更新的技术解决方案，以便更快速地响应客户需求和市场变化。因此，需要重构前端框架。

微前端架构在电力行业的应用与实践

通过引入微前端架构，能够更好地应对复杂多变的业务需求，提升系统的性能、可维护性、扩展性和开发效率，还可解决单体应用由“普通应用”演变成“巨石应用”而引发的维护困难问题，是一个很好的解决办法。

（一）技术选型

微前端核心目标是将一个庞大的单体前端应用拆分为多个简单独立小应用，每个小应用可独立开发、部署，通过一个容器来组合拆分后的应用，形成一个整体，为用户提供服务。常用技术包括single-spa、micro-app、qiankun等，下图为各种微前端方案对比：

图1 微前端方案对比

single-spa：将多个单页面应用聚合为一个整体应用的JavaScript微前端框架。
qiankun：在single-spa基础上进一步封装，实现更简单、无痛地构建微前端框架。
micro-app：借鉴WebComponent思想，结合自定义ShadowDom，将微前端封装成一个类WebComponent组件的微前端框架。

通过调研对比，single-spa只实现加载器、路由托管，在老项目上使用时需自己实现沙箱隔离、样式隔离、预加载等，接入成本较高；micro-app和qiankun都提供了完整的微服务框架功能，解决了single-spa欠缺的沙箱隔离、样式隔离、预加载等问题。

两者相比，micro-app接入成本比qiankun低，但它的学习成本更高，对于不支持WebComponent的浏览器未做降级处理，而供电所需面向省市县所各级岗位用户及内外勤员工，采用micro-app很可能产生兼容性问题，同时在社区活跃度上，qiankun更胜一筹。

综合3类微前端技术，结合电力行业的建设实际，为提高开发效率和系统的稳定性，同时满足电力行业的业务需求，笔者最终选择qiankun框架，主要还考虑qiankun的以下3项优势特点：

1、qiankun基于single-spa，qiankun支持多种接入方式，包括基于HTML的接入和基于JSX/TSX的接入等。可以根据项目的实际情况选择最适合的接入方式，降低了学习成本和开发门槛。

2、通过qiankun拆分应用，解决痛点2和痛点3。将原单体应用拆分为多个独立的子应用，实现模块间的解耦，降低代码耦合度。各子应用独立开发部署，可根据不同业务需求灵活扩展和调整，满足供电所多元业务需求。

3、qiankun框架是跨技术栈的，解决痛点1。有新需求时，可充分利用现有技术栈，允许多个团队同时开发和维护不同的子应用，可以大大提高开发效率和团队协作。

（二）技术架构图

图2 qiankun技术架构图

以电力行业数字化供电所项目为例，引入微前端qiankun后，将应用拆分成一个主应用和多个子应用。通过qiankun注册子应用，权限、布局、菜单等公共部分在主应用内实现，子应用可共享主应用这些公共能力。各子应用负责实现特定功能模块，主、子应用互不干扰、独立管理和部署。后续新增业务模块时，仅需单独新增子应用接入，各模块功能不受影响。

（三）接入步骤

1、主应用接入

安装 qiankun
注册并启动子应用

2、子应用接入
导出相应生命周期钩子
配置子应用打包工具
window.__POWERED_BY_QIANKUN__判断是否为qiankun子应用

（四）问题解决

1、子应用拆分问题

如何合理地将一个大型应用拆分为多个子应用？每个子应用应该多大？是每个微前端架构进行子应用拆分时都需要解决的问题。

拆分供电所项目应用时，有以下4项原则：

单一职责原则：每个子应用只需关心自身业务规则，确保职责单一、不交叉
服务自治原则：每个应用可独立运行
持续演进原则：拆分应逐步拆分细化，持续演进，避免子应用数量瞬间爆炸性增长
避免循环依赖：在拆分时需重点考虑，将依赖部分拆分成公共模块

通过以上原则，按照供电所项目的业务领域，将同类业务归为同一个子应用，按照单一职责原则、功能完整性拆分成工单中心、所务管理、基础支撑等多个子应用。整个项目通过应用拆分，解决代码之间耦合性高和项目开发效率低的问题。

2、子应用间样式隔离问题

各子应用之间样式隔离采用Dynamic Stylesheet动态样式表，应用切换时移除老应用样式，再添加新应用样式，保证一个时间点内只有一个应用样式表生效。同时供电所项目基于vue组件化模式开发，没有使用全局样式，主应用和子应用的样式都是动态以style标签挂载到document，只要规范主应用中公共的css，就可实现主子应用的样式隔离。

3、子应用间JS隔离问题

处理完样式隔离后，还有一个更关键的事：如何确保各个子应用间的全局变量不会互相干扰，从而保证各子应用间的软隔离？

JS沙箱会为每个子应用创建一个proxy来代理window对象，然后将代理对象作为参数传入接口，保证应用内的js不会对全局window造成影响。需要在应用中引入execScripts，配合execScripts来实现JS隔离。这样做的好处是每个应用都是相对独立，无需再更改全局window属性。

图3 js沙箱的原理

4、子应用加载问题

通常情况下，我们在使用微前端架构时，需要将子应用打包成一个独立的文件，然后在主应用中通过引入这个文件来加载子应用。但是通过在主应用中引用import-html-entry可以绕过这个步骤，直接将子应用的HTML代码嵌入到主应用中，从而实现子应用的加载。它会根据子应用的配置信息返回一个Promise对象，在Promise的回调函数中可以获取到子应用对应的HTML文件内容。然后对HTML进行处理插入到主应用的DOM中，解析内部所有script和style标签，并依次下载和执行，最后将子应用展示出来。

通过采用微前端qiankun重构升级，解决原框架的痛点问题的同时，重构后的框架还具有以下特点：

1、模块化开发：每个子应用独立开发。

2、独立部署：每个子应用独立部署，不同功能模块的更新和发布不会影响整个系统的运行，降低发布风险。

3、松耦合：子应用之间通过通信机制交互，解耦不同功能模块之间的依赖关系，降低系统复杂性。

4、技术栈自由：主框架不限制接入应用的技术栈，子应用具备完全自主权，独立开发、独立部署。

qiankun框架，实现电力行业信息化的高效重构

在电力行业信息化建设的背景下，为了解决系统复杂性增加、技术栈多样性、多团队开发和独立开发与部署的需求等问题，现在通过微前端qiankun新思路进行重构升级，目前在浙江等多个电力项目中已成功实践和应用，实现了良好的用户体验和灵活的扩展性。

对于通用模块权限管理、人员管理、台区管理等，在各个项目业务模块中（供电所工单中心、稽查项目主题查询、输电项目的任务管理）可直接复用子应用；对于工单中心、指标监控等个性化、差异化较大的子应用，通过qiankun框架进行应用拆分及改造，快速满足需求实现及提升项目进度。

使用qiankun框架的模块动态加载，减少了项目初始加载时间和占用资源；通过应用拆分，每个子应用独立打包部署，降低了部署和升级的成本；多个团队同时开发和维护不同的子应用，大大提高了开发效率和团队协作。

该实践方案也具有通用性，支持跨技术栈的集成，适用于前端各种技术栈的重构。无论是同类型系统，或是有类似痛点的其他系统，均可参考项目的实践案例，通过接入qiankun微前端框架，对项目进行重构升级。

【参考文献】

[1] 可能是你见过最完善的微前端解决方案-支付宝技术团队-ITpub博客，2019.08.27

[2] 关于微前端你必须了解的三种实现方式-阿里云开发者社区，2022.05.07

[3] qiankun 微前端方案实践及总结-CSDN,2020.06.22

[4] 基于 qiankun 的微前端应用实践-张延卿-知乎,2021.03.11

[5] SingleSpa及qiankun入门、源码分析及案例-百度文库

审阅：高家松

作者：丁琳

部门：朗新集团管理分析业务部

END

注：文章仅代表作者观点，欢迎转发和评论。转发、转载、转帖等须注明“稿件来源：朗新研究院”，违者朗新研究院将依法追究责任，谢谢！

【概念热词】聚焦领域新趋势

【技术热词】探索技术创新与应用

【业务热词】筑牢业务发展根基

http://mp.weixin.qq.com/s?__biz=MzU4NjQ4NDcwNQ==&mid=2247517996&idx=1&sn=d00881273bda2ab9b2ff038ac76c7104

朗新研究院

展现朗新研究观点，包括不限于能源电力领域的深度观察，创新业务解决方案，行业热点评论、优秀产品及应用案例等。

最新文章

从计划到市场，我国电价体系的演变脉络及构成方式

一周圈内事 | 国际绿证I-REC退出中国市场

“买卖”电力，「四川」今年有啥新变化？

一周圈内事 | 可再生能源绿色电力证书核发和交易规则发布

零碳园区万里长征第一步：如何进行精准的客户群体划分？

一周圈内事 | 《中国的能源转型》白皮书发布

朗新研究院历史文章合集（截止2024年8月31日）

“买卖”电力，「天津」今年有啥新变化？

一周圈内事 | CCER项目申请正式受理

前端跃动：qiankun框架在电力行业应用实践

一周圈内事 | 国家发布配电网高质量发展行动实施方案

“买卖”电力，「广东」今年有啥新变化？

一周圈内事 | 三部门重磅发布加快构建新型电力系统行动方案

全国统一电力市场体系下的电费结算变化趋势初探

一周圈内事 | 国务院发文加快构建碳排放双控制度体系

朗新研究院历史文章合集（截止2024年7月31日）

访谈 | 新质生产力将为电力营销带来哪些创新与变革？

一周圈内事 | 全国首笔涉碳数据资产成功交易

访谈 | 新质生产力如何引领能源电力领域发展？

一周圈内事 | 二十届三中全会决定涉及能源领域多方向内容

分布式光伏参与绿电及绿证交易市场的新业态探究

一周圈内事 | 国家电网发布服务新能源发展报告2024

接招！微电网快问快答来了！——应用篇

一周圈内事 | 生态环境部发布2023-2024年配额分配方案

朗新研究院历史文章合集（截止2024年6月30日）

接招！微电网快问快答来了！——理论篇

一周圈内事 | 国家发布关于启用国家绿证核发交易系统的公告

大模型时代下的知识库问答实践：如何快速利用大模型生成可信答案？

一周圈内事 | 国家发布2024年汽车标准化工作要点

大模型时代下的知识库问答实践：如何借助语义检索更快更准确地召回上下文

一周圈内事 | 1-5月南方区域绿电绿证交易量超去年总规模

数字化时代，如何实现电费智能精准催缴？

一周圈内事 | 国家发布关于建立碳足迹管理体系的实施方案

朗新研究院历史文章合集（截止2024年5月31日）

如何深挖用户用电“密码”，精准识别空调负荷，优化需求响应？

一周圈内事 | 国家发布2024-2025年节能降碳行动方案

三大趋势，看看未来“绿证”会怎么管？

一周圈内事 | 上海发布促进绿色电力消费加快能源低碳转型实施意见

如何通过功率因数调整电费模型优化，实现电网、用户、社会三方共赢？

一周圈内事 | 国家开展2024年新能源汽车下乡活动

新规出台，绿证供需两端能否“双向奔赴”？

“电-证-碳”市场交易机制协同发展路径探索

一周圈内事 | 国家发展改革委发布《电力市场监管办法》

AI云检查平台，赋能用电设备隐患检查全面升级！

浅析基于知识图谱的指标关系态势感知网络建设

一周圈内事 | 《上市公司可持续发展报告指引》自2024年5月1日起实施

朗新研究院历史文章合集（截止2024年4月30日）

电动汽车有序充电「实时智能调度新算法」！

一周圈内事 | 国家发布可再生能源绿证核发和交易规则

绿证商业模式多样化背景下，如何提振交易市场新活力？

分类

时事

民生

政务

教育

文化

科技

财富

体娱

健康

情感

旅行

百科

职场

楼市

企业

乐活

学术

汽车

时尚

创业

美食

幽默

美体

文摘

原创标签

时事社会财经军事教育体育科技汽车科学房产搞笑综艺明星音乐动漫游戏时尚健康旅游美食生活摄影宠物职场育儿情感小说曲艺文化历史三农文学娱乐电影视频图片新闻宗教电视剧纪录片广告创意壁纸头像心灵鸡汤星座命理教育培训艺术文化金融财经健康医疗美妆时尚餐饮美食母婴育儿社会新闻工业农业时事政治星座占卜幽默笑话独立短篇连载作品文化历史科技互联网

发布位置

广东北京山东江苏河南浙江山西福建河北上海四川陕西湖南安徽湖北内蒙古江西云南广西甘肃辽宁黑龙江贵州新疆重庆吉林天津海南青海宁夏西藏香港澳门台湾美国加拿大澳大利亚日本新加坡英国西班牙新西兰韩国泰国法国德国意大利缅甸菲律宾马来西亚越南荷兰柬埔寨俄罗斯巴西智利卢森堡芬兰瑞典比利时瑞士土耳其斐济挪威朝鲜尼日利亚阿根廷匈牙利爱尔兰印度老挝葡萄牙乌克兰印度尼西亚哈萨克斯坦塔吉克斯坦希腊南非蒙古奥地利肯尼亚加纳丹麦津巴布韦埃及坦桑尼亚捷克阿联酋安哥拉