qiankun微前端指南

 什么是微前端

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端。即将Web应用由单一的单体应用转变为多个小型应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

为什么要用微前端

1、大项目拆分，使项目方便迭代更新

2、兼容旧版本应用，实现增量开发

特点：独立部署、增量迁移、团队自治、松耦合代码

优点：路由跨应用通信、大型项目迭代、对团队技术栈不一，实现多框架整合

缺点：有效载荷大小、环境差异配置难、业务和治理复杂

微前端结构方案

1、自由组织模式：没有特别形式，类似iframe嵌套、nmp自由发挥

2、基座模式：类似微服务的注册中心模式，有个基座。其他应用都往里

3、去中心模式：webpack5模块联邦，多个应用可以相互嵌套，可以深入到组件导入导出

主流微前端架构

Single-spa:最早的微前端架构，兼容多种前端技术栈。

Qiankun:基于Single-Spa，阿里系开源前端框架

Single-Spa

Single-Spa 是一个用于前端微服务化的javascript前端解决方案，也是最早的前端整合框架。

single-spa就是，single-spa将之应用也看做一个spa的页面。主应用通过路由匹配的方式，加载并显示不同的应用资源，之应用会经过下载、初始化、被挂载、卸载、等过程。single-spa会通过生命周期为这些过程提供钩子函数。

乾坤是基于single-spa的二次开发，它在single-spa基础上添加更多的功能，并且做了不错的封装，降低了入门微前端的门槛。

qiankun如何实现微前端

官方文档：快速上手 - qiankun

基座

---

1、安装qiankun

yarn add qiankun 或 npm i qiankun -S

2、注册微应用

import { registerMicroApps, start} from 'qiankun'
registerMicroApps([
    {
        name: 'reat app',
        entry: '//localhost:7100',
        container: '#youContainer',
        activeRule: '/youActiveRule',
    },
    {
        name: 'vue app',
        entry: {scripts: ['//locahost:7100/main.js']},
        container: '#youContainer2',
        activeRule: '/youActiveRule',
     }
])
start()

registerMicroApps 用于注册微应用信息，当基座的路由和activeRule匹配的时候，基座就会从entry处获取微应用，并渲染到container上，同时调用微应用的生命周期。

如果微应用的加载不是根据路由匹配，也可以选择手动加载微应用

import { loadMicroApp } from ''qiankun'
loadMicroApp({
    name: 'app',
    entry: '//localhost:7100',
    container: '#yourContainer'
})

RegistrableApp

1. name(string)：必选，微应用名称，必须确保唯一
2. entry(string)：必选，微应用入口
3. container(string)：必选，微应用的容器节点
4. activeRule(string)：必选，微应用的激活规则
5. loader(boolean)：可选，loading状态发生变化时会调用的方法
6. props(object)：可选，主应用需要传递给微应用的数据