简单聊聊微前端

什么是微前端?

微前端是一种前端架构模式，它将一个庞大的前端应用拆分为多个独立、小型的应用，这些小型应用可以独立开发、独立运行、独立部署，但对用户而言，它们仍然是一个统一的整体。这种架构模式主要是为了解决传统单体应用在大型项目中遇到的问题，如代码冗余、开发效率低下、部署风险高等。

为什么要用微前端？

1. 模块化与解耦：

     微前端强调模块化，每个微应用都是一个独立的模块，这使得代码更加清晰、易于维护。

     通过将前端应用拆分为多个独立的子应用，可以实现业务逻辑的解耦，降低系统的复杂性。

2. 提高开发效率：

     微前端架构允许不同团队并行开发各自的微应用，从而缩短了开发周期。

     由于微应用可以独立部署，因此无需等待其他团队的开发进度，即可快速上线新功能。

3. 降低部署风险：

     在传统的单体应用中，每次部署都涉及整个应用的更新，风险较高。而微前端架构下，每次只需部署更新的微应用，降低了部署的风险和影响范围。

4. 技术栈灵活性：

     微前端架构不限制接入的微应用的技术栈，这意味着团队可以根据自身需求和技术储备选择合适的技术栈进行开发。

     这种灵活性有助于团队尝试新技术、保持技术栈的更新和多样性。

5. 渐进式重构与升级：

     对于遗留系统或大型项目，微前端提供了一种渐进式重构和升级的策略。通过逐个替换或升级微应用，可以逐步实现整个系统的现代化改造。

6. 更好的用户体验：

     微前端架构有助于优化前端性能，如减少首次加载时间、提高页面响应速度等，从而提升用户体验。

     通过动态加载和卸载微应用，可以实现更细粒度的资源管理和优化。

行业解决方案？

1. 基于路由分发的微前端方案：

     这种方案通过配置路由来分发请求到不同的微应用。每个微应用可以独立开发、测试和部署，而在用户看来仍然是内聚的单个产品。此方案的优点包括简单、快速和易配置，但可能在切换应用时触发浏览器刷新，影响体验。

2. 基于iframe的微前端方案：

     iframe作为一种古老的技术，可以轻松地从独立的子页面构建页面，提供天然的隔离性。这种方案的优点是实现简单、技术不限制，但缺点是可能存在Bundle大小各异、SEO不友好、URL状态不同步、DOM结构不共享以及全局上下文完全隔离等问题。

3. 基于Web Components的微前端方案：

     Web Components是浏览器的原生组件，允许创建可重用的用户界面小部件。这种方案的优点包括技术栈无关、独立开发和应用间隔离。然而，由于Web Components的浏览器和框架支持不够广泛，可能需要更多的polyfills，且重写现有的前端应用和系统架构可能较为复杂。

     MicroApp：

       特点：由京东出品，基于WebComponent的思想实现的微前端框架。它轻量、高效，且提供了js沙箱、样式隔离、元素隔离、预加载等一系列完善的功能。

       优势：使用起来成本较低，不需要修改子应用的渲染逻辑或webpack配置，接入微前端成本较低。此外，它无任何依赖，体积小巧，扩展性高。

       适用场景：适合需要快速集成不同技术栈子应用的项目。

4. 基于Module Federation的微前端方案：

     Module Federation是webpack5新增的功能，可以帮助将多个独立的构建组成一个应用程序。这种方案的优点包括开箱即用、独立开发与部署、去中心化和组件共享。但缺点是可能无法提供沙箱隔离、技术单一（仅限使用webpack5以上版本）、代码封闭性高以及拆分粒度需要权衡。

     EMP（Esm Module Federation）：

       特点：基于Webpack 5 Module Federation特性进行二次封装，特别优化了对ESM（ECMAScript Modules）的支持。它允许多个应用共享模块，子应用可以在不重新构建的情况下被主应用加载和使用。

       优势：完全支持ESM模块系统，减少模块解析开销，提高加载效率。相比原生的Module Federation，EMP配置更简便。

       不足：学习曲线存在，虽然配置简化，但依然需要掌握Module Federation的核心概念。此外，技术栈有限制，需要使用Webpack 5，且社区支持相对较少。

5. 中心基座方案（如qiankun等）：

     中心基座方案是目前主流的微前端采用的技术方案之一。

     qiankun：

     基于single-spa进行二次开发，提供了更加开箱即用的API、样式隔离、JS沙箱和资源预加载等功能。这种方案的优点是技术栈无关、易于集成和管理微应用，但可能需要注意沙箱隔离的完善性和性能优化。

     Single-spa：

       特点：Single-spa是最早的微前端框架，它允许多个前端框架应用（如Vue、React、Angular）同时工作在同一个页面上。每个子应用可以使用不同的框架，技术栈灵活。

       优势：提供了依赖共享机制，避免多个应用加载相同的依赖包，且生态完善，有丰富的社区插件和工具支持。

       不足：学习曲线较陡峭，配置较为复杂，需要专门学习，且在同时加载多个子应用时性能可能受影响。

     Garfish：

       特点：字节跳动推出的微前端框架，专注于轻量级和高性能的解决方案。它无需复杂的配置即可使用，适合快速开发，且支持多种前端框架。

       优势：性能优越，适合对速度有要求的项目。同时提供了技术栈无关的支持，灵活性高。

       不足：相对于其他成熟的微前端方案，Garfish的社区支持和文档相对较少，且在某些复杂场景下可能需要额外的开发工作。

6. 自由框架组合模式

 

qiankun

一、概念

qiankun，意为“乾坤”，是阿里巴巴开源的一个微前端框架。它通过HTML Entry的方式接入微应用，使得接入过程像使用iframe一样简单。在qiankun中，主应用负责加载和管理子应用，而子应用则是独立的前端应用，可以独立开发、部署和运行。

二、原理

1. 路由劫持与应用加载：qiankun基于single-spa实现了路由劫持和应用加载。当浏览器的URL发生变化时，qiankun会匹配到相应的子应用并进行加载。
2. 样式隔离：qiankun实现了两种样式隔离方式。一种是严格的样式隔离模式，通过为每个微应用的容器包裹上一个shadow dom节点来实现。另一种是通过动态改写css选择器来实现，类似于css scoped的方式。
3. JS沙箱：qiankun的JS沙箱分为两种实现方式。在主流浏览器中（支持Proxy），使用基于Proxy的多实例沙箱实现。在不支持Proxy的浏览器中，则使用基于diff的沙箱实现。这些沙箱确保了子应用的JS执行环境相互隔离，防止了冲突和污染。
4. 资源预加载：qiankun实现了资源的预加载策略，即在浏览器空闲时间预加载未打开的微应用资源，从而加速微应用的打开速度。
5. 应用间通信：qiankun通过发布订阅模式来实现应用间通信。每个应用在初始化时会生成一套通信方法，用于更改全局状态和注册回调函数。当全局状态发生改变时，会触发各个应用注册的回调函数执行。

三、优缺点

优点：

1. 技术栈无关：qiankun允许任意技术栈的应用接入，无论是React、Vue、Angular还是其他框架，都可以轻松集成。
2. 简单易用：qiankun提供了开箱即用的API和丰富的生命周期函数，使得微前端的开发和管理变得简单高效。
3. 性能优化：通过资源预加载和应用间通信机制，qiankun优化了微应用的加载速度和性能表现。
4. 社区支持：作为阿里巴巴开源的项目，qiankun拥有强大的社区支持和广泛的实践案例。

缺点：

1. 样式隔离的局限性：虽然qiankun实现了样式隔离，但在某些复杂场景下，仍可能出现样式冲突或覆盖的情况。这需要开发者在使用时注意样式的管理和规划。
2. 学习成本：虽然qiankun简化了微前端的开发过程，但对于初次接触微前端的开发者来说，仍需要一定的学习成本来理解和掌握其原理和使用方法。
3. 框架依赖：qiankun是基于single-spa进行封装的，因此在使用qiankun时，也需要对single-spa有一定的了解和认识。这可能会增加一些额外的学习负担。

 

 

实践 - 伪代码

基座

做一套基座的容器 - vue为例

MicroPage 组件页面内容变化的核心区域

<!-- content 微前端 页面内容变化的核心区域 -->
<div class="unusual-container" v-show="loadErrorInfo.isError">
    <!-- 错误兜底页面 -->
    <ErrorPage :subTitle="loadErrorInfo.errorMessage" :status="loadErrorInfo.errorStatus" />
</div>
<!-- 无报错 资源正常加载展示 MICRO_APP_CONTAINER_ID 微前端容器id-->
<div class="micro-view-container" :id="MICRO_APP_CONTAINER_ID" v-show="!loadErrorInfo.isError">
    <template v-for="item in microList" :key="`${item.entryKey}`">
      <div :id="item.container" v-show="showContainer(item.container)" class="microContainer"></div>
    </template>
    <Skeleton active v-show="showContainer('empty')" />
</div>

平台主题容器

<!-- layouts/content 通用的主题header 菜单等 -->
<div :class="[prefixCls, getLayoutContentMode]">
    <div v-show="isShowMicroPage">
      <MicroPage />
    </div>
    <div v-show="!isShowMicroPage">
      <NormalPage />
    </div>
</div>

基座初始化配置

import { loadMicroApp, MicroApp } from 'qiankun'


// 加载并渲染微应用
const mountMicroApp = async () => {
  // store中存了错误信息
  if (isError) {
    return
  }
  // 没有找到entry
  if (!entry) {
    setMicroAppLoadErrorInfo('set错误信息')
    return
  }

  // 加载前预检一级路由是否有权限
  if (!'权限' && !'报错' && !'校验一级路路由是否有权限') {
    setMicroAppLoadErrorInfo('set错误信息')
    return
  }

  // 清空错误信息
  setMicroAppLoadErrorInfo('清空错误信息')
 
 
  if (!microItem) {
    console.log(`没有找到[${entry}]的微应用信息`)
    return
  }
 

  const microAppInstance = loadMicroApp(
    {
      name,
      entry: `${entry}/?__v=${new Date().getTime()}`,
      container: microContainer,
      props: {
        // 跳转到指定路径对应的微应用 - 先存后跳,
        token
        permissionMap,
        userInfo,
        permissionEnum,
        stationOrgList,
        defaultStation,
        homePath,
        // microLogout: 处理登录逻辑的函数,
        microEmitter, // 子工程用来通信的emitter
        logSentryMsg,
        logSentryError,
        logBreadCrumb,
        microDefHttp: defHttp,
        parentWindow: window,
      } as unknown as PassToMicroAppProps,
    },
    {
      excludeAssetFilter: (url) => url.indexOf('.baidu.com') !== -1,

    },
  )

  microAppInstanceMap[entry] = microAppInstance

  await microAppInstance.mountPromise
    .then(() => {
      // 权限校验
    })
    .catch((err) => {
      // ...
    })
}

// 切换显示子应用 容器
const changeContainer = async (entry, immediate) => {
  if (!microItem) {
    console.log(`没有找到[${entry}]的微应用信息`)
    return
  }
}


// 卸载微应用
const unmountMicroApp = async (entry) => {
  if (!'如果store中和变量中都没有微应用实例，则不需要卸载') {
    return
  }

  if (!'上个子工程加载异常不需要卸载') {
    return
  }
  
  // 只有mount成功的app，才执行卸载
  let mounted = true
  await needUnmountApp!.mountPromise.catch(() => (mounted = false))
  if (!mounted) {
    return
  }

  // 卸载失败时打印日志并继续
  
}

// 权限校验
const checkMicroAppPermission = (routePath: string) => {
  if ('如果调试模式开启了，则直接跳过不校验') {
    return
  }
  // 子工程回传的路由列表
  // microLogger.info('校验权限路由实例:', findRouteInstance)

  if ('如果子工程中回传的路由实例有ignoreAuth则不需要检验权限') {
    return
  }
  if (!'路由权限校验') {
    setMicroAppLoadErrorInfo(MicroAppErrorType.PAGE_NOT_ACCESS)
  }
}

// 校验当前路有是否是存在注册列表中的
const checkIsExist = (routePath: string): boolean => {
  if ('如果调试模式开启了，则直接跳过不校验') {
    return true
  }

  if (!'当前路由从已注册的子工程列表中查找不存在') {
    setMicroAppLoadErrorInfo('错误收集')
    return false
  }
  return true
}

watch(
  () => loadErrorInfo.value.isError,
  (isError) => {
    if (isError) {
      // 重置是否是同一个entry ...
      return
    }
    isLocalError = false
  },
)

// 监听路由变更
watch(
  () => currentRoute.value.path,
  async (path: string) => {},
)

// 监听当前微应用的entry变更
watch(
  () => entry,
  async (entry: string) => {},
  { immediate: true },
)

// 监听消息盒子同一路由点击是否需要重新加载微应用
watch(
  () => xxx,
  async (xxx) => {},
)

onMounted(() => {
  console.log('初始化微应用容器', '++++++++++++++++')
  microEmitter.on('xxx', (tab) => {})
})

基座内维护的子应用信息集合

// 下面例子 以 lol、cf、dnf 三款游戏作为三个子应用 举例
export const microBaseConfig = {
  lol: {
    entryKey: 'lol',
    container: 'lolDom',
    entry: {
      dev: '',
      testing: '',
      staging: '',
      prod: '',
    },
  },
  cf: {
    entryKey: 'cf',
    container: 'cfDom',
    entry: {
      dev: '',
      testing: '',
      staging: '',
      prod: '',
    },
  },
  dnf: {
    entryKey: 'dnf',
    container: 'dnfDom',
    entry: {
      dev: '',
      testing: '',
      staging: '',
      prod: '',
    },
  },
}

const microConfigMap: Record<string, MicroConfig> = {}
// 遍历对象的键
Object.keys(microBaseConfig).forEach((key) => {
  const originalItem = microBaseConfig[key]
  // 复制原始对象，避免直接修改
  const newItem: MicroConfig = {
    ...originalItem,
    entryUrl: originalItem.entry[import.meta.env.MODE],
  }
  microConfigMap[key] = newItem
})

export const microConfig = microConfigMap
export const microList: MicroConfig[] = Object.values(microConfigMap)
export const lolEntry = microConfigMap.lol.entryUrl
export const cfEntry = microConfigMap.cf.entryUrl
export const dnfEntry = microConfigMap.dnf.entryUrl


// 在基座注册的子应用路由
/**
 * @description: 游戏首页面板
 */
const gameRoute: MicroAppInfoConfig = {
  name: 'game',
  path: '/game/index',
  entry: lolEntry,
  isMicroApp: true,
  meta: {
    icon: 'home|svg',
    title: '首页',
    groupTitle: '分组标题',
  },
}

/**
 * @description: lol游戏中心
 */
const lolRoute: MicroAppInfoConfig = {
  name: 'lol',
  path: '/lol',
  entry: lolEntry,
  isMicroApp: true,
  meta: {
    icon: 'lolIcon|svg',
    title: 'lol游戏中心',
    groupTitle: '分组标题',
  },
  children: [
    {
      name: 'lol-list',
      path: '/lol/list',
      entry: lolEntry,
      isMicroApp: true,
      meta: {
        title: '英雄列表',
      },
    },
    {
      path: '/lol/add',
      name: 'lol-add',
      entry: lolEntry,
      isMicroApp: true,
      meta: {
        title: '创建英雄',
        hideMenu: true,
        currentActiveMenu: '/lol/list',
      },
    },
  ],
}

/**
 * @description: cf游戏中心
 */
const linkRoute: MicroAppInfoConfig = {
  path: '/cf',
  name: 'cf',
  entry: cfEntry,
  isMicroApp: true,
  meta: {
    icon: 'cf|svg',
    title: 'cf管理',
    groupTitle: '分组标题',
  },
  children: [
    {
      path: '/cf/list',
      name: 'cfList',
      entry: cfEntry,
      isMicroApp: true,
      meta: {
        title: '武器总览库',
      },
    },
    {
      path: '/cf/detail',
      name: 'cfDetail',
      entry: cfEntry,
      isMicroApp: true,
      meta: {
        title: '武器详情',
      },
    },
  ],
}

/**
 * @description: dnf游戏中心
 */
const dnfRoute: MicroAppInfoConfig = {
  path: '/dnf/list',
  name: 'dnf',
  entry: dnfEntry,
  isMicroApp: true,
  meta: {
    hideChildrenInMenu: true,
    icon: 'dnf|svg',
    title: 'dnf发展历史',
    groupTitle: '分组标题',
  },
  children: [
    {
      path: '/dnf/list',
      name: 'dnfList',
      entry: dnfEntry,
      isMicroApp: true,
      meta: {
        title: '发展历史',
        currentActiveMenu: '/history',
      },
    },
    {
      path: '/dnf/detail',
      name: 'dnf-detail',
      entry: dnfEntry,
      isMicroApp: true,
      meta: {
        title: '年况详情',
        currentActiveMenu: '/history',
        hideMenu: true,
      },
    },
  ],
}

子应用代码库 main.js 

import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper'

export const isQianKun = (() => {
  const bool = qiankunWindow.__POWERED_BY_QIANKUN__ || !!qiankunWindow.name
  console.log('isQianKun', bool)
  return bool
})()

// 放到项目顶部
if (isQianKun) {
  window['__webpack_public_path__'] = qiankunWindow.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

// 正常逻辑
async function render() {}

// 初始化qiankun
const initQianKun = () => {
  console.log('initQianKun', '子应用初始化')
  renderWithQiankun({
    // @ts-ignore
    bootstrap(props) {
      console.log('微应用 vehicle：bootstrap', props)
    },
    mount(props: PassToMicroAppProps) {
      console.log('微应用 vehicle：mount', props)
      window.parentWindow = props?.parentWindow
      // 可以通过props读取基座传过来的数据
      // ...
      render(props)
      props.onGlobalStateChange((state: QiankunStore, prev: QiankunStore) => {
        console.log('task子应用onGlobalStateChange改变的state: ', state)
        console.log('task子应用onGlobalStateChange改变的prev: ', prev)
      })
      props.setGlobalState({
        currentMicroAppRoutes: dynamicRoutes,
      })
    },
    unmount(props) {
      console.log('微应用 vehicle：unmount', props)
      app?.unmount()
    },
    update(props) {
      console.log('微应用 vehicle：update', props)
    },
  })
}
isQianKun ? initQianKun() : render()