微前端-qiankun

文章目录

      • 1、概念
      • 2、qiankun
      • 3、使用(vue)
      • 4、主应用和子应用之间通讯
      • 5、运行模式
      • 6、其他问题

官网: https://qiankun.umijs.org/zh/

1、概念

1、微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略;让不同技术栈、框架能独立开发,独立部署子模块,再共同嵌入主模块,形成一个完整的大型 web 应用;

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用不可维护的问题;

2、微前端的特定

技术栈无关:主框架不限制接入应用的技术栈,微应用具备完全自主权;
独立开发、独立部署:微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新;
增量升级:在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略;
独立运行时:每个微应用之间状态隔离,运行时状态不共享;

2、qiankun

qiankun 是一个蚂蚁金融科技提供的基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

1、核心设计理念

简单:qiankun 对于用户而言只是一个类似 jQuery 的库,你需要调用几个 qiankun 的 API 即可完成应用的微前端改造;同时由于 qiankun 的 HTML entry 及沙箱的设计,使得微应用的接入像使用 iframe 一样简单;
解耦/技术栈无关:qiankun 的诸多设计如 HTML entry、沙箱、应用间通信等;这样确保微应用真正具备 独立开发、独立运行 的能力;

2、特点

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

3、使用(vue)

1、安装(主应用+子应用)

npm i qiankun -S

2、在主应用中注册微应用(main.js)

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/activeRule',
  },
]);
start();

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

3、在 src 目录新增 public-path.js(子应用)

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

修改子应用路径,保证静态资源正常显示;

4、导出相应的生命周期钩子(子应用)

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

路由模式建议使用 history;

5、修改打包配置

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

允许开发环境跨域和 umd 打包;

4、主应用和子应用之间通讯

1、本地存储(localStorage/sessionStorage)
因为在 qiankun 中,主应用是通过 fetch 来拉取子应用的模板,然后渲染在主应用的 dom 上的,所以还是运行在同一个域名上,也就是主应用的域名;

2、官方提供的 props

//主应用
import { registerMicroApps, start } from "qiankun";
import router from '@/router'
const apps = [
  {
    name: "App1MicroApp",
    entry: '//localhost:9001',
    container: "#app1",
    activeRule: "/app1",
    props: {
      parentRouter: router
    }
  }
];
registerMicroApps(apps);
start();
//子应用
export async function mount(props) {
  render(props);
}

在主应用 中注册子应用时,将定义好的msg通过props参数传递给子应用;在子应用的 mounted 函数里将接收到的 props 参数内的函数;

3、官方提供的 actions
这种通信方式比较适合业务划分清晰,应用间通信较少的微前端应用场景;

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信,该实例有三个方法,分别是:

setGlobalState:设置 globalState - 设置新的值时,内部将执行 浅检查,如果检查到 globalState 发生改变则触发通知,通知到所有的 观察者 函数。
onGlobalStateChange:注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。
offGlobalStateChange:取消 观察者 函数 - 该实例不再响应 globalState 变化。

//主应用
import { initGlobalState, MicroAppStateActions } from 'qiankun';
// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
//子应用
// 从生命周期 mount 中获取通信方法
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
  });

  props.setGlobalState(state);
}

优点:使用简单、官方支持性高;适合通讯较少的场景;
缺点:

子应用独立运行时,需要额外配置无 Actions 时的逻辑;
子应用需要先了解状态池的细节,再进行通信;
由于状态池无法跟踪,通信场景较多时,容易出现状态混乱、维护困难等问题;

4、使用vuex或redux管理状态,通过shared分享
主应用基于 redux、vuex 维护一个状态池,通过 shared 实例暴露一些方法给子应用使用。同时,子应用需要单独维护一份 shared 实例,在独立运行时使用自身的 shared 实例,在嵌入主应用时使用主应用的 shared 实例,这样就可以保证在使用和表现上的一致性;

// micro-app-main/src/shared/index.ts
import store from "./store";

class Shared {
  /**
   * 获取 Token
   */
  public getToken(): string {
    const state = store.getState();
    return state.token || "";
  }

  /**
   * 设置 Token
   */
  public setToken(token: string): void {
    // 将 token 的值记录在 store 中
    store.dispatch({
      type: "SET_TOKEN",
      payload: token
    });
  }
}

const shared = new Shared();
export default shared;
// micro-app-vue/src/shared/index.js
class Shared {
  /**
   * 获取 Token
   */
  getToken() {
    // 子应用独立运行时,在 localStorage 中获取 token
    return localStorage.getItem("token") || "";
  }

  /**
   * 设置 Token
   */
  setToken(token) {
    // 子应用独立运行时,在 localStorage 中设置 token
    localStorage.setItem("token", token);
  }
}

class SharedModule {
  static shared = new Shared();

  /**
   * 重载 shared
   */
  static overloadShared(shared) {
    SharedModule.shared = shared;
  }

  /**
   * 获取 shared 实例
   */
  static getShared() {
    return SharedModule.shared;
  }
}

export default SharedModule;

5、运行模式

qiankun 有两种运行模式:自动、手动;

官网文档:https://qiankun.umijs.org/zh/api

1、自动:(registerMicroApps + start)注册微应用的基础配置信息。当浏览器 url 发生变化时,会自动检查每一个微应用注册的 activeRule 规则,符合规则的应用将会被自动激活;

registerMicroApps(apps, {
	// 加载子应用前,可以用来加载进度条
    beforeLoad: (app) => console.log('before load', app.name),
    beforeMount: (app) => console.log('before load', app.name),
	// 加载子应用后,可以用来关闭进度条
    afterMount: (app) => console.log('after load', app.name),
    beforeUnmount: [(app) => console.log('before mount', app.name)],
    afterUnmount: [(app) => console.log('before mount', app.name)],
  },
);

apps 是微应用的一些注册信息;

首次load应用,创建子应用实例,渲染;当切到其他子应用后切回,会重新创建新的子应用实例并渲染;之前的子应用实例 qiankun 直接不要了,即使你没有手动销毁实例;所以说,采用这种模式的话一定要在子应用暴露的 unmount 钩子里手动销毁实例,不然就内存泄漏了;

另外,如果子应用使用 keep-alive 来保存状态,那么从子应用1切到子应用2,再切回子应用1,是不会保存状态的;

2、手动:(loadMicroApp)适用于需要手动 加载/卸载 一个微应用的场景;需要能支持主应用手动 update 微应用,需要微应用 entry 再多导出一个 update 钩子;

//子应用
export async function mount(props) {
  renderApp(props);
}
// 微应用中增加 update 钩子以便主应用手动更新微应用
export async function update(props) {
  renderPatch(props);
}
//主应用
componentDidMount() {
    this.microApp = loadMicroApp({
      name: 'app1',
      entry: '//localhost:1234',
      container: '#container',
      props: { brand: 'qiankun' },
    });
  }

loadMicroApp 的策略是每个子应用都有一个唯一的实例ID,reload时会复用之前的实例;

一般情况下使用自动挡就可以了,如果微应用是一个不带路由的可独立运行的业务组件,可以用手动挡来加载这个子应用;

6、其他问题

1、子应用缓存
https://github.com/kuaifengle/qiankun-vue3-tabsPage

你可能感兴趣的:(web开发,前端,前端,开发语言,微前端,qiankun,乾坤)