关于javascript:探索微前端的三种技术方案

什么是微前端

首先咱们应该先晓得什么是微服务

微服务是面向服务架构（SOA）的一种变体，把利用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来，具体地，将利用构建成一组小型服务。这些服务都可能独立部署、独立扩大，每个服务都具备巩固的模块边界，甚至容许应用不同的编程语言来编写不同服务，也能够由不同的团队来治理。

那么以微服务来类比，微前端也能够采纳这种架构思维，将一个前端利用拆解成多个微利用，可独立开发、测试、部署，出现给用户的是一个产品，外部原理实则是多个利用的集成或者内聚。

微前端核心思想

每个团队能够依据本人的技术栈来进行开发，各团队之间互不烦扰，节俭团队之间的技术沟通老本
即便各团队应用雷同技术栈，彼此也不应该共享变量和状态
利用前缀的形式来辨别不同我的项目之间CSS、Browser API、Web Event、Cookies 或 Local Storage之间的抵触
应用浏览器事件进行通信，而不是构建一个全局的PubSub零碎。如果你真的须要构建一个跨团队的API，尽量让它简略
即便 JavaScript 失败或尚未执行，Web 应用程序的性能仍应无效。能够应用通用渲染和渐进加强来进步用户的感知性能
微前端有哪些益处
灵活性：技术栈无关，每个微利用能够是不同的技术栈
渐进性：增量降级，便于我的项目扩大和重构
独立性：每个微利用之间状态隔离，运行时状态不共享
敏捷性：独立开发、独立部署，部署完之后主框架主动实现同步更新

微前端的三种实现计划

iframe
multi-page
qiankun

一、iframe

 <iframe width="100%" height="200" src="https://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp&gws_rd=ssl"></iframe>

间接在须要插入的中央，应用iframe将所须要出现的业务页面url插入即可，src的门路能够是以后我的项目也能够是其余我的项目的。这种形式在PC端的成果还算中肯，挪动端出现的成果不佳。iframe的长处是简略易用，没有什么学习老本，毛病也不言而喻，seo不敌对、适配的空间有局限性、可能产生屡次申请产生性能问题。

二、multi-page

以vue-cli搭建的我的项目举例，在multi-page模式下构建利用，每个page应该有一个对应的JavaScript入口文件，咱们把每一个须要松耦合的我的项目当成一个子项目即新创建一个page，并且新增一个相应的入口文件page.main.js，
在vue.config.js文件下做如下配置：

pages: { // 配置多页面入口    index: { // 入口一        entry: 'src/main.js',        template: 'public/index.html'    },    demo: {  // 入口二        entry: 'src/demo/demo.main.js',        template: 'public/demo.html'    }}

如下面代码所示，vue我的项目中配置了两个page，index和demo，对应的有两个main.js入口文件，当然public里也有对应的两个html文件，如图：

应用multi-page的形式实现微前端的思路是，将一个vue我的项目分化成若干不同的子项目，每个我的项目作为一个单页利用
这种计划也没有什么学习老本，只须要依据理论状况创立不同的page
在理论开发中，总体的架构方面是固定的，各个团队在不同的page下独立开发不同的模块，互不影响，团队之间惟一的交加可能是在批改vue.config.js文件的相干配置产生

demo地址

以上是示例成果，存在两个page页面home和demo，从home跳转到demo，也能够从demo跳转回home。依据本人的场景，能够应用window.location.href或者window.location.replace在子利用间做跳转。

三、qiankun

qiankun是蚂蚁金服技术团队基于single-spa开发的微前端框架，整体比拟不便，提供基座利用，只需将各个微利用注册在基座后，便能够实现微前端架构，基座利用的运行不影响微利用，能够独立开发部署。

主利用

在主利用（基座）中注册微利用并启动：

import { registerMicroApps, start } from 'qiankun';registerMicroApps([  {    name: 'reactApp',    entry: '//localhost:3000',    container: '#container',    activeRule: '/app-react',  },  {    name: 'vueApp',    entry: '//localhost:8080',    container: '#container',    activeRule: '/app-vue',  },  {    name: 'angularApp',    entry: '//localhost:4200',    container: '#container',    activeRule: '/app-angular',  },]);// 启动 qiankunstart();

微利用

微利用不须要额定装置任何其余依赖即可接入qiankun主利用，然而要在微利用中做以下两项操作：

1. 导出相应的生命周期钩子

微利用须要在本人的入口 js（如main.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);}

2. 配置微利用的打包工具

const packageName = require('./package.json').name;module.exports = {  output: {    library: `${packageName}-[name]`,    libraryTarget: 'umd',    jsonpFunction: `webpackJsonp_${packageName}`,  },};