微前端

  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 = falsenew 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 = falselet 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;}