新型微前端框架入门介绍

2022-10-19

分享到

作者:王言


前言


随着单页面应用SPA规模的不断扩大,紧接着就带来一个新问题:一个规模化应用需要拆分。一方面功能快速增加导致打包时间成比例上升,而紧急发布时要求是越短越好,这是矛盾的。另一方面当一个代码库集成了所有功能时,日常协作变得非常困难。而且前端技术发展非常快,每隔两年就是一个时代,导致需要升级项目甚至换一个框架。微前端这样具有跨应用的解决方案在此背景下应运而生。



微前端介绍



微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略,其核心价值:

1、技术栈无关,主框架不限制接入应用的技术栈,子应用具备完全自主权


2、独立开发、独立部署,子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新


3、增量升级,在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略


4、独立运行,每个子应用之间状态隔离,运行时状态不共享



微前端实现


目前业界已经有不少框架来帮助开发者轻松的集成微前端架构,不同的架构各有优缺点,下面对一些微前端解决方案进行简单的介绍。

iframe


iframe最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享。

Webpack 5 的 Module Federation


Module Federation(https://webpack.docschina.org/concepts/module-federation)主要是用来解决多个应用之间代码共享的问题,允许JavaScript应用程序在运行时从另一个应用程序动态导入代码。模块将构建唯一的JavaScript入口文件,其他应用程 序可以通过设置Webpack配置项来下载该入口文件。

icestark


icestark(https://ice.work/docs/guide/about)是一个基于React的研发解决方案,围绕应用研发框架icejs提供基础的构建、路由、调试等基础能力以及微前端、一体化等领域能力,同时结合可视化操作、物料复用等方案降低研发门槛。

qiankun


qiankun(https://qiankun.umijs.org/zh)是一个基于single-spa的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。


通过对比和结合公司的实际项目,选择了qiankun框架。当然还有其他很多微前端框架,例如Garfish(https://www.garfishjs.org/guide),EMP(https://github.com/efoxTeam/emp),Piral(https://docs.piral.io)等,感兴趣的可以自行查看。


qiankun框架的搭建



主应用就像基座,所有应用都注册在主应用上, 负责子应用的注册、路由分发。通过主应用来监听路由,并按照路由规则来加载不同的应用,以实现应用间解耦。子应用负责暴露一些函数,以此对接主应用。


主应用



当子应用信息注册完之后,一旦浏览器的url发生变化,便会自动触发qiankun的匹配逻辑,所有activeRule规则匹配上的子应用就会被插入到指定的container中,同时依次调用子应用暴露出的生命周期钩子


子应用


子应用不需要额外安装任何其他依赖即可接入qiankun主应用。

1、导出相应的生命周期钩子

子应用需要在自己的入口js导出bootstrap、mount、unmount三个生命周期钩子,以供主应用在适当的时机调用。



2、配置子应用的打包工具

除了代码中暴露出相应的生命周期钩子之外,为了让主应用能正确识别子应用暴露出来的一些信息,子应用的打包工具需要增加如下配置(webpack):




qiankun在项目中的使用


在项目中使用qiankun时,会面临一些挑战,下面从子应用的缓存,沙箱隔离,应用通讯和样式隔离四个方面介绍qiankun在实际项目中的使用。


子应用缓存能力的实现


qiankun为我们提供了两个注册方法:registerMicroApps,loadMicroApp


registerMicroApps适用于route-based场景,路由改变会帮我们自动注册子应用和销毁上一个子应用,对于不需要做缓存的应用来说,这个方法简单易用,只需要给子应用设置一个独立的路由匹配规则即可。

loadMicroApp适用于需要手动加载/卸载一个子应用的场景。对于需要实现缓存和同时加载多个子应用,这个方法更适用。

基于loadMicroApp手动控制加载子应用的特性,想要实现keep-alive能力,可以在主应用和子应用设置合适keep-alive缓存策略,然后通过“display: none”的方式去控制切换的显示和隐藏(DOM重新渲染会导致历史状态丢失),在主应用中为每个子应用设置挂载点,应用切换的时候就不会导致前一个子应用DOM被卸载。



沙箱隔离和引入第三方资源


qiankun内部提供了initGlobalState方法用于注册MicroAppStateActions实例用于通信,该实例有三个方法,分别是:


setGlobalState:设置globalState,设置新的值时,内部将执行浅检查,如果检查到globalState发生改变则触发通知,通知到所有的观察者函数。


onGlobalStateChange:注册观察者函数,响应globalState变化,在globalState发生改变时触发该观察者函数。


offGlobalStateChange:取消观察者函数,该实例不再响应globalState变化。


样式隔离


qiankunstart中提供了sandbox可选配置项

sandbox - boolean | {strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean },是否开启沙箱,默认为true

默认场景sandbox: true, 只能保证单实例下的样式隔离,无法保证多个子应用共存,主应用和子应用之间的样式隔离;

设置为strictStyleIsolation: true;表示开启严格的样式隔离模式。这种模式下 qiankun会为每个子应用的容器包裹上一个shadow dom节点,从而确保子应用的样式不会对全局造成影响;



qiankun还提供了一个实验性的样式隔离特性,当experimentalStyleIsolation被设置为true时,qiankun会改写子应用所添加的样式为所有样式规则增加一个特殊的选择器规则来限定其影响范围,因此改写后的代码会表达类似为如下结构:


总结


微前端的使用不仅能拆分巨型应用,使应用方便迭代更新,也能兼容历史应用,实现增量开发。根据使用微前端的经验,微前端将前端应用程序拆分为彼此独立的小块,开发和部署时间得到改善。任何技术框架都有其适用场景,选择qiankun框架也是因为其适合自身的开发场景,且上手简单,增加开发效率,也使程序更易于维护。



▌江苏鸿程大数据研究院简介


江苏鸿程大数据技术与应用研究院于2019年1月,在南京市政府、江北新区研创园、南京大学的共同支持下落地南京江北新区。研究院以南京大学PASA大数据实验室黄宜华教授团队为核心,依托南京大学计算机软件新技术国家重点实验室,在产学研协同的运营模式下,专业从事大数据与人工智能核心技术创新、系统平台及行业应用的研发与产业孵化,大数据与人工智能应用解决方案规划与设计,以及大数据与人工智能技术咨询与培训等服务,促进大数据与人工智能在各行业领域的普及应用,推动行业数字化转型,促进数字经济发展。经过三年的发展,目前,研究院已经发展为南京市软件与人工智能重点企业,每年评选为南京市优秀新研机构,并成为国家高新技术企业。