Vue qiankun微前端实现详解
目录
- 引言
- What:微前端是什么
- Why:为什么选择微前端
- 微前端能做到什么
- 为什么不使用iFrame
- How:微前端实践
- 在主应用中注册微应用
- 在子应用导出相应的生命周期钩子
- 结尾
引言
前端时间有个契机,让我们团队开始进行微前端的相关实践。
最近正好有些成果了,来一个阶段性的总结,也方便后续进一步的开发。
可能第一次听说微前端的同学都会不明觉厉,那么ta到底是个啥?本章会从以下3个角度阐述我的理解:
- What:微前端是什么
- Why:为什么选择微前端
- How:微前端实践
What:微前端是什么
首先,微前端其实并不高大上,它的本质十分简单:
一句话介绍:在一个应用中展示另几个应用的界面。
是不是看起来与iFrame
非常类似?
在微前端体系中,被展示的应用称为子应用,而提供展示容器的应用称为主应用。
Why:为什么选择微前端
这个问题我觉得可以从两个方面来回答:
- 微前端能做到什么
- 为什么不使用iFrame
微前端能做到什么
随着公司规模不断扩大,项目团队数量不断增加,我们不可避免的遇到了这些问题:
- 多个项目需要同一个能力模块
- 项目团队都有自己的特色模块,这些模块可能是别的项目团队想要的
- 各个团队使用的技术栈有所区别,迁移成本较大
- 开发新项目时,可能需要某些老项目的能力模块
- …………
这些问题,归根结底就是技术复用。
我们想,能不能将每个团队的特色模块划分为子应用。大家都基于主应用开发,当路径切换时加载不同的子应用,这样每个子应用都是独立的,技术栈也就不用再做限制了!
为什么不使用iFrame
如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。--qiankun文档
iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题:
- Url 不同步。在iFrame中刷新会导致应用出错、后退前进按钮无法使用、无法使用统一的标签导航……
- UI 不同步,DOM 结构不共享。iFrame中难以构建一个带有全局遮盖的弹窗。
- 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求实现困难。
How:微前端实践
抛开需求讲技术完全就是耍流氓,所有架构最终都是为了业务。
在我的认知中,微前端更适合构建控制台类的单页面应用。会打开多个页面的社区、论坛类应用是不适合使用微前端的。既然都打开新页面了,为什么不直接跳转到另一个项目的地址呢。
团队选择了qiankun@2.0作为微前端的实现方案,qiankun官方网站:qiankun.umijs.org/zh
跟着官网的Demo,只需要两步就可以实现微前端模式改造:
- 在主应用增加注册子应用的代码
- 在子应用中提供钩子函数
在主应用中注册微应用
在main.js等项目入口文件处注册子应用:
import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:7100', container: '#yourContainer', activeRule: '/yourActiveRule', }, { name: 'vue app', entry: { scripts: ['//localhost:7100/main.js'] }, container: '#yourContainer2', activeRule: '/yourActiveRule2', }, ]); start();
当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。
在子应用导出相应的生命周期钩子
微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js,在我们项目中是main.js)
导出 bootstrap、mount、unmount 三个生命周期钩子,以供主应用在适当的时机调用。
/** * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。 * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。 */ export async function bootstrap() { console.log('react app bootstraped'); } /** * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法 */ export async function mount(props) { ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root')); } /** * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例 */ export async function unmount(props) { ReactDOM.unmountComponentAtNode( props.container ? props.container.querySelector('#root') : document.getElementById('root'), ); } /** * 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效 */ export async function update(props) { console.log('update props', props); }
结尾
由于实际上的项目比Demo复杂的多,实际开发过程中遇到了一万个坑,包括路由、权限、第三方插件等等,这部分的内容会在后续帖子里更新。
以上就是Vue qiankun微前端实现详解的详细内容,更多关于Vue qiankun微前端的资料请关注我们其它相关文章!