微前端microfrontends架构与应用

微前端microfrontends架构与应用2021-6-4

一、微前端的提出Microfrontends2016在Thoughtworks技术雷达上提出并很快进入adopt阶段，这意味着微前端这种策略和手段是广泛证实可用•ADOPTFourkeymetricsMicrofrontendsWeveseensignificantbenefitsfromintroducingmicroserviceswhichhaveallowedteamstoscalethedeliveryofindependentlydeployedandmaintainedservices.Unfortunatelywevealsoseenmanyteamscreateafrontendmonolith—alargeentangledbrowserapplicationthatsitsontopofthebackendservices—largelyneutralizingthebenefitsofmicroservices.Sincewefirstdescribedmicrofrontendsasatechniquetoaddressthisissuewevehadalmostuniversallypositiveexperienceswiththeapproachandhavefoundanumberofpatternstousemicrofrontendsevenasmoreandmorecodeshiftsfromtheservertothewebbrowser.Sofarwebcomponentshavebeenelusiveinthisfieldthough.图IMicrofronlends几次出现在技术雷达上

二、什么是微前端微前端首先是一个概念最初是由将后端的微服务扩展到前端开发及方法策略微前端的核心价值:•技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权，说明接入的微应用技术体系可以vueangular等等•独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新・增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略•独立运行时每个微应用之间状态隔离，运行时状态不共享微前端在生产上的应用场景微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用FrontendMonolith后，随之而来的应用不可维护的问题这类问题在企业级Web应用中尤其常见简而言之，将巨石应用拆解成若干可以自治的松耦合微应用针对中后台应用的解决方案中后台应用由于其应用生命周期长（动辄3+年）等特点，最后演变成一个巨石应用的概率往往高于其他类型的web应用而从技术实现角度，微前端架构解决方案大概分为两类场景:单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期通常基于url的变化来做子应用的切换多实例同一时刻可展示多个子应用通常使用WebComponents方案来做子应用封装子应用更像是一个业务组件而不是应用单实例场景的微前端架构实践方案（基于single-spa），更贴近大部分中后台应用

三、微前端实现库-qiankunJS沙箱大部分子应用都用到的资源怎么处理图4微前端解决方案团基于single-spa封装，提供了更加开箱即用的APL回技术栈无关，任意技术栈的应用均可使用/接入，不论是React/Vue/Angular/JQuery还是其他等框架0HTMLEntry接入方式，让你接入微应用像使用iframe一样简单团样式隔离，确保微应用之间样式互相不干扰0JS沙箱，确保微应用之间全局变量/事件不冲突资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度0umi插件提供了@umijs/plugin-qiankun供umi应用一键切换成微前端架构系统

四、为什么不使用iframe•url不同步浏览器刷新iframeurl状态丢失、后退前进按钮无法使用UI不同步，DOM结构不共享想象一下屏幕右下角1/4的iframe里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器resize时自动居中..全局上下文完全隔离，内存变量不共享iframe内外系统的通信、数据同步等需求，主应用的cookie要透传到根域名都不同的子应用中实现免登效果慢每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程

五、K0CA微前端架构系统Micro-templateMicro-template特性和价值KOCA前端平台的发展

1.

8.0及之前koca前端平台所有的资源都在同一个项目里面进行管理

1.

8.0后各个模块与框架独立成一个项目，自治，模块与框架分工明确，框架负责规范的指定，公共数据的存取等；模块负责业务功能的实现，在部署时借助脚手架组合成一个项目打包编译

2.

2.0之后发展了分布式部署的解决方案Micro-template按照前端分布式部署的嵌入标准子应用只用做少量的改动便可以独立部署，嵌入到主框架里面Micro-template包含以下特性不包含子项目资源的主框架，主项目只有一个html入口，子项目通过主项目路由变化来按需加载，子系统间切换不再刷新；菜单栏、登录、退出等功能从子项目剥离，写在主项目里，再有的相关改动只需改动主项目，包括错误监控等行为，只需处理一个主项目，十几个子项目不再需要处理；子项目原本需要加载的公共部分（如vue、vuexvue-routeraxios^element-ui）全部由主项Fl调度，配合webpack的externals功能通过外链的方式按需加载，一旦有一个子项目加载过，下一个子项目就不需要再加载，这样每个子项目dist文件里就只有子项目自己的业务代码（最终子项目包的体积缩小了80%只有几十k）项目实际加载速度快了很多子项目并没有重新开发，只是进行了一些改造，接入micro-template这套架构，所以新需求X的开发成本也极大的降低了Micro-template使用方法KOCA微前端解决方案Micro-template应用场景.koca开发门户的独立部署与集成（:3000）.本地开发环境集成xta部分功能与koca原生模块，react项目（报表）演示Micro-template需要提升的点.使用方式上的优化，配置繁琐.独立部署的子应用不可单独访问，部署解决方案.Umi+react技术栈子应用接入方案未定待完善使用演示参考MicroFrorterdsMicroFrontendsfrom可能是你见过最完善的微前端解决方案qiarkur。