qiankun 微前端方案实践及总结

  如果我们的项目需要开发某个新的功能,而这个功能另一个项目已经开发好,我们想直接复用时。PS:我们需要的只是别人项目的这个功能页面的「内容部分」,不需要别人项目的顶部导航和菜单。






  一个比较笨的办法就是直接把别人项目这个页面的代码拷贝过来,但是万一别人不是  开发的,或者说  版本、 库等不同,以及别人的页面加载之前操作(路由拦截,鉴权等)我们都需要拷贝过来,更重要的问题是,别人代码有更新,我们如何做到同步更新。







  长远来看,代码拷贝不太可行,问题的根本就是,我们需要做到让他们的代码运行在他们自己的环境之上,而我们对他们的页面仅仅是“引用”。这个环境包括各种插件
,也包括加载前的逻辑(读 ,鉴权,路由拦截等)。私有  可以共享组件,但是依然存在技术栈不同/UI库不同等问题。






  代码越来越多,打包越来越慢,部署升级麻烦,一些插件的升级和公共组件的修改需要考虑的更多,很容易牵一发而动全身项目太大,参与人员越多,代码规范比较难管理,代码冲突也频繁。产品功能齐全,但是客户往往只需要其中的部分功能。剥离不需要的代码后,需要独立制定版本,独立维护,增加人力成本。






  举个栗子,你们的产品有几百个页面,功能齐全且强大,客户只需要其中的部分页面,而且需要你们提供源码,这时候把所有代码都给出去肯定是不可能的,只能挑出来客户需要,这部分代码需要另外制定版本维护,就很浪费。






  微前端的诞生也是为了解决以上两个问题:






  复用(嵌入)别人的项目页面,但是别人的项目运行在他自己的环境之上。巨无霸应用拆分成一个个的小项目,这些小项目独立开发部署,又可以自由组合进行售卖。






  使用微前端的好处:






  技术栈无关,各个子项目可以自由选择框架,可以自己制定开发规范。快速打包,独立部署,互不影响,升级简单。可以很方便的复用已有的功能模块,避免重复开发。






  目前微前端主要有两种解决方案: 方案和  方案






  大家都很熟悉,使用简单方便,提供天然的  隔离,也带来了数据传输的不便,一些数据无法共享(主要是本地存储、全局变量和公共插件),两个项目不同源(跨域)情况下数据传输需要依赖  。






  有很多坑,但是大多都有解决的办法:






  页面加载问题






  和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载,阻塞  事件。每次点击都需要重新加载,虽然可以采用  来做缓存,但是页面缓存过多会导致电脑卡顿。「(无法解决)」






  布局问题






  必须给一个指定的高度,否则会塌陷。






  解决办法:子项目实时计算高度并通过  发送给主页面,主页面动态设置  高度。有些情况会出现多个滚动条,用户体验不佳。






  弹窗及遮罩层问题






  弹窗只能在  范围内垂直水平居中,没法在整个页面垂直水平居中。






  解决办法1:通过与框架页面消息同步解决,将弹窗消息发送给主页面,主页面来弹窗,对原项目改动大且影响原项目的使用。解决办法2:修改弹窗的样式:隐藏遮罩层,修改弹窗的位置。






  内的  无法全屏






  弹窗的全屏,指的是在浏览器可视区全屏。这个全屏指的是占满用户屏幕。






  全屏方案,原生方法使用的是 ,插件:vue-fullscreen。当页面在  里面时,全屏会报错,且  结构错乱。






  浏览器前进/后退问题






  和主页面共用一个浏览历史, 会影响页面的前进后退。大部分时候正常, 多次重定向则会导致浏览器的前进后退功能无法正常使用。并且  页面刷新会重置(比如说从列表页跳转到详情页,然后刷新,会返回到列表页),因为浏览器的地址栏没有变化, 的  也没有变化。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61751.shtml

张贴在2