微前端架构

微前端特征

一、什么是微前端

Techniques, strategies and recipes for building a modern web appwith multiple teamsthat can ship features independently. -- Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端的概念出现于2016年末，其将微服务的概念引入前端世界。用以解决在需求、人员、技术栈等因素不断更迭下前端工程演变成巨石应用(Frontend Monolith)**而不可维护的问题。这类问题尤其常见于企业级Web项目中。

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用( Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

更多关于微前端的相关介绍，推荐大家可以去看这几篇文章：

• Micro Frontends
• Micro Frontends from martinfowler.com
• 可能是你见过最完善的微前端解决方案
• 微前端的核心价值

二、 qiankun

qiankun 是蚂蚁金服开源的一套完整的微前端解决方案。具体描述可查看 文档和 Github。
链接： https://qiankun.umijs.org/zh/guide是qiankun的说明以及API教程 。

2.1 qiankun 的核心设计理念

🥄 简单

由于主应用微应用都能做到技术栈无关，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计，使得微应用的接入像使用 iframe 一样简单。

🍡 解耦/技术栈无关

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。

2.2 Why Not Iframe

为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。

如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。

其实这个问题之前 这篇也提到过，这里再单独拿出来回顾一下好了。

1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2. UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..
3. 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

其中有的问题比较好解决(问题1)，有的问题我们可以睁一只眼闭一只眼(问题4)，但有的问题我们则很难解决(问题3)甚至无法解决(问题2)，而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题， 最终导致我们舍弃了 iframe 方案。

2.3 特性

• 📦 基于 single-spa封装，提供了更加开箱即用的 API。
• 📱 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• 💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
• 🛡 样式隔离，确保微应用之间样式互相不干扰。
• 🧳 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• ⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
• 🔌 umi 插件，提供了 @umijs/plugin-qiankun供 umi 应用一键切换成微前端架构系统。

2.4 qiankun快速上手

2.4.1 主应用

2.4.1.1 安装 qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2.4.1.2 在主应用中注册微应用

    import  { registerMicroApps, start }  from  'qiankun';

registerMicroApps([

  {

 name:  'react app',  // app name registered

 entry:  '//localhost:7100',

 container:  '#yourContainer',

 activeRule:  '/yourActiveRule',

  },

  {

 name:  'vue app',

 entry:  { scripts:  ['//localhost:7100/main.js']  },

 container:  '#yourContainer2',

 activeRule:  '/yourActiveRule2',

  },

]);

start();

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

如果微应用不是直接跟路由关联的时候，你也可以选择手动加载微应用的方式：

    import  { loadMicroApp }  from  'qiankun';

loadMicroApp(

  {  

 name:  'app',  

 entry:  '//localhost:7100',

 container:  '#yourContainer',  

  }

);

2.4.2 微应用

微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。

2.4.2.1 导出相应的生命周期钩子

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、 mount、 unmount三个生命周期钩子，以供主应用在适当的时机调用。

    /**

 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。

 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。

 */

export  async  function  bootstrap()  {

 console.log('react app bootstraped');

}

/**

 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法

 */

export  async  function  mount(props)  {

 ReactDOM.render(<App  />, props.container ? props.container.querySelector('#root')  : document.getElementById('root'));

}

/**

 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例

 */

export  async  function  unmount(props)  {

 ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root')  : document.getElementById('root'));

}

/**

 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效

 */

export  async  function  update(props)  {

 console.log('update props', props);

}

qiankun 基于 single-spa，所以你可以在 这里找到更多关于微应用生命周期相关的文档说明。

无 webpack 等构建工具的应用接入方式请见 这里。

2.4.2.2 配置微应用的打包工具

除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：

webpack:

    const packageName =  require('./package.json').name;

module.exports  =  {

 output:  {

 library:  `${packageName}-[name]`,

 libraryTarget:  'umd',

 jsonpFunction:  `webpackJsonp_${packageName}`,

  },

};

2.4.3 官方项目实践

参考链接： https://qiankun.umijs.org/zh/guide/tutorial。

三、Vue+qiankun实现案例

首先分别创建我们的 项目基座 和 子项目 在这里我分别创建了 qiankun-base qiankun-vue qiankun-react 三个基础的前端项目，直接用vue 和react的官方脚手架创建即可。
vue create qiankun-base然后 install或者 add qiankun
vue create qiankun-vue
npx create-reacte-app qiankun-react

为了美观 创建结束后 在基座应用中 引用一下 element-ui ，基座的app.vue这里就是简单的配置了一个项目路由的显示。

    <template>
  <div>
    <el-menu :router="true"
             mode="horizontal">
      <!-- 基座内不可以放自己的路由 -->
      <el-menu-item index="/">Home</el-menu-item>
 
      <!-- 引用vue子路由 -->
      <el-menu-item index="/vue">vue应用</el-menu-item>
 
      <!-- 引用react子路由 -->
      <el-menu-item index="/react">react应用</el-menu-item>
    </el-menu>
    <router-view></router-view>
    <div id="vue"></div>
    <div id="react"></div>
  </div>
</template>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
 
#nav {
  padding: 30px;
}
 
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
 
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

然后再main.js中正式注册子项目 详细代码意义 的内容代码里做了注释。

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { registerMicroApps, start } from 'qiankun'
 
// Vue.config.productionTip = false
 
const apps = [
  {
    name: 'vueApp', // 应用名
    entry: 'http://localhost:8081/', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）
    // fetch
    container: '#vue', // 容器
    activeRule: '/vue' // 激活路由
  },
  {
    name: 'reactApp',
    entry: 'http://localhost:8082/', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）
    // fetch
    container: '#react',
    activeRule: '/react'
  }
]
registerMicroApps(apps, {
  // beforeMount()
  // beforeUnmount()
}) //注册app +生命周期
start({
  prefetch: false // 取消预加载
}) // 启动
Vue.use(Elementui)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这里的registerMicroApps 和start 都是qiankun内部的注册方法 我就没有过多的注释详细的内容讲解可以 查看官方的API文档,其中也可以加一些app生命周期的操作,到这里其实基座的准备已经结束了 其实基座的作用就是承接一个子应用的一个挂载 至于内部的样式隔离 js 隔离qiankun在挂载的时候已经做了处理 在这里就不需要我们另外处理了。

接下来我们修改我们的子应用。

main.js。

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
// Vue.config.productionTip = false
 
let instance = null
function render (props) {
  instance = new Vue({
    router,
    //store:[],
    render: h => h(App)
    // props:{}
  }).$mount('#app') // 挂在到自己的HTML中 基座中会拿到这个挂载好的最终html 将其插入
}
 
if (window.__POWERED_BY_QIANKUN__) { // 判断是否为 qiankun挂载 不是的话自行启动挂载
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
} else {
  render();
}
// export const mount = async () => render();
 
// 子组件的渲染
export async function bootstrap (props) { };
 
export async function mount (props) {
  render(props)
};
 
export async function unmount (props) {
  instance.$destroy()
};

这里面有几个变量是qiankun的内置API变量和几个挂载方法，这里的render的判断条件 是为了区分独立运行和注入两种状态。

然后配置我们的vue.config.js。

    module.exports = {
  devServer: {
    port: 8081,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd'
    }
  }
}

设置允许所有人访问 和导出模式，这样我们的vue子应用就配置完成了。

react 其实也是大同小异 但是为了改变react 默认的配置 我们需要安装一个插件 react-app-rewired。

然后改变package.json配置。

    "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

创建 config-overrides.js。

    module.exports = {
  webpack: (config) => {
    config.output.library = 'reactApp'
    config.output.libraryTarget = 'umd'
    config.output.publicPath = '//localhost:8082'
    return config
  },
  devServer: (configFunction) => {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost)
      config.headers = {
        "Access-Control-Allow-Origin": '*'
      }
      return config
    }
  }
}

内容跟vue 基本一致。

修改index.js：

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

function render () {
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
}
if (!window.__POWERED_BY_QIANKUN__) { // 判断是否为 qiankun挂载 不是的话自行启动挂载
 render();
}
// export const mount = async () => render();

// 子组件的渲染
export async function bootstrap (props) { };

export async function mount (props) {
 render(props)
};

export async function unmount (props) {
 ReactDOM.unmountComponentAtNode(document.getElementById('root'))
};

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();

新建一个.env文件配置一下自己的启动端口。

    PORT=8082
WDS_SOCKET_PORT=8082

最后app.js：

    import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Route, Link } from 'react-router-dom'
 
function App () {
  return (
    <BrowserRouter basename="/react">
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Route path="/" exact render={() => (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
          </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
          </a>
          </header>
        </div>
      )}></Route>
      <Route path="/about" exact render={() => (
        <div>about页面</div>
      )}></Route>
    </BrowserRouter>
  );
}
 
export default App;

这样我们的开发步骤基本就结束了。
接下来看成果：