为什么要用微前端

业务管理系统多，技术栈分别为 vue/vue2/react16/react hook
管理人员需要同时使用多系统，但是又不想切换系统重新登陆，页面会刷新，需要新开浏览器tab
部分子应用需要支持子公司的业务，需要独立部署运行。
对于开发者来说，如果需要在应用 A 实现应用B的某些功能，例如在应用A的页面弹出应用B的弹窗，如果是react、vue两种不同的框架的话，重新写一遍业务逻辑代码很明显是不理智的。

所以从技术角度来看，我们需要用一个父架构来集成这些子应用，把它们整合到统一平台上，同时子应用也可以脱离父架构独立部署运行。

微前端架构图

为什么放弃iframe

浏览记录无法自动被记录，浏览器刷新，状态丢失、后退前进按钮无法使用。

嵌套子应用弹窗蒙层无法覆盖全屏

页面通信比较麻烦，只能采用postMessage方式。

每次子应用进入都需要重新请求资源，页面加载速度慢。

强调一下，目规模小、数量少的场景其实不建议使用微前端。

罗列一下碰到的问题

多tab切换操作久了会越来越卡
双应用切换数据缓存
同一个基座如何同时并行加载两个应用
子应用部署后，如何提示业务人员更新系统
性能优化：父应用如何实现预加载和按需加载

qiankun 实现原理

微前端方案中我们最终选择了 qiankun，qiankun是基于single-spa开发，它主要采用HTML Entry模式，直接将子应用打出来 HTML作为入口，通过 fetch html 的方式，解析子应用的html文件，然后获取子应用的静态资源，同时将 HTML document 作为子节点塞到主框架的容器中。

应用切出/卸载后，同时卸载掉其样式表即可，浏览器会对所有的样式表的插入、移除做整个 CSSOM 的重构，从而达到插入、卸载样式的目的。这样即能保证，在一个时间点里，只有一个应用的样式表是生效的。

HTML Entry 方案则天生具备样式隔离的特性，因为应用卸载后会直接移除去 HTML 结构，从而自动移除了其样式表。

子应用挂载时，会自动做一些特殊处理，可以确保子应用所有的资源dom（包括js添加的style标签等）都集中在子应用根节点dom下。子应用卸载时，对应的整个dom都移除了，这样也就避免了样式冲突。

提供了js沙箱，子应用挂载时，会对全局window对象代理、对全局事件监听进行劫持等，确保微应用之间全局变量/事件不冲突。

通过阅读qiankun源码。熟悉一下qiankun代码的执行流程

业务中碰到的难点解决

双应用切换数据缓存

不同系统之间切换数据缓存问题，同一个应用可以使用 keep-alive 去缓存页面，但是不同子应用之间切换的时候，会导致子应用被销毁，缓存失效

多开tab缓存方案

代码实现

通过display:none;控制不同子应用dom的显示隐藏

 <template>
  <div id="app">
  <header>
    <router-link to="/app1/">app1</router-link>
    <router-link to="/app2/">app2</router-link>
  </header>
  <div id="appContainer1" v-show="$route.path.startsWith('/app1/')"></div>
  <div id="appContainer2" v-show="$route.path.startsWith('/app2/')"></div>
  <router-view></router-view>
</div>
</template>

解决方案

思考，如何优化渲染性能：

每一个微应用实例都是运行在一个基座里，那我们如何尽可能多的复用沙箱，子系统切换时候不卸载，这样切换路由就快了

方案一

方案优势：直接调用官网api loadMicroApp,方便快捷切换的时候不卸载子应用，tab切换速度比较快。方案不足：超级管理员应用太多，子应用切换时不销毁DOM，会导致DOM节点和事件监听过多，造成页面卡顿；子应用切换时未卸载，路由事件监听也未卸载，需要对路由变化的监听做特殊的处理。 2. 方案二

start({
    prefetch: 'all',
    singular: false,
})

有点：代码量少，通过registerMicroApps注册子应用,通过start的prefetch预加载，但是有个问题就是子应用在切换的时候会unmount，导致数据丢失，导致之前填写的表单数据丢失&重新打开速度也慢

看了一下基于微前端qiankun的多页签缓存方案实践：https://zhuanlan.zhihu.com/p/548520855 3.1章节的实现方法，我感觉太复杂了，而且还需要同时实现react和vue两种方案,代码量也比较大。

当时就想着要是微应用切换的时候不卸载dom就好了。

方案二优化

调用了start方法后，子应用切换怎么才能不卸载dom呢通过查阅文献以及阅读qiankun生命周期钩子函数的源码，最终找到了解决方案

首先修改子项目的render()和unmount()方法

子项目修改

let instance
export async function render() {
  if(!instance){
     instance = ReactDOM.render(
        app,
        container
            ? container.querySelector("#root")
            : document.querySelector("#root")
    );ount('#app1History');
  }
}

export async function unmount(props) { 
    //     const { container } = props;
    //     ReactDOM.unmountComponentAtNode(
    //         container
    //             ? container.querySelector("#root")
    //             : document.querySelector("#root")
    //     );
}

vue项目同理

然后，主应用调用

start({
    prefetch: 'all',
    singular: false,
})

然后借助patch-package修改qiankun源码

patch-package的使用方法这里就不赘述了，网上有很多，很容易搜到

总共修改五处地方,基于qiankun2.9.1

diff --git a/node_modules/qiankun/es/loader.js b/node_modules/qiankun/es/loader.js
index 6f48575..285af0e 100644
--- a/node_modules/qiankun/es/loader.js
+++ b/node_modules/qiankun/es/loader.js
@@ -286,11 +286,14 @@ function _loadApp() {
           legacyRender = 'render' in app ? app.render : undefined;
           render = getRender(appInstanceId, appContent, legacyRender); // 第一次加载设置应用可见区域 dom 结构
           // 确保每次应用加载前容器 dom 结构已经设置完毕
-          render({
-            element: initialAppWrapperElement,
-            loading: true,
-            container: initialContainer
-          }, 'loading');
+          console.log("qiankun-loader--loading", getContainer(initialContainer).firstChild)
+          if (!getContainer(initialContainer).firstChild) {
+            render({
+              element: initialAppWrapperElement,
+              loading: true,
+              container: initialContainer
+            }, 'loading');
+          }
           initialAppWrapperGetter = getAppWrapperGetter(appInstanceId, !!legacyRender, strictStyleIsolation, scopedCSS, function () {
             return initialAppWrapperElement;
           });
@@ -305,8 +308,8 @@ function _loadApp() {
           speedySandbox = _typeof(sandbox) === 'object' ? sandbox.speedy !== false : true;
           if (sandbox) {
             sandboxContainer = createSandboxContainer(appInstanceId,
-            // FIXME should use a strict sandbox logic while remount, see https://github.com/umijs/qiankun/issues/518
-            initialAppWrapperGetter, scopedCSS, useLooseSandbox, excludeAssetFilter, global, speedySandbox);
+              // FIXME should use a strict sandbox logic while remount, see https://github.com/umijs/qiankun/issues/518
+              initialAppWrapperGetter, scopedCSS, useLooseSandbox, excludeAssetFilter, global, speedySandbox);
             // 用沙箱的代理对象作为接下来使用的全局对象
             global = sandboxContainer.instance.proxy;
             mountSandbox = sandboxContainer.mount;
@@ -409,11 +412,18 @@ function _loadApp() {
                         appWrapperElement = createElement(appContent, strictStyleIsolation, scopedCSS, appInstanceId);
                         syncAppWrapperElement2Sandbox(appWrapperElement);
                       }
-                      render({
-                        element: appWrapperElement,
-                        loading: true,
-                        container: remountContainer
-                      }, 'mounting');
+                      //修改2
+                      if (!getContainer(remountContainer).firstChild) {
+                        render({
+                          element: appWrapperElement,
+                          loading: true,
+                          container: remountContainer
+                        }, 'mounting');
+                      }
                     case 3:
                     case "end":
                       return _context5.stop();
@@ -458,11 +468,18 @@ function _loadApp() {
                 return _regeneratorRuntime.wrap(function _callee8$(_context8) {
                   while (1) switch (_context8.prev = _context8.next) {
                     case 0:
-                      return _context8.abrupt("return", render({
-                        element: appWrapperElement,
-                        loading: false,
-                        container: remountContainer
-                      }, 'mounted'));
+                      return _context8.abrupt("return", () => {
+                        console.log(initialContainer, remountContainer)
+                        //修改3
+                        console.log("qiankun-loader-mounted", getContainer(initialContainer).firstChild)
+                        if (!getContainer(remountContainer).firstChild) {
+                          render({
+                            element: appWrapperElement,
+                            loading: false,
+                            container: remountContainer
+                          }, 'mounted')
+                        }
+                      });
                     case 1:
                     case "end":
                       return _context8.stop();
@@ -554,15 +571,17 @@ function _loadApp() {
                 return _regeneratorRuntime.wrap(function _callee15$(_context15) {
                   while (1) switch (_context15.prev = _context15.next) {
                     case 0:
-                      render({
-                        element: null,
-                        loading: false,
-                        container: remountContainer
-                      }, 'unmounted');
-                      offGlobalStateChange(appInstanceId);
-                      // for gc
-                      appWrapperElement = null;
-                      syncAppWrapperElement2Sandbox(appWrapperElement);
+                      //修改4
+                      console.log('qiankun-loader-unmounted')
+                    // render({
+                    //   element: null,
+                    //   loading: false,
+                    //   container: remountContainer
+                    // }, 'unmounted');
+                    // offGlobalStateChange(appInstanceId);
+                    // // for gc
+                    // appWrapperElement = null;
+                    // syncAppWrapperElement2Sandbox(appWrapperElement);
                     case 4:
                     case "end":
                       return _context15.stop();
diff --git a/node_modules/qiankun/es/sandbox/patchers/dynamicAppend/forStrictSandbox.js b/node_modules/qiankun/es/sandbox/patchers/dynamicAppend/forStrictSandbox.js
index 724a276..1dd3da1 100644
--- a/node_modules/qiankun/es/sandbox/patchers/dynamicAppend/forStrictSandbox.js
+++ b/node_modules/qiankun/es/sandbox/patchers/dynamicAppend/forStrictSandbox.js
@@ -91,8 +91,9 @@ export function patchStrictSandbox(appName, appWrapperGetter, proxy) {
       rebuildCSSRules(dynamicStyleSheetElements, function (stylesheetElement) {
         var appWrapper = appWrapperGetter();
         if (!appWrapper.contains(stylesheetElement)) {
-          var mountDom = stylesheetElement[styleElementTargetSymbol] === 'head' ? getAppWrapperHeadElement(appWrapper) : appWrapper;
-          rawHeadAppendChild.call(mountDom, stylesheetElement);
+          console.log("qiankun-forStrictSandbox")
+          // var mountDom = stylesheetElement[styleElementTargetSymbol] === 'head' ? getAppWrapperHeadElement(appWrapper) : appWrapper;
+          // rawHeadAppendChild.call(mountDom, stylesheetElement);
           return true;
         }
         return false;

多个子应用并行加载，子应用嵌套

同一个基座并行加载两个或者多个子应用

可以使用loadMicroApp加载多个子应用 2. 多路由系统共存带来的冲突/抢占问题如何解决？

let historyPath=window.location.pathname.startWith('/vue1/')?process.env.BASE_URL+'/vue1/':process.env.BASE_URL
const router = createRouter({
    history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? historyPath : process.env.BASE_URL),
    // history: createWebHashHistory(),
    routes: constantRoutes,
})

同时调用start和loadMicroApp会导致子应用render两次，虽然对页面结构和样式没有影响，但是接口都会调用两次，所以在跳出子应用的时候一定要loadMicroApp.unmount()卸载不需要的子应用

qiankun代码入口函数封装

import type { MicroAppStateActions } from 'qiankun';
import QiankunBridge from '@/qiankun/qiankun-bridge'
import {
    initGlobalState,
    registerMicroApps,
    start,
    loadMicroApp,
    addGlobalUncaughtErrorHandler,
    runAfterFirstMounted
} from 'qiankun';
import { getAppStatus, unloadApplication } from 'single-spa';

export default class Qiankun {
    private actions: MicroAppStateActions | null = null
    private appMap: any = {}
    private prefetchAppMap: any = {}
    init() {
        this.registerApps()
        this.initialState()
        this.prefetchApp();
        this.errorHandler();
    }
    registerApps(){
        const parentRoute = useRouter();
        registerMicroApps([{
            name: 'demo-vue',
            entry: `${publicPath}/demo-vue`,
            container: `#demo-vue`,
            activeRule: `${publicPath}${'demo-vue'}`,
            props: {
                parentRoute,
                QiankunBridge:new QiankunBridge()
            }
        }, ...]);
    }
    initialState(){  
        const initialState = {};
        // 初始化 state
        this.actions = initGlobalState(initialState);
        this.actions.onGlobalStateChange((state, prev) => {
            // state: 变更后的状态; prev 变更前的状态
            console.log(state, prev);
        });
    }
    setState(state: any) {
        this.actions?.setGlobalState(state);
    }
    //预加载
    prefetchApp() {
        start({
            prefetch: 'all',
            singular: false,
        });
    }
    //按需加载
    demandLoading(apps){
       let installAppMap = {
          ...store.getters["tabs/installAppMap"],
       };
       if (!installAppMap[config.name]) {
          installAppMap[config.name] = loadMicroApp({
            ...config,
            configuration: {
                // singular: true
                sandbox: { experimentalStyleIsolation: true },
            },
            props: {
                getGlobalState: actions.getGlobalState,
                fn: {
                    parentRoute: useRouter(),
                    qiankunBridge: qiankunBridge,
                },
            },
        });
       }
    }
    /**
     * @description: 卸载app
     * @param {Object} app 卸载微应用name, entry
     * @returns false
     */
    async unloadApp(app) {
        // await clearCatchByUrl(getPrefetchAppList(addVisitedRoute, router)[0])
        const appStatus = getAppStatus('utcus');
        if (appStatus !== 'NOT_LOADED') {
            unloadApplication(app.name);
            // 调用unloadApplication时，Single-spa将执行以下步骤。

            // 在要卸载的注册应用程序上调用卸载生命周期。
            // 将应用程序状态设置为NOT_LOADED
            // 触发重新路由，在此期间，单spa可能会挂载刚刚卸载的应用程序。
            // 由于unloadApplication调用时可能会挂载已注册的应用程序，因此您可以指定是要立即卸载还是要等待直到不再挂载该应用程序。这是通过该waitForUnmount选项完成的。
        }
    }
    //重新加载微应用
    reloadApp(app) {
        this.unloadApp(app).then(() => {
            loadMicroApp(app);
        });
    }
    //加载单个app
    loadSingleApp(name) {
        if (!this.appMap[name]) {
            this.appMap[name] = loadMicroApp(this.prefetchAppMap[name]);
        }
    }
    // 切出单个app，和unloadApp用法不同unloadApp 是卸载start方法生成的应用，unmountSingleApp是卸载loadMicroApp方法生成的应用
    async unmountSingleApp(name) {
        if (this.appMap[name]) {
            await this.appMap[name].unmount();
            this.appMap[name] = null;
        }
    }
    //错误处理
    errorHandler() {
        addGlobalUncaughtErrorHandler((event: any) => {
            console.log('addGlobalUncaughtErrorHandler', event);
            if (
                event?.message &&
                event?.message.includes('died in status LOADING_SOURCE_CODE')
            ) {
                Message('子应用加载失败，请检查应用是否运行', 'error', false);
            }
            //子应用发版更新后，原有的js会找不到，所以会报错
            if (event?.message && event?.message.includes("Unexpected token '<'")) {
                Message('检测到项目更新,请刷新页面', 'error', false);
            }
        });
    }
}

应用事件通信

应用场景：子应用a调用子应用b的事件

const isDuplicate = function isDuplicate(keys: string[], key: string) {
    return keys.includes(key);
};
export default class QiankunBridge {
    private handlerMap: any = {}
    // 单例判断
    static hasInstance = () => !!(window as any).$qiankunBridge
    constructor() {
        if (!QiankunBridge.hasInstance()) {
            ; (window as any).$qiankunBridge = this;
        } else {
            return (window as any).$qiankunBridge;
        }
    }
    //注册
    registerHandlers(handlers: any) {
        const registeredHandlerKeys = Object.keys(this.handlerMap);
        Object.keys(handlers).forEach((key) => {
            const handler = handlers[key];
            if (isDuplicate(registeredHandlerKeys, key)) {
                console.warn(`注册失败,事件 '${key}' 注册已注册`);
            } else {
                this.handlerMap = {
                    ...this.handlerMap,
                    [key]: {
                        key,
                        handler,
                    },
                };
                console.log(`事件 '${key}' 注册成功`);
            }
        });
        return true;
    }
    removeHandlers(handlerKeys: string[]) {
        handlerKeys.forEach((key) => {
            delete this.handlerMap[key];
        });
        return true;
    }
    // 获取某个事件
    getHandler(key: string) {
        const target = this.handlerMap[key];
        const errMsg = `事件 '${key}' 没注册过`;
        if (!target) {
            console.error(errMsg);
        }
        return (
            (target && target.handler) ||
            (() => {
                console.error(errMsg);
            })
        );
    }
}

子应用a注册

import React from "react";
export async function mount(props) {
    if (!instance) {
        React.$qiankunBridge = props.qiankunBridge;
        render(props);
    }
}

React.$qiankunBridge &&
React.$qiankunBridge.registerHandlers({
    event1: event1Fn
});

子应用b调用

Vue.$qiankunBridge.getHandler('event1')

项目部署，提示用户更新系统

插件在注册 serviceWorker 时判断 registration 的 waiting 状态, 从而判定 serviceWorker 是否存在新版本, 再执行对应的更新操作, 也就是弹窗提示; 有个弊端就是项目有可能需要经常发版改一些bug，导致更新弹窗频繁出现，所以只能弃用。

对于主项目简单一点的方案就是把版本号数据写入cookie里，通过webpack生成一个json文件部署到服务器，前端代码请求到json文件的版本号做对比，如果不是最新版就弹窗系统更新弹窗。

子项目更新的话，js，css资源会重新编译生成新的链接，所以请求不到， addGlobalUncaughtErrorHandler监听到资源请求错误，直接提示更新弹窗就好

addGlobalUncaughtErrorHandler((event: any) => {
    //子应用发版更新后，原有的文件会找不到，所以会报错
    if (event?.message && event?.message.includes("Unexpected token '<'")) {
        Message('检测到项目更新,请刷新页面', 'error', false);
    }
});

主应用组件重新渲染导致子应用dom消失

问题出现场景：ipad移动端切到宽屏，布局发生变价，vue组件重新渲染导致微服务里面的dom消失

解决方案：用single-spa的unloadApplication方法卸载子应用，用qiankun的loadMicroApp方法重新加载该子应用

详见上文的 reloadApp方法

切换应用后原有子应用路由变化监听失效

function render(props = {}) {
  const { container } = props
  router=Router() //添加此行代码,react子应用清空下dom重新调用下ReactDOM.render即可
  instance = createApp(App)
  instance
    .use(store)
    .use(router)
    .mount(
      container
        ? container.querySelector('#app-vue')
        : '#app-vue'
    )
  instance.config.globalProperties.$util = util
  instance.config.globalProperties.$echarts = echarts
}