乐趣区

关于前端:基于single-spa的前端微服务qiankun框架架构理解

jiezi

什么是微服务？
1. 概念 

 微服务是一种架构思维，旨在通过将性能合成到各个离散的服务中以实现对解决方案的解耦。它的次要作用是将性能合成到离散的各个服务当中，从而升高零碎的耦合性，并提供更加灵便的服务反对。

2. 劣势 

 服务独自部署

服务独立业务开发

分布式治理

互相隔离

无关技术栈

3. 劣势 

 性能较差

各服务间的通信繁琐

工程治理的复杂性

微前端
1. 定义 

 微前端是一种相似于微服务的架构，它将微服务的理念利用于浏览器端，行将单页面前端利用由繁多的单体利用转变为多个小型前端利用聚合为一的利用。各个前端利用能够独立开发、独立部署。

2. 前端为什么须要微服务?

2.1 大多数利用中各模块的性能划分清晰，不同页面间的性能根本能够宰割开，相似的性能在不同利用中也经常出现

2.2 对于疾速变动的市场，须要短时间内出 Demo 或产品，而微服务的存在，能够疾速组合利用，应答市场需求

2.3 前端框架层出不穷，版本更是迭代不穷，难免会呈现前端我的项目技术栈不对立、所用框架版本不对立，但却须要联合到新的利用中

常见的微前端框架 / 工具及个性
1.Bit（https://bit.dev）

Bit 能够在构建时高效地组合前端，劣势：“传统单体式前端”的安全性和健壮性，微前端的 简略性 和 可伸缩性

2.FrintJs（https://frint.js.org）

Modular JavaScript framework for building Scalable & Reactive applications.（用于构建可扩大和反应式应用程序的模块化 JavaScript 框架）

3.qiankun（https://qiankun.umijs.org）

 简略 齐备 生产可用

4. 其余（OC、PuzzleJs、Mosaic、Luigi …）

微前端架构模型图

qiankun
1. 设计理念 

 简略：因为主利用微利用都能做到技术栈无关，qiankun 对于用户而言只是一个相似 jQuery 的库，你须要调用几个 qiankun 的 API 即可实现利用的微前端革新。同时因为 qiankun 的 HTML entry 及沙箱的设计，使得微利用的接入像应用 iframe 一样简略。解耦 / 技术栈无关：微前端的外围指标是将巨石利用拆解成若干能够自治的松耦合微利用，而 qiankun 的诸多设计均是秉持这一准则，如 HTML entry、沙箱、利用间通信等。这样能力确保微利用真正具备 独立开发、独立运行的能力。

2. 外围价值 

 技术栈无关

独立开发、独立部署

增量降级

状态隔离

3. 装置 

$ npm i qiankun -S  or  yarn add qiankun

4. 注册微利用 

import {registerMicroApps, start} from‘qiankun’;

registerMicroApps([

    {

        name: 'react app',

        entry: '//localhost:7100',

        container: '#yourContainer',

        activeRule: '/yourActiveRule',

    },

    {

        name: 'vue app',

        entry: '//localhost:7101',

        container:‘#yourContainer2',

        activeRule: '/yourActiveRule2',

    }

]);

start();

4.1.registerMicroApps

    parameters: apps（子利用汇合），lifeCycles（生命周期）lifeCycles：主利用：beforeLoad, before[Un]Mount, after[Un]Mount

        子利用：bootstrap, mount, unmount, update, load, unload

4.2.loadMicroApp

    若微利用不与路有由关联时，用手动加载的形式

    import {loadMicroApp} from‘qiankun’;

    loadMicroApp({

        name: 'app',

        entry:‘//localhost:7100',

        container: '#yourContainer'

    });

4.3. 利用间的通信

    initGlobalState：主利用注册通信机制办法，它的返回值是对象 Object，返回值蕴含三个办法，别离为：onGlobalStateChange，setGlobalState，offGlobalStateChange

    主利用注册了通信办法后，通过初始化传入的数据 initGlobalState({data: Array, token: String})，将该数据传递到子利用，子利用可在其生命周期内的 bootstrap/mount 获取数据，将传递的数据存储到 store 供本身应用，或者通过 setGlobalState 扭转数据值，扭转的数据值将播送传递到所有利用，利用通过 onGlobalStateChange 获取扭转前与改编后的值。onGlobalStateChange: (callback, fireImmediately) => void; 全局依赖监听，每个子利用只有一个激活状态的全局监听，新监听笼罩旧监听全局依赖监听，每个子利用只有一个激活状态的全局监听，新监听笼罩旧监听。setGlobalState: (state) => boolean; 更新 store 数据，会对输出 state 的第一层属性做校验，只有初始化时申明过的第一层属性才会被更改。offGlobalStateChange: () => boolean; delete deps[appInstanceId] 登记该利用下的依赖。

5.Sandbox

 环境沙箱：App 环境沙箱是指利用初始化过之后，利用会在什么样的上下文环境运行。每个利用的环境沙箱只会初始化一次，因为子利用只会触发一次 bootstrap。Render 沙箱：子利用在 app mount 开始前生成好的的沙箱。每次子利用切换过后，render 沙箱都会从新初始化。设计的目标是为了保障每个子利用切换回来之后，还能运行在利用 bootstrap 之后的环境下。创立隔离沙箱的办法：createSandboxContainer(appName, elementGetter, scopedCSS, useLooseSandbox, excludeAssetFilter) => object{instance: sandbox, mount: fn(), unmount: fn()} 

    mount：可从 bootstrap/unmount 进入到 mount

    unmount: 复原 global 状态，回到利用加载之前的状态

配置微利用打包工具
const packageName = require(‘./package.json’).name;

module.exports = {

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

    libraryTarget:‘umd',

    jsonpFunction: `webpackJsonp_${packageName}`,

    filename(‘path/app_name_[hash]_version.js’),

    chunkFilename(‘path/app_name_[hash]_version.js’)

}

};

延长

output.libraryTarget 此配置的作用是管制 webpack 打包的内容是如何裸露的。这个选项须要和 output.library 所绑定的值一起产生作用。
umd 这个选项会把库裸露给应用的模块定义零碎，这使其和 CommonJS、AMD 兼容或裸露为全局变量，行将 library 裸露为所有的模块定义下都可运行的形式。它将在 CommonJS, AMD 环境下运行，或将模块导出到 global 下的变量。

可选值有：assign, window, global, amd, commonjs|2, jsonp 等等。具体配置参考：https://webpack.docschina.org/configuration/output/#outputlibrarytarget

退出移动版