微前端方案

一、微前端是什么
可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。
微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。
几个特性：无技术栈限制、应用单独开发、多应用整合
二、解决的问题
工程越来越大
在老的技术栈之上难以开发
由于项目越来越大，持续集成部署也越来越困难（影响别的代码风险、打包慢等）
优势
优势其实就是解决的问题
将大的工程分隔为独立的子应用
不限技术栈
独立的持续集成交付部署
分类
要实现微前端，本质上就是在运行时远程加载应用。
基座模式：通过搭建基座、配置中心来管理子应用。如基于SIngle Spa的偏通用的乾坤方案，也有基于本身团队业务量身定制的方案。
自组织模式： 通过约定进行互调，但会遇到处理第三方依赖等问题。
去中心模式： 脱离基座模式，每个应用之间都可以彼此分享资源。如基于Webpack 5 Module Federation实现的EMP微前端方案，可以实现多个应用彼此共享资源分享。
三、微前端技术框架对比
经过初筛，选定两种框架，qiankun及micro-app框架
1、qiankun
特点： 蚂蚁出品，基于 single-spa
优点：
基于single-spa封装，提供了更加开箱即用的 API
技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架
HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单
样式隔离，确保微应用之间样式互相不干扰
JS 沙箱，确保微应用之间 全局变量/事件 不冲突
资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度
umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统
不足：
适配成本比较高，工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作；
css 沙箱采用严格隔离会有各种问题，js 沙箱在某些场景下执行性能下降严重；
无法同时激活多个子应用，也不支持子应用保活；
无法支持 vite 等 esmodule 脚本运行；官方没有支持vite的api,需使用vite-plugin-qiankun
地址：https://qiankun.umijs.org/zh/guide
2、micro-app
特点： 京东zero团队， webcomponent + qiankun sandbox 的微前端方案。
优点：
使用 webcomponet 加载子应用相比 single-spa 这种注册监听方案更加优雅；
复用经过大量项目验证过 qiankun 的沙箱机制也使得框架更加可靠；
组件式的 api 更加符合使用习惯，支持子应用保活；
降低子应用改造的成本，提供静态资源预加载能力；
不足：
接入成本较 qiankun 有所降低，但是路由依然存在依赖；
多应用激活后无法保持各子应用的路由状态，刷新后全部丢失；
css 沙箱依然无法绝对的隔离，js 沙箱做全局变量查找缓存，性能有所优化；
支持 vite 运行，但必须使用 plugin 改造子应用，且 js 代码没办法做沙箱隔离；
对于不支持 webcompnent 的浏览器没有做降级处理；
总结：我们现有项目均使用vite框架搭建，mico-app体量较轻，接入成本较低，对子应用侵入性少，改造成本较小，另官方文档清晰，资料详实
，便于我们以较少的成本完成各系统间的集成，又能保证各系统的独立使用。
四、micro-app集成及说明文档
集成方式一：** 基础接入方式 ，路由模式(基座应用history模式，子应用hash模式)**
基座应用：
1、安装依赖

npm i @micro-zoe/micro-app --save

2、在入口处引入

// index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
//注意
microApp.start({
   
  plugins: {
   
    modules: {
   
      'appname-vite': [
        {
   
          loader(code) {
   
            if (process.env.NODE_ENV === 'development') {
   
              // 这里 /basename/ 需要和子应用vite.config.js中base的配置保持一致
              code = code.replace(/(from|import)(\s*['"])(\/child\/vite\/)/g, (all) => {
   
                return all.replace('/child/vite/', 'http://localhost:3100/child/vite/');
              });
            }
            return code;
          },
        },
      ],
    },
  },
});

3、分配一个路由给子应用

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import MyPage from './my-page.vue'

Vue.use(VueRouter)

const routes = [
  {
   
    // 👇 非严格匹配，/my-page/* 都指向 MyPage 页面
    path: '/my-page/*', // vue-router@4.x path的写法为：'/my-page/:page*'
    name: 'my-page',
    component: MyPage,
  },
]

export default routes

4、在MyPage页面中嵌入子应用

<!-- my-page.vue -->
  <template>
  <div>
  <h1>子应用</h1>
  <