qiankun入门
类似于后端的微服务，避免前端变成巨石应用，又有点类似于vue-router这种路由插件，官方的说法是类似于一个jquery，只需要调用几个API就可以完成微前端改造，内部基于single-spa实现css和js隔离，和iframe有什么区别？
入门Demo
创建主应用
- 创建index.html，创建main.js
- 在main.js里面引入qiankun，并定义路由
- 在index.html里面引入main.js，并写好几个菜单切换按钮，每个菜单的导航路径就是上面的路由，可以直接用history.push进行路由切换
创建purehtml子应用
- 创建html, js
- js里面给global.purehtml对象添加生命周期函数，一般在mount函数里面进行子页面初始化
然后就可以启动主应用和子应用，然后浏览器访问主应用了，可以用vscode的live server启动应用
single-spa入门
single-spa通过注册子应用，和vue-router一样通过监听hashchange、popstate事件及重写pushState和replaceState实现监听地址栏变动功能，同时加载子应用
single-spa的源码数量并不大，第三方文章中有对其做一个简单实现
核心功能如下
js
// 基座应用需要注册子应用，启用
import { registerApplication, start } from 'single-spa'
// 注册应用
registerApplication({
// 子应用名称
name: 'app1',
// 子应用加载函数，需自己实现加载js的逻辑，或者使用es6的import()，
// 需要返回一个promise且返回值需要导出bootstarp、mount、unmount函数，子应用可以在mount函数中初始化
// 提供了window.singleSpaNavigate用于子应用判断自己是否处于微应用状态
app: loadApp('http://localhost:8081', 'app1'),
// 当路由满足条件时（返回true），激活（挂载）子应用
activeWhen: (location) => location.pathname.startsWith('/app1'),
// 传递给子应用的对象
customProps: {},
})
// 开启微服务功能、内部只是把启用标志打开而已
start()
// 子应用需导出生命周期函数
export function bootstrap() {}
export function mount() { /**可以在这里初始化子应用 **/ }
export function unmount() {}
// 官方提供了single-spa-vue，用于子应用简化生命周期函数的编写，比如不需要写vue应用的卸载逻辑了
// 基于vue3
import singleSpaVue from 'single-spa-vue'
import {createApp, h} from 'vue'
const vueLifecycle = singleSpaVue({
createApp,
appOptions: {
render: () => h(App),
},
handleInstance: (app) => {
app.use(router)
app.mount('#mircoApp')
},
})
export const bootstrap = vueLifecycle.bootstrap
export const mount = vueLifecycle.mount
export const unmount = vueLifecycle.unmount- 创建主应用html, js
- 创建子应用js
single-spa和qiankun的对比
qiankun是基于single-spa开发的，qiankun实现的额外功能有
- 自动加载子应用，不像single-spa需要自己写加载逻辑
- 隔离子应用的js和css
- qiankun可以加载html entry，而single-spa只能加载js entry