微前端-乾坤qiankun

2019-2020年前端最火的技术之一：微前端

微前端究竟是什么？

微前端是近三年前端社区比较火的技术方案，试图把拆分大型后端系统的一些益处引入前端。

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于拆, 拆完后再合!

微前端，即前端微服务。是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。

微前端主要解决的问题：

1）毫无相关的业务，独立部署，降低运维成本。 (独立业务拆离)

2）团队人员逐渐增多，产品功能复杂，代码冲突频繁、影响面大，需独立部署。 （独立模块拆离）

3）在业务中，运行比较稳定，运维不频繁的项目部分，需独立部署。 （稳定业务拆离）

4）架构比较老但运行比较稳定的项目部分，近期不计划重构的，需独立部署。（独立架构拆离）

微前端特点： 独立开发、独立部署、独立运行、增量升级（单个服务升级）。

微前端方案正确的架构姿势：应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合。

Single-spa微前端方案结合了MPA和SPA的优势，可以在单个页面内集成多个应用。

技术栈无关

独立部署每一个单页面应用

新功能使用新框架，旧的单页应用不用重写可以共存

改善初始加载时间，延迟加载代码

 qiankun示例

微前端拆离工具：qiankun

主应用配置：

1.安装乾坤

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

2.注册微服务

I.自动注册

// 在主应用中注册子应用

II.手动注册

import { loadMicroApp } from 'qiankun';

 name跟container需要名称不一致。

3.子应用访问

I.跨域

devServer: {
headers: {// 重点1: 允许跨域访问子应用页面
  ‘Access-Control-Allow-Origin’: ‘http://localhost:7100’,//设置多域名，逗号隔开
},

子应用配置：

I.main.js配置

 

II.路由配置

import '../../public-path'    // 重点3： 引入public-path文件

router里面添加

 

主子应用传参：

主应用：

import { initGlobalState } from "qiankun“

const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

子应用：

export function mount(props) {

props.onGlobalStateChange((state, prev) => {

// state: 变更后的状态; prev 变更前的状态

console.log(state, prev);

});

props.setGlobalState(state);

}