手写 qiankun 微前端框架_哔哩哔哩_bilibili

why微前端？

为什么要使用微前端架构？

多人协同开发，解决巨石应用。

把庞大应用分块处理，划分为多个子应用，子应用技术栈无关，独立部署。多个子应用聚合在一起，看起来就是一个完整的应用，用户无感知。

在开发层面来说，不限制技术栈，可以多团队采用不同的技术栈开发，也适合进行渐进式重构升级。

微前端原理

核心逻辑

规则匹配 ⇒ 获取资源 ⇒ 渲染到容器

// 注册子应用，微前端运行原理和 SPA单页应用非常相似，SPA注册路由与注册子应用概念类似。
registerMicroApps([
	  // 当匹配到 activeRule 的时候，请求获取 entry 资源，渲染到 container 中
		{
			name: 'app-react',
			entry: '//localhost:9001' // 子应用的 HTML 入口
      container: '#subapp-container', // 渲染到哪里
			activeRule: '/subapp/app-react' // 路由匹配规则
		}
	]	
)

主子应用出口

主子应用有不同的接入口

子应用如何接入主应用？

1. 导出三个必要的生命周期钩子函数

   1. bootstrap 渲染之前，做一些初始化
   2. mount 渲染函数， 一般挂载到 子应用入口 => #app 节点上
   3. unmount 卸载函数，清理工作；

   注意：生命周期函数必须返回 Promise