前端跃动：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

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

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

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

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

朗新研究院

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

最新文章

月度技术要闻 | Spring-AI-Alibaba 1.0.0-M3.1重磅发布！

聚焦电力客户服务风险核查，解锁效率、质量、协同的“优化密码”

一周圈内事 | 国家发文深化提升“获得电力”服务水平

乡村充电设施推广前，应如何进行配电网承载力评估？

一周圈内事 | 国家电网发布国内首个千亿级多模态电力行业大模型发布

浅谈欺骗性防御技术在保障数字化业务系统安全的应用

新型电力系统下，电力营销面对的变化和挑战

一周圈内事 | 联合国将启动全球碳市场

电网企业「数据要素业务」运营模式与路径探究

一周圈内事 | 国家发布支持电力领域新型经营主体创新发展意见

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

欧盟产品环境足迹（PEF）对我国新能源产业的影响分析及应对策略思考

一周圈内事 | 浙江电力现货市场拟引入负电价

如何借鉴“蚂蚁森林”，打造「电力运营版」养成类游戏？

一周圈内事 | 河北南网分布式光伏参与电力市场工作方案发布

数据流通交易为什么需要“数据交易所+数据经纪商”？

一周圈内事 | 联合国将启动全球碳市场

月度技术要闻 | 渐进式网页应用程序正在成为下一个热门趋势？

尼日利亚电力冲突！海外电网企业与用户关于电费的矛盾何解？

一周圈内事 | 《中华人民共和国能源法》发布

预见未来：「电力计量采集」革新趋势洞察

一周圈内事 | 六部门联合发布关于大力实施可再生能源替代行动的指导意见

分层分区动态调控模式，探索台区云储聚合建设技术新路径！

一周圈内事 | 国家发布完善碳排放统计核算体系工作方案

访谈 | 储能项目如何实现有效落地与盈利？

一周圈内事 | 省间电力现货市场转入正式运行

访谈 | 储能，能否突破“自我革命”的盈利困境？

一周圈内事 | 电力辅助服务市场基本规则发布

“峰谷分时电价与电力市场的关系是什么？” | 电价百科问答

【能源脉动，共庆华诞】朗新研究院历史文章合集

一周圈内事 | 电力行业产品碳足迹与环境产品声明平台上线发布

台区储能的新发展，「云储聚合」将驱动哪些商业新机遇？

一周圈内事 | 江苏启动分布式新能源聚合参与省内绿电市场交易试点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

分类

时事

民生

政务

教育

文化

科技

财富

体娱

健康

情感

旅行

百科

职场

楼市

企业

乐活

学术

汽车

时尚

创业

美食

幽默

美体

文摘

原创标签

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

发布位置

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