闲庭信步聊前端 – 见微知著微前端

为什么要用微前端

现在，SPA应用已经无法满足现代网页应用的逻辑复杂度和功能的多样性了。试想一个几M的入口文件，在首开时请求无数张图片和css文件，这期间的网络耗时和浏览器渲染时间都早已远远达不到用户预期了。
虽然也出现了诸如懒加载，精灵图，文件压缩，CDN等数不胜数的解决方案，但本质还是隶属于同一个巨石应用，这也导致对应用的任何改动都要重新打包整个项目，即使开启了happypack多线程打包，其工程效率也是不敢恭维。相信有过大型项目维护经验的读者也能体会到那种心在飞而身不动的那种无力感。
另一方面，今年前端技术栈爆炸式增长，早已不是手握jQuery，走遍天下都不怕的时代了。vue已经到了3.0，react的版本更是到了17这个恐怖数字。angular国内虽然用的不多，但是也是三大框架之一，其版本也是早早到了11。即使在各个版本向下兼容的情况下，试问有几个人敢保证项目在基础框架不被时代抛弃的前提下。长期稳定运行。这些人中又有几个人经历过angular2的重写升级和react的hooks重构（虽然react不建议这样）。
所以长远来看，将一个巨石应用拆分成多个小型应用。以达到项目可稳定升级迭代还是很具有可行性的。基本原理的流程如下：

现代应用痛点：

• 项目中的组件和功能模块会越来越多，导致整个项目的打包速度变慢；
• 因为文件夹的数量会随着功能模块的增多而增多，查找代码会变得越来越慢；
• 如果只改动其中一个模块的情况，需要把整个项目重新打包上线；
• 目录层级和模块层级过深而且文件又多，定位文件会越来越慢；
• 所有的项目都只能使用同一技术框架如：react、vue等；

微前端优势：

• 技术栈无关：主框架不限制接入应用的技术栈，微应用完全具备自主权；
• 独立开发、独立部署：微应用的 git 仓库独立，微应用部署完成后父应用打开的页面同步更新；
• 增量升级：在面对各种复杂的场景时，我们通常很难对一个已存在的系统做全量的技术栈升级或者重构，而微前端可以让我们可以做到很好的渐进式重构；
• 独立运行：每个项目都可以作为一个完整的单独项目去运行，它可能只是一个大后台项目中的某个功能模块，然后所有微应用组合到一起就是 PM 想要的完整功能；

微前端技术方案

路由分发式微前端

顾名思义就是通过路由（如 nginx 配置）将不同的业务分发到不同的应用上，这也是采用较多而且做简单的“微前端”方法，但是这种方式其实更像是将多个应用聚合起来了，将不同的前端应用拼凑到一起让他们看起来像是一个整体。

iFrame

iframe 是浏览器提供的一个 html 标签，iframe 元素会创建包含另一个页面的内联框架（即行内框架）。这个标签可以有效的把完成“微前端”，但是如果使用就要考虑两件事情：

1. 应用的加载问题：父应用何时去加载和卸载微应用，在页面切换时使用怎么的效果或者动画让整个页面看起来更加自然更容易接受；
2. 应用的通讯问题：通过 HTMLIFrameElement.contentWindow 去获取 iFrame 元素的 window 对象是一种更简化的方法，但是这就需要定义一套通讯规范：事件的key采用什么形式怎么起名，从什么时候开始监听时间等等问题；

Web Components

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。它主要有三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

• Custom elements：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates：
  和
  元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

微前端框架选择

Mooa

Mooa 是一个为 Angular 服务的微前端框架，它是一个基于 single-spa 的微前端解决方案，但是他的项目服务于 Angular，就直接pass这种框架了，有兴趣的同学可以自行去研究一下。

飞冰

飞冰是一个面向大型系统的微前端解决方案，它可以保证一个系统的操作体验基础上，实现各个微应用的独立开发和发版，通过 icestark 管理微应用的注册和渲染，正整个系统彻底解耦。（这是我们的候选之一）

飞冰的官网地址：https://ice.work/docs/icestark/about

qiankun

qiankun 是一个 single-spa 的微前端实现库，qiankun 的设计理念一个是简单，另一个就是解耦/技术栈无关：

• 简单：由于主应用微应用都能做到技术栈无关，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计，使得微应用的接入像使用 iframe 一样简单；
• 解耦/技术栈无关：微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力；

因为他的介绍和理念就很突出两个字，简单所以他就成为了我们的主角，但是呢还是要经过一番对比的。

qiankun的官网地址：https://qiankun.umijs.org/zh

qiankun与飞冰的对比

下面就列出以下对他们的大概对比，截止至2020-12-03

飞冰

• git：星星数 943；
• js 隔离：沙箱；
• 样式隔离：使用 CSS Modules 方案管理样式；（正常尝试使用 Shadow Dom 的方案）
• 打包相关：强制依赖 ice.js，及应用只能使用 react，打包也要使用ice.js 框架打包；
• 更新周期：1周 ~ 一个月；

qiankun

• git：星星数 7.8k；
• js 隔离：沙箱；
• 样式隔离：Shadow Dom；
• 打包相关：依赖于 qiankun，官方推荐使用 parcel 打包，但是可以使用 webpack；
• 更新周期：1天 ~ 一周；

经过上述的整理和查看后，我们内部决定使用qiankun，原因有很多，因为我们的项目对打包结果有要求，使用 parcel 满足不了我们的要求，所以要用 webpack 来打包自己想要的结果，样式隔离相比较 飞冰 更成熟，星星数高等等。

qiankun实际使用的介绍和问题记录

框架选择完毕后我们就开始搭建项目，搭建了两种不同的父应用（也可称之为基应用），一种是 react 的一种 vue 的。之后用了 demo 提供的微应用做了尝试，然后打算统一下代码最后决定后台项目都是用 react 来写，所以最后切换为 react 项目。
在研究之中得到一个消息，咱们的上线打包结果有限制的，必须要以xxx什么形式的才可以上线，然后还有一堆配置，因为时间紧迫所以只能被迫开始使用公司的搭建的 zz-react-cli 来生成 react 项目，所以最后父应用和微应用都是使用的 zz-react-cli 生成的。（这就是我们内部问题了，就不多介绍了），下面开始给大家介绍使用和遇到的问题以及怎么解决的。

基本项目结构是这样的，包含主子应用，如下图：

qiankun基本使用

项目框架

父应用和微应用都是用 react 官方脚手架生成，然后下面再讲对其修改和配置。

父应用的改造

父应用要安装两个依赖包，一个 history
一个 qiankun
，然后就是对 index.js
的修改：

import { registerMicroApps, start } from 'qiankun';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

registerMicroApps(
  [
    {
      name: 'app1',
      entry:  '//localhost:3002/',
      container: '#container',
      activeRule: '/app1',
      props: {
        name: 'kuitos',
      }
    }
  ],
  {
    beforeLoad: app => console.log('before load', app.name),
    beforeMount: [
      app => console.log('before mount', app.name),
    ],
  },
);

start();

reportWebVitals();

然后就是对 app.jsx
的修改：

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
function App() {
  // 子项的点击
  const onMenuClick = (path) => {
    history.push(path);
  };
return (
    <div className="layout">
      <header className="layout-header">
        <img src={logo} className="layout-logo" alt="logo" />
        <div className="layout-link" onClick={() => { onMenuClick('/app1'); }}>点击加载app1微应用页面