devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

探探各个微前端框架

作者：小丑西瓜9 | 2024-04-12 10:55:42

赞

踩

探探各个微前端框架

本文作者为 360 奇舞团前端开发工程师

微前端架构是为了在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。
本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用，如何运行，从而能选出适合自己项目的微前端方案。

iframe

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

  1. url 不同步，浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  2. UI 不同步，DOM 结构不共享，弹窗只能在iframe内部展示，无法覆盖全局

  3. 全局上下文完全隔离，内存变量不共享，iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

  4. 慢，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

single-spa

目前(2024年4月)github star 13k
Single-spa(https://github.com/single-spa/single-spa) 是最早的微前端框架，兼容多种前端技术栈；是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架；
简单来说就是一个聚合，使用这个库可以让你的应用可以 使用多个不同的技术栈（vue、react、angular等等)进行同步开发，最后使用一个公用的路由去实现完美的切换；

实现方案

Single-spa 实现了一套生命周期，开发者需要在相应的时机自己去加载对应的子应用。
它做的事情就是注册子应用、监听 URL 变化，然后加载对应的子应用js，执行对应子应用的生命周期流程。

  1. 提供registerApplication方法，用来注册子应用列表。

  2. 提供了activeWhen，由开发者指定路由满足条件时，激活（挂载）子应用的js、css。

  3. js隔离由single-spa-leaked-globals实现，本质上就是在 mount A 子应用时，正常添加全局变量，比如 jQuery 的 $, lodash 的 _。在 unmount A 子应用时，用一个对象记录之前给 window 添加的全局变量，并把 A 应用里添加 window 的变量都删掉。下一次再 mount A 应用时，把记录的全局变量重新加回来就好了。

  4. css隔离：主应用和子应用之间通过single-spa-css插件提供的css生命周期函数，做到子应用mount时加载css，子应用unmount时将css也unmount掉；而子应用与子应用之间可以通过PostCSSPrefix Selector 给样式自动加前缀的方式，或者Shadow DOM 的形式去解决。

single-spa实战

1. 主应用入口文件：

主要通过single-spa提供的registerApplication方法注册子应用，子应用需要指定加载子应用的方法、和路由条件。

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import { registerApplication, start } from 'single-spa'
  5.  
  6. Vue.config.productionTip = false
  7.  
  8. // 远程加载子应用
  9. function createScript(url) {
  10.   return new Promise((resolve, reject) => {
  11.     const script = document.createElement('script')
  12.     script.src = url
  13.     script.onload = resolve
  14.     script.onerror = reject
  15.     const firstScript = document.getElementsByTagName('script')[0]
  16.     firstScript.parentNode.insertBefore(script, firstScript)
  17.   })
  18. }
  19.  
  20. // 记载函数，返回一个 promise
  21. function loadApp(url, globalVar) {
  22.   // 支持远程加载子应用
  23.   return async () => {
  24.     await createScript(url + '/js/chunk-vendors.js')
  25.     await createScript(url + '/js/app.js')
  26.     // 这里的return很重要，需要从这个全局对象中拿到子应用暴露出来的生命周期函数
  27.     return window[globalVar]
  28.   }
  29. }
  30.  
  31. // 子应用列表
  32. const apps = [
  33.   {
  34.     // 子应用名称
  35.     name: 'app1',
  36.     // 子应用加载函数，是一个promise
  37.     app: loadApp('http://localhost:8081', 'app1'),
  38.     // 当路由满足条件时（返回true），激活（挂载）子应用
  39.     activeWhen: location => location.pathname.startsWith('/app1'),
  40.     // 传递给子应用的对象
  41.     customProps: {}
  42.   },
  43.   {
  44.     name: 'app2',
  45.     app: loadApp('http://localhost:8082', 'app2'),
  46.     activeWhen: location => location.pathname.startsWith('/app2'),
  47.     customProps: {}
  48.   },
  49.   {
  50.     // 子应用名称
  51.     name: 'app3',
  52.     // 子应用加载函数，是一个promise
  53.     app: loadApp('http://localhost:3000', 'app3'),
  54.     // 当路由满足条件时（返回true），激活（挂载）子应用
  55.     activeWhen: location => location.pathname.startsWith('/app3'),
  56.     // 传递给子应用的对象，这个很重要，该配置告诉react子应用自己的容器元素是什么，这块儿和vue子应用的集成不一样，官网并没有说这部分，或者我没找到，是通过看single-spa-react源码知道的
  57.     customProps: {
  58.       domElement: document.getElementById('microApp'),
  59.       // 添加 name 属性是为了兼容自己写的lyn-single-spa，原生的不需要，当然加了也不影响
  60.       name: 'app3'
  61.     }
  62.   }
  63. ]
  64.  
  65. // 注册子应用
  66. for (let i = apps.length - 1; i >= 0; i--) {
  67.   registerApplication(apps[i])
  68. }
  69.  
  70. new Vue({
  71.   router,
  72.   mounted() {
  73.     // 启动
  74.     start()
  75.   },
  76.   render: h => h(App)
  77. }).$mount('#app')
2. 子应用导出文件

  • 子应用需要安装single-spa-react或者single-spa-vue，

  • 将子应用传递给single-spa-react，得到子应用运行的生命周期，

  • 子应用将生命周期导出到全局，

  • 在主应用可以获取子应用的生命周期函数

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css'
  4. import { BrowserRouter, Link, Route } from 'react-router-dom'
  5. import singleSpaReact from 'single-spa-react'
  6.  
  7. // 子应用独立运行
  8. if (!window.singleSpaNavigate) {
  9.   ReactDOM.render(rootComponent(), document.getElementById('root'))
  10. }
  11.  
  12. // 生命周期a
  13. const reactLifecycles = singleSpaReact({
  14.   React,
  15.   ReactDOM,
  16.   rootComponent,
  17.   errorBoundary(err, info, props) {
  18.     return <div>
  19.       This renders when a catastrophic error occurs
  20.     </div>
  21.   }
  22. })
  23.  
  24. // 这里和vue不一样，props必须向下传递
  25. export const bootstrap = async props => {
  26.   console.log('app3 bootstrap');
  27.   return reactLifecycles.bootstrap(props)
  28. }
  29. export const mount = async props => {
  30.   console.log('app3 mount');
  31.   return reactLifecycles.mount(props);
  32. }
  33. export const unmount = async props => {
  34.   console.log('app3 unmount');
  35.   return reactLifecycles.unmount(props)
  36. }
  37.  
  38. // 根组件
  39. function rootComponent() {
  40.   return <React.StrictMode>
  41.     <BrowserRouter>
  42.       <div>
  43.         <Link to="/app3">Home</Link> |
  44.           <Link to="/app3/about"> About</Link>
  45.         <Route exact path="/app3" component={Home} />
  46.         <Route exact path="/app3/about" component={About} />
  47.       </div>
  48.     </BrowserRouter>
  49.   </React.StrictMode>
  50. }
  51.  
  52. // home 组件
  53. function Home() {
  54.   return <div>
  55.     <h1>app3 home page</h1>
  56.   </div>
  57. }
  58.  
  59. // about 组件
  60. function About() {
  61.   return <div>
  62.     <h1>app3 about page</h1>
  63.   </div>
  64. }
3. 打包配置

将子应用导出模式设置为umd

  1. const package = require('./package.json')
  2. module.exports = {
  3.   // 告诉子应用在这个地址加载静态资源，否则会去基座应用的域名下加载
  4.   publicPath: '//localhost:8082',
  5.   // 开发服务器
  6.   devServer: {
  7.     port: 8082
  8.   },
  9.   configureWebpack: {
  10.     // 导出umd格式的包，在全局对象上挂载属性package.name，基座应用需要通过这个全局对象获取一些信息，比如子应用导出的生命周期函数
  11.     output: {
  12.       // library的值在所有子应用中需要唯一
  13.       library: package.name,
  14.       libraryTarget: 'umd'
  15.     }
  16.   }
  17. }
4. 预览

57376769d532b0725dc8ffc24aa0f00c.png
可以看到它是动态加载的子应用的js，并执行js，将内容渲染到了主应用的盒子内。

框架优缺点

优点：

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

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

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

缺点

  • 需要自己去加载子应用

  • 不支持 Javascript 沙箱隔离，需要自己去使用single-spa-leaked-globals之类的库去隔离

  • 不支持css隔离，需要自己使用single-spa-css库或者postcss等去解决样式冲突问题

  • 无法预加载

qiankun

目前(2024年4月) github star 15.4k
阿里的qiankun 是一个基于 single-spa 的微前端实现库，孵化自蚂蚁金融，帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

实现方案

  • single-spa是基于js-entry方案，而qiankun 是基于html-entry 及沙箱设计，使得微应用的接入 像使用 iframe 一样简单。

  • 主应用监听路由，加载对应子应用的html，挂载到主应用的元素内，然后解析子应用的html，从中分析出css、js再去沙盒化后加载执行，最终将子应用的内容渲染出来。

  • qiankun实现样式隔离有两种模式可供开发者选择：

    • strictStyleIsolation： 这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。

    • experimentalStyleIsolation： 当 experimentalStyleIsolation 被设置为 true 时，qiankun 会改写子应用所添加的样式，会为所有样式规则增加一个特殊的选择器规则，来限定其影响范围

  • qiankun实现js隔离，采用了两种沙箱，分别为基于Proxy实现的沙箱和快照沙箱，当浏览器不支持Proxy会降级为快照沙箱

Proxy沙箱机制：
  1. // 伪代码
  2. class ProxySandbox {
  3.     constructor() {
  4.         const rawWindow = window;
  5.         const fakeWindow = {}
  6.         const proxy = new Proxy(fakeWindow, {
  7.             set(target, p, value) {
  8.                 target[p] = value;
  9.                 return true
  10.             },
  11.             get(target, p) {
  12.                 return target[p] || rawWindow[p];
  13.             }
  14.         });
  15.         this.proxy = proxy
  16.     }
  17. }
  18. let sandbox1 = new ProxySandbox();
  19. let sandbox2 = new ProxySandbox();
  20. window.a = 1;
  21. // 伪代码
  22. ((window) => {
  23.     window.a = 'hello';
  24.     console.log(window.a) // hello
  25. })(sandbox1.proxy);
  26. ((window) => {
  27.     window.a = 'world';
  28.     console.log(window.a) // world
  29. })(sandbox2.proxy);
快照沙箱
  1. // 伪代码
  2. class SnapshotSandbox {
  3.     constructor() {
  4.         this.proxy = window; 
  5.         this.modifyPropsMap = {}; // 修改了那些属性
  6.         this.active(); // 调用active保存主应用window快照
  7.     }
  8.  
  9.     /**1. 初始化时，在子应用即将mount前，先调用active，保存当前主应用的window快照*/
  10.     active() {
  11.         this.windowSnapshot = {}; // window对象的快照
  12.         for (const prop in window) {
  13.             if (window.hasOwnProperty(prop)) {
  14.                 // 将window上的属性进行拍照
  15.                 this.windowSnapshot[prop] = window[prop];
  16.             }
  17.         }
  18.         Object.keys(this.modifyPropsMap).forEach(p => {
  19.             window[p] = this.modifyPropsMap[p];
  20.         });
  21.     }
  22.  
  23.     /**
  24.     * 子应用卸载时，遍历当前子应用的window属性，和主应用的window快照做对比
  25.     * 如果不一致，做两步操作 
  26.     *     1. 保存 不一致的window属性，
  27.     *     2. 还原window
  28.     */
  29.     inactive() {
  30.         for (const prop in window) { // diff 差异
  31.             if (window.hasOwnProperty(prop)) {
  32.                 // 将上次拍照的结果和本次window属性做对比
  33.                 if (window[prop] !== this.windowSnapshot[prop]) {
  34.                     // 保存修改后的结果
  35.                     this.modifyPropsMap[prop] = window[prop]; 
  36.                     // 还原window
  37.                     window[prop] = this.windowSnapshot[prop]; 
  38.                 }
  39.             }
  40.         }
  41.     }
  42. }

qiankun实战

1. 主应用入口文件
初始化主应用，并注册子应用

主应用入口文件初始化应用，注册子应用，注册子应用时支持传入子应用列表， 注册子应用时需要指明以下几个主要参数：

  1. name： 微应用的名称，微应用之间必须确保唯一

  2. entry： 子应用的访问链接。主应用会加载整个页面，例如https://qiankun.umijs.org/guide/

  3. container：需要挂载子应用的DOM元素

  4. loader: 子应用未加载时的界面，一般为loading

  5. activeRule： 路由匹配规则

开启子应用start(options)

options.prefetch此时可以选择是否预加载子应用。
options.sandbox默认情况下的沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。qiankun提供了另外两种方式的隔离，供开发者选择：

  • strictStyleIsolation： 当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。

  • experimentalStyleIsolation：当 {experimentalStyleIsolation: true} 被设置，qiankun 会改写子应用所添加的样式为所有样式规则增加一个特殊的选择器规则来限定其影响范围。

  1. import { registerMicroApps, start, initGlobalState } from 'qiankun';
  2.  
  3. registerMicroApps([
  4.   {
  5.     name: 'react app', // app name registered
  6.     entry: '//localhost:7100',
  7.     container: '#yourContainer',
  8.     activeRule: '/yourActiveRule',
  9.   },
  10.   {
  11.     name: 'vue app',
  12.     entry: { scripts: ['//localhost:7100/main.js'] },
  13.     container: '#yourContainer2',
  14.     activeRule: '/yourActiveRule2',
  15.   },
  16. ]);
  17.  
  18. // 通讯
  19. const { onGlobalStateChange, setGlobalState } = initGlobalState({
  20.   user: 'qiankun',
  21. });
  22.  
  23. onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev));
  24.  
  25. setGlobalState({
  26.   ignore: 'master',
  27.   user: {
  28.     name: 'master',
  29.   },
  30. });
  31.  
  32. /**
  33.  * 设置默认进入的子应用
  34.  */
  35. setDefaultMountApp('/react16');
  36.  
  37. /**
  38.  * 启动应用
  39.  */
  40. start({
  41.   prefetch: true, // 预加载子应用
  42.   sandbox:{
  43.      strictStyleIsolation: true, //  shadow dom的方式实现样式隔离
  44.     // experimentalStyleIsolation: true, //添加特殊的选择器的方式实现样式隔离
  45.   }
  46. });
  47.  
  48. runAfterFirstMounted(() => {
  49.   console.log('[MainApp] first app mounted');
  50. });
2. 子应用导出生命周期钩子

子应用需要在自己的入口 js导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import App from './App';
  4. import * as serviceWorker from './serviceWorker';
  5.  
  6. function render(props) {
  7.   const { container } = props;
  8.   ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
  9. }
  10.  
  11. /**
  12. * 和主应用通讯
  13. */
  14. function storeTest(props) {
  15.   props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), true);
  16.   props.setGlobalState({
  17.     ignore: props.name,
  18.     user: {
  19.       name: props.name,
  20.     },
  21.   });
  22. }
  23.  
  24.  
  25. if (!window.__POWERED_BY_QIANKUN__) {
  26.   render({});
  27. }
  28.  
  29. /**
  30.  * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
  31.  * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
  32.  */
  33. export async function bootstrap() {
  34.   console.log('[react16] react app bootstraped');
  35. }
  36.  
  37. /**
  38.  * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
  39.  */
  40. export async function mount(props) {
  41.   console.log('[react16] props from main framework', props);
  42.   storeTest(props);
  43.   render(props);
  44. }
  45.  
  46. /**
  47.  * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
  48.  */
  49. export async function unmount(props) {
  50.   const { container } = props;
  51.   ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
  52. }
3. 配置打包工具：

为了让主应用能正确识别微应用暴露出来的一些全局信息和开发环境下的跨域兼容，在子应用（以create-react-app出来的react项目为例）安装@rescripts/cli，并在子应用目录下新建.rescriptsrc.js，内容如下：

  1. const { name } = require('./package');
  2.  
  3. module.exports = {
  4.   webpack: (config) => {
  5.     config.output.library = `${name}-[name]`;
  6.     config.output.libraryTarget = 'umd'; // 为了能通过window['app-name1']拿到子应用声明的生命周期
  7.     // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
  8.     config.output.jsonpFunction = `webpackJsonp_${name}`; 
  9.     config.output.globalObject = 'window';
  10.  
  11.     return config;
  12.   },
  13.  
  14.   devServer: (_) => {
  15.     const config = _;
  16.  
  17.     config.headers = {
  18.       'Access-Control-Allow-Origin': '*',
  19.     };
  20.     config.historyApiFallback = true;
  21.     config.hot = false;
  22.     config.watchContentBase = false;
  23.     config.liveReload = false;
  24.  
  25.     return config;
  26.   },
  27. };
4. 预览

使用strictStyleIsolation：true方式进行样式隔离，会生成一个shadow dom，进行样式的完全隔离：8a60adfa335fc1f446a625be8614c71b.png

使用experimentalStyleIsolation：true的方式进行样式隔离，会在css选择器前添加特殊标识：
cdbd6ba7c9421e9f1a2b58eba6c892b3.png

可以看到，qiankun会将子应用的html渲染到自定义的container中。 主应用加载的是子应用的html，在解析子应用的html的过程中遇到js和css会载框架内进行沙盒处理，完成css和js的隔离，之后下载并执行，完成整个子应用的渲染过程。

框架优缺点

优点

  • html entry的接入方式，不需要自己写load方法，而是直接写子应用的访问链接就可以。

  • 提供js沙箱

  • 提供样式隔离，两种方式可选

  • 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

  • 社区活跃

  • umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统 除了最后一点拓展以外，微前端想要达到的效果都已经达到。

  • 应用间通信简单，全局注入

  • 路由保持，浏览器刷新、前进、后退，都可以作用到子应用

缺点

  • 改造成本较大，从 webpack、代码、路由等等都要做一系列的适配

  • 对 eval 的争议，eval函数的安全和性能是有一些争议的：MDN的eval介绍；

  • 无法同时激活多个子应用，也不支持子应用保活

  • 无法支持 vite 等 ESM 脚本运行

wujie

目前（2024年4月）github star 3.7k
wujie是腾讯出品。基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等

实现方案

  • 无界利用iframe和webcomponent来搭建天然的js隔离沙箱和css隔离沙箱,

  • 利用iframe的history和主应用的history在同一个top-level browsing context来搭建天然的路由同步机制

  • 支持以fiber的形式执行js，由于子应用的执行会阻塞主应用的渲染线程，当fiber设置为true，那么js执行时采取类似react fiber的模式方式间断执行，每个 js 文件的执行都包裹在requestidlecallback中，每执行一个js可以返回响应外部的输入，但是这个颗粒度是js文件，如果子应用单个js文件过大，可以通过拆包的方式降低达到fiber模式效益最大化

wujie是如何渲染子应用的？

wujie跟qiankun一样，都是基于html entry加载的，但他们解析html的过程是不一样的。 qiankun是直接解析并执行js、css、html的，而wujie则是先解析html，提取出script脚本放入空的iframe中，提取出css、html放入到web components中，具体来说：

  1. 解析入口 HTML ，分别得到script、css、模版html

  2. 创建一个纯净的 iframe，为了实现应用间（iframe 间）通讯，无界子应用 iframe 的 url 会设置为主应用的域名（同域），因此 iframe 的 location.href 并不是子应用的 url。创建好后停止加载iframe。

  3. iframe内插入js，将抽离出来的script脚本，插到iframe中去，在iframe中执行子应用的js

  4. 创建web component，id为子应用id，将抽离出来的html插入。

  5. 由于iframe内的js有可能操作dom，但是iframe内没有dom，随意wujie框架内对iframe拦截document对象，统一将dom指向shadowRoot，此时比如新建元素、弹窗或者冒泡组件就可以正常约束在shadowRoot内部。

wujie实战

wujie接入很简单，主应用可以让开发者以组件的方式加载子应用。子应用只需要做支持跨域请求改造，这个是所有微前端框架运行的前提，除此之外子应用可以不做任何改造就可以在无界框架中运行，不过此时运行的方式是重建模式。 子应用也可以配置保活、生命周期适配进入保活模式或单例模式。

1. 主应用入口文件

与其他框架一样，先配置子应用，

  1. // main-react/index.js
  2. import "react-app-polyfill/stable";
  3. import "react-app-polyfill/ie11";
  4.  
  5. import React from "react";
  6. import ReactDOM from "react-dom";
  7. import WujieReact from "wujie-react";
  8. import "./index.css";
  9. import App from "./App";
  10. import hostMap from "./hostMap";
  11. import credentialsFetch from "./fetch";
  12. import lifecycles from "./lifecycle";
  13. import plugins from "./plugin";
  14.  
  15. const { setupApp, preloadApp, bus } = WujieReact;
  16. const isProduction = process.env.NODE_ENV === "production";
  17. bus.$on("click", (msg) => window.alert(msg));
  18.  
  19. const degrade = window.localStorage.getItem("degrade") === "true" || !window.Proxy || !window.CustomElementRegistry;
  20. /**
  21.  * 大部分业务无需设置 attrs
  22.  * 此处修正 iframe 的 src，是防止github pages csp报错
  23.  * 因为默认是只有 host+port，没有携带路径
  24.  */
  25. const attrs = isProduction ? { src: hostMap("//localhost:7700/") } : {};
  26. /**
  27.  * 配置应用，主要是设置默认配置
  28.  * preloadApp、startApp的配置会基于这个配置做覆盖
  29.  */
  30. setupApp({
  31.   name: "react16",
  32.   url: hostMap("//localhost:7600/"),
  33.   attrs, // 子应用iframe的src
  34.   exec: true, // 预执行
  35.   fetch: credentialsFetch, // 自定义的fetch方法
  36.   plugins,
  37.   /** 子应用短路径替换，路由同步时生效 */
  38.   prefix: { "prefix-dialog": "/dialog", "prefix-location": "/location" },
  39.    /** 子应用采用降级iframe方案 */
  40.   degrade,
  41.   ...lifecycles,
  42. });
  43.  
  44. setupApp({
  45.   name: "vue3",
  46.   url: hostMap("//localhost:7300/"),
  47.   attrs,
  48.   exec: true,
  49.   alive: true, // 子应用保活，state不会丢失
  50.   plugins: [{ cssExcludes: ["https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"] }],
  51.   // 引入了的第三方样式不需要添加credentials
  52.   fetch: (url, options) =>
  53.     url.includes(hostMap("//localhost:7300/")) ? credentialsFetch(url, options) : window.fetch(url, options),
  54.   degrade,
  55.   ...lifecycles,
  56. });
  57.  
  58.  
  59.  
  60. if (window.localStorage.getItem("preload") !== "false") {
  61.   preloadApp({
  62.     name: "react16",
  63.   });
  64.  
  65.   if (window.Proxy) {
  66.     preloadApp({
  67.       name: "vue3",
  68.     });
  69.   }
  70. }
  71.  
  72. ReactDOM.render(<App />, document.getElementById("root"));

引入子应用的地方直接以组件式的方式引入：

  1. import React from "react";
  2. import hostMap from "../hostMap";
  3. import WujieReact from "wujie-react";
  4. import { useNavigate, useLocation } from "react-router-dom";
  5.  
  6. export default function React16() {
  7.   const navigation = useNavigate();
  8.   const location = useLocation();
  9.   const path = location.pathname.replace("/react16-sub", "").replace("/react16", "").replace("/",""); 
  10.   const react16Url = hostMap("//localhost:7600/") + path;
  11.   const props = {
  12.     jump: (name) => {
  13.       navigation(`/${name}`);
  14.     },
  15.   };
  16.   return (
  17.     // 单例模式，name相同则复用一个无界实例，改变url则子应用重新渲染实例到对应路由
  18.     <WujieReact
  19.       width="100%"
  20.       height="100%"
  21.       name="react16"
  22.       url={react16Url}
  23.       sync={!path}
  24.       props={props}
  25.     ></WujieReact>
  26.   );
  27. }
2. 预览

1ed7c75049d924e4f636c5e707473df5.png

框架优缺点

优点

  • 接入简单，可以以组件的方式引入子应用

  • 纯净无污染

    • 无界利用iframe和webcomponent来搭建天然的js隔离沙箱和css隔离沙箱

    • 利用iframe的history和主应用的history在同一个top-level browsing context来搭建天然的路由同步机制

    • 副作用局限在沙箱内部，子应用切换无需任何清理工作，没有额外的切换成本

  • 支持vite esmoudle加载，由于js是独立在iframe中加载的，所以支持esmodule加载

  • 支持预加载

  • 支持应用保活，子应用状态保留，由于是独立在iframe中的，而切换应用时不会移除iframe，所以子应用的状态会被保留在原来的iframe中，当主应用再次渲染子应用dom时，会显示之前的状态。

  • 多应用同时激活在线

缺点

  1. iframe沙箱的src设置了主应用的host，初始化iframe的时候需要等待iframe的location.orign从'about:blank'初始化为主应用的host，这个采用的计时器去等待的不是很优雅。

Micro App

截至目前（2024年4月）github star 5.2k
mirco-app 是京东2021年开源的一款微前端框架。它借助了浏览器对 webComponent 的支持，实现了一套微前端方案体系。并且由于 Shadow Dom 对 react 这类库的兼容性较差，便自己实现了类 Shadow Dom 的效果。与 qiankun 相比，接入更加简单。最新的版本也支持iframe实现js隔离，类似wujie。

实现方案

首先micro-app实现了一个基于WebComponent的组件，并实现了类Shadow Dom 的效果，开发者只需要用<micro-app name="xx" url="xx" baseroute="/xxx/xxx">来加载子应用，整个对子应用的加载、js隔离、css隔离的逻辑都封装在了web component组件<micro-app>中，具体来说：

  1. 当调用microApp.start()后，会注册一个名为micro-app 的自定义 webComponent 标签。我们可以从 <micro-app name='app1' url='xx' baseroute='/my-page'></micro-app> 中拿到子应用的线上入口地址。

  2. <micro-app>组件内部，当匹配到路由后，跟qiankun一样加载html，得到html字符串模版

  3. 分析html字符串，提取<head>头和<body>，并替换为框架自定义标签<micro-app-head>和<micro-app-body>

  4. 在<micro-app-head>内，会对script标签和link标签的内容进行加载并执行

  5. 将<micro-app-head>和<micro-app-body>插入到<micro-app>标签内

  6. <micro-app>内提供了js沙箱方法（v1.0以前跟qiankun沙箱一样），<micro-app-head>挂载到<micro-app>后，内部会逐一对<micro-app-head>内的script标签的js绑定作用域，实现js隔离。

css隔离方案

默认使用正则将CSS字符串切割成最小单元，每个单元包含一段CSS信息，将所有的信息整理生成CSSTree，遍历CSSTree的每个规则，添加前缀实现样式隔离。
c00f65a107112195f3b8d79399d08a35.png

js隔离方案

micro-app有两种方式实现js隔离，默认是跟qiankun一样采用proxy沙箱的方式隔离， 在v1.0发布后支持了基于原生iframe的隔离方式。

Micro App实战

1. 主应用入口文件
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import Router from './router';
  5. import microApp from '@micro-zoe/micro-app'
  6.  
  7. microApp.start()
  8.  
  9. ReactDOM.render(
  10.   <React.StrictMode>
  11.     <Router />
  12.   </React.StrictMode>,
  13.   document.getElementById('root')
  14. );
调用子应用
  1. export function MyPage () {
  2.   return (
  3.     <div>
  4.       <h1>子应用声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。