微前端

1. 微前端如何解决业务场景的痛点，并以 qiankun 为例
2. 微前端的外围实现原理，并手把手实现简略微前端

背景

微前端最早于 2016 年在 Micro-Frontends 被提出，并建⽴了晚期的微前端模型。微前端的命名和能 ⼒和微服务有类似之处，微服务与微前端，都是心愿将某个单⼀的单体应⽤，转化为多个能够独⽴运 ⾏、独⽴开发、独⽴部署、独⽴保护的服务或者应⽤的聚合，从⽽满⾜业务疾速变动及分布式多团队并 ⾏开发的需要。如康威定律 (Conway’s Law) 所⾔，设计零碎的组织，其产⽣的设计和架构等价于组织间 的沟通构造；微服务与微前端不仅仅是技术架构的变动，还蕴含了组织⽅式、沟通⽅式的变动。微服务 课程⼤纲 2 与微前端原理和软件⼯程，⾯向对象设计中的原理同样相通，都是遵循单⼀职责 (Single Responsibility)、关注拆散(Separation of Concerns)、模块化(Modularity) 与分⽽治之 (Divide & Conquer) 等根本的准则。

什么是微前端

一种相似于微服务的架构，是一种由独立交付的多个前端利用组成整体的架构格调，将前端利用合成一些更小、更简略的可能独立开发、测试、部署的利用，而在用户看来依然是内聚的单个产品

古代 web 利用面临的问题

• DX(developer experience)

  • 多个零碎在一个仓库利用中，不同子利用独立 SPA 模式
  • 零碎分为多个仓库，独立上线部署，采纳 MPA 模式(公司采纳这种)

• UX(user experience)

  • 性能体验
  • 页面跳转和用户体验问题

微前端的意义

微前端的次要特点：

• 低耦合：当下前端畛域，单⻚⾯应⽤（SPA）是⾮常流⾏的项⽬状态之⼀，⽽随着工夫的推移以及 应⽤性能的丰盛，单⻚应⽤变得不再单⼀⽽是越来越庞⼤也越来越难以保护，往往是改⼀处⽽动全 身，由此带来的发版老本也越来越⾼。微前端的意义就是将这些庞⼤应⽤进⾏拆分，并随之解耦，每个局部能够独自进⾏保护和部署，晋升效率。
• 不限技术栈：在不少的业务中，或多或少会存在⼀些历史项⽬，这些项⽬⼤多以采⽤⽼框架相似（Backbone.js，Angular.js 1）的 B 端管理系统为主，介于⽇常经营，这些零碎须要联合到新框架 中来使⽤还不能摈弃，对此咱们也没有理由浪费时间和精⼒重写旧的逻辑。⽽微前端能够将这些系 统进⾏整合，在根本不批改来逻辑的同时来同时兼容新⽼两套零碎并⾏运⾏。

微前端的价值

罕用的微前端计划

• qiankun, icestark 本人实现 JS 以及款式隔离
• emp Webpack5 Module Federation (联邦模块)计划
• iframe、WebComponent 等计划

基于 qiankun 的微前端整合

主利用(vue)

• main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {registerMicroApps, start} from 'qiankun';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// 加载微利用
registerMicroApps([{
  name: 'vue app',
  entry: '//localhost:8080/',
  container: '#container',
  activeRule: '/app1',
  props: {slogan: 'Hello Qiankun',},
}]);

start();

微利用 (vue)

• public-path.js

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

• main.js

import './public-path';
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


let instance = null;
function render(props = {}) {const { container} = props;

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

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

export async function bootstrap(props) {// common.setCommonData(props)
  console.log('bootstrap', props)
}

export async function mount(props) {// common.initGlState(props)
  console.log('mount', props)
  render(props);
}

export async function unmount() {instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}