從0實現一個single-spa的前端微服務（下）

沉末_發表於2020-03-09

前言

上一篇文章：從0實現一個single-spa的前端微服務（中）中我們已經實現了single-spa + systemJS的前端微服務以及完善的開發和打包配置，今天主要講一下這個方案存在的細節問題，以及qiankun框架的一些研究對比。

single-spa + systemJs 方案存在的問題及解決辦法

single-spa的三個生命週期函式bootstrap、 mount、 unmount分別表示初始化、載入時、解除安裝時。

子系統匯出bootstrap、mount和unmount函式是必需的，但是unload是可選的。
每個生命週期函式必須返回Promise。
如果匯出一個函式陣列（而不只是一個函式），這些函式將一個接一個地呼叫，等待一個函式的promise解析後再呼叫下一個。

css汙染問題的解決

我們知道，子系統解除安裝之後，其引入的css並不會被刪掉，所以在子系統解除安裝時刪掉這些css，是一種解決css汙染的辦法，但是不太好記錄子系統引入了哪些css。

我們可以藉助換膚的思路來解決css汙染，首先css-scoped解決95%的樣式汙染，然後就是全域性樣式可能會造成汙染，我們只需要將全域性樣式用一個id/class包裹著就可以了，這樣這些全域性樣式僅在這個id/class範圍內生效。

具體做法就是：在子系統載入時(mount)給<body>加一個特殊的id/class，然後在子系統解除安裝時(unmount)刪掉這個id/class。而子系統的全域性樣式都僅在這個id/class範圍內生效，如果子系統獨立執行，只需要在子系統的入口檔案index.html裡面給<body>手動加上這個id/class即可。

程式碼如下：

async function mount(props){
  //給body加class,以解決全域性樣式汙染
  document.body.classList.add('app-vue-history')
}
async function unmount(props){
  //去掉body的class
  document.body.classList.remove('app-vue-history')
}
複製程式碼

js汙染問題的解決

暫時沒有很好的辦法解決，但是可以靠編碼規範來約束：頁面銷燬之前清除自己頁面上的定時器/全域性事件，必要的時候，全域性變數也應該銷燬。

如何實現切換系統更換favicon.ico圖示

這是一個比較常見的需求，類似還有某個系統需要插入一段特殊的js/css，而其他系統不需要，解決辦法任然是在子系統載入時(mount)插入需要的js/css，在子系統解除安裝時(unmount)刪掉。

const headEle = document.querySelector('head');
let linkEle = null ;
// 因為新插入的icon會覆蓋舊的，所以舊的不用刪除，如果需要刪除，可以在unmount時再插入進來
async function mount(props){
  linkEle = document.createElement("link");
  linkEle.setAttribute('rel','icon');
  linkEle.setAttribute('href','https://gold-cdn.xitu.io/favicons/favicon.ico');
  headEle.appendChild(linkEle);
}
async function unmount(props){
  headEle.removeChild(linkEle);
  linkEle = null;
}
複製程式碼

系統之間如何通訊

系統之間通訊一般有兩種方式：自定義事件和本地儲存。如果是兩個系統相互跳轉，可以用URL傳資料。

一般來說，不會同時存在A、B兩個子系統，常見的資料共享就是登陸資訊，登陸資訊一般使用本地儲存記錄。另外一個常見的場景就是子系統修改了使用者資訊，主系統需要重新請求使用者資訊，這個時候一般用自定義事件通訊，自定義事件具體如何操作，可以看上一篇文章的例子。

另外，single-spa的註冊函式registerApplication，第四個引數可以傳遞資料給子系統，但傳遞的資料必須是一個物件。

註冊子系統的時候：

singleSpa.registerApplication(
    'appVueHistory',
    () => System.import('appVueHistory'),
    location => location.pathname.startsWith('/app-vue-history/'),
    { authToken: "d83jD63UdZ6RS6f70D0" }
)
複製程式碼

子系統（appVueHistory）接收資料：

export function mount(props) {
  //官方文件寫的是props.customProps.authToken，實際上發現是props.authToken
  console.log(props.authToken); 
  return vueLifecycles.mount(props);
}
複製程式碼

關於子系統的生命週期函式：

生命週期函式bootstrap,mount，unmount均包含引數props
引數props是一個物件，包含name，singleSpa，mountParcel，customProps 。不同的版本可能略有差異
引數物件中 customProps 就是註冊的時候傳遞過來的引數

子系統如何實現keep-alive

檢視single-spa-vue原始碼可以發現，在unmount生命週期，它將vue例項destroy（銷燬了）並且清空了DOM。所以實現keep-alive的關鍵在於子系統的unmount週期中不銷燬vue例項並且不清空DOM，採用display:none來隱藏子系統。而在mount週期，先判斷子系統是否存在，如果存在，則去掉其display:none即可。

我們需要修改single-spa-vue的部分原始碼：

function mount(opts, mountedInstances, props) {
  let instance = mountedInstances[props.name];
  return Promise.resolve().then(() => {
    //先判斷是否已載入，如果是，則直接將其顯示出來
    if(!instance){
      //這裡面都是其原始碼，生成DOM並例項化vue的部分
      instance = {};
      const appOptions = { ...opts.appOptions };
      if (props.domElement && !appOptions.el) {
        appOptions.el = props.domElement;
      }
      let domEl;
      if (appOptions.el) {
        if (typeof appOptions.el === "string") {
          domEl = document.querySelector(appOptions.el);
          if (!domEl) {
            throw Error(
              `If appOptions.el is provided to single-spa-vue, the dom element must exist in the dom. Was provided as ${appOptions.el}`
            );
          }
        } else {
          domEl = appOptions.el;
        }
      } else {
        const htmlId = `single-spa-application:${props.name}`;
        // CSS.escape的文件（需考慮相容性）：https://developer.mozilla.org/zh-CN/docs/Web/API/CSS/escape
        appOptions.el = `#${CSS.escape(htmlId)}`;
        domEl = document.getElementById(htmlId);
        if (!domEl) {
          domEl = document.createElement("div");
          domEl.id = htmlId;
          document.body.appendChild(domEl);
        }
      }
      appOptions.el = appOptions.el + " .single-spa-container";
      // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
      // We want domEl to stick around and not be replaced. So we tell Vue to mount
      // into a container div inside of the main domEl
      if (!domEl.querySelector(".single-spa-container")) {
        const singleSpaContainer = document.createElement("div");
        singleSpaContainer.className = "single-spa-container";
        domEl.appendChild(singleSpaContainer);
      }
      instance.domEl = domEl;
      if (!appOptions.render && !appOptions.template && opts.rootComponent) {
        appOptions.render = h => h(opts.rootComponent);
      }
      if (!appOptions.data) {
        appOptions.data = {};
      }
      appOptions.data = { ...appOptions.data, ...props };
      instance.vueInstance = new opts.Vue(appOptions);
      if (instance.vueInstance.bind) {
        instance.vueInstance = instance.vueInstance.bind(instance.vueInstance);
      }
      mountedInstances[props.name] = instance;
    }else{
      instance.vueInstance.$el.style.display = "block";
    }
    return instance.vueInstance;
  });
}
function unmount(opts, mountedInstances, props) {
  return Promise.resolve().then(() => {
    const instance = mountedInstances[props.name];
    instance.vueInstance.$el.style.display = "none";
  });
}
複製程式碼

而子系統內部頁面則和正常vue系統一樣使用<keep-alive>標籤來實現快取。

如何實現子系統的預請求(預載入)

vue-router路由配置的時候可以使用按需載入（程式碼如下），按需載入之後路由檔案就會單獨打包成一個js和css。

path: "/about",
name: "about",
component: () => import( "../views/About.vue")
複製程式碼

而 vue-cli3生成的模板打包後的index.html中是有使用prefetch和preload來實現路由檔案的預請求的：

<link href=/js/about.js rel=prefetch>
<link href=/js/app.js rel=preload as=script>
複製程式碼

prefetch預請求就是：瀏覽器網路空閒的時候請求並快取檔案

systemJs只能拿到入口檔案，其他的路由檔案是按需載入的，無法實現預請求。但是如果你沒有使用路由的按需載入，則所有路由檔案都打包到一個檔案(app.js)，則可以實現預請求。

上述完整demo檔案地址：github.com/gongshun/si…

qiankun框架

qiankun是螞蟻金服開源的基於single-spa的一個前端微服務框架。

js沙箱（sandbox）是如何實現的

我們知道所有的全域性的方法（alert，setTimeout，isNaN等）、全域性的變/常量（NaN，Infinity，var宣告的全域性變數等）和全域性物件（Array，String，Date等）都屬於window物件，而能導致js汙染的也就是這些全域性的方法和物件。

所以qiankun解決js汙染的辦法是：在子系統載入之前對window物件做一個快照（拷貝），然後在子系統解除安裝的時候恢復這個快照，即可以保證每次子系統執行的時候都是一個全新的window物件環境。

那麼如何監測window物件的變化呢，直接將window物件進行一下深拷貝，然後深度對比各個屬性顯然可行性不高，qiankun框架採用的是ES6新特性，proxy代理方法。

具體程式碼如下(原始碼是ts版的，我簡化修改了一些)：

// 沙箱期間新增的全域性變數
const addedPropsMapInSandbox = new Map();
// 沙箱期間更新的全域性變數
const modifiedPropsOriginalValueMapInSandbox = new Map();
// 持續記錄更新的(新增和修改的)全域性變數的 map，用於在任意時刻做 snapshot
const currentUpdatedPropsValueMap = new Map();
const boundValueSymbol = Symbol('bound value');
const rawWindow = window;
const fakeWindow = Object.create(null);
const sandbox = new Proxy(fakeWindow, {
    set(target, propKey, value) {
      if (!rawWindow.hasOwnProperty(propKey)) {
        addedPropsMapInSandbox.set(propKey, value);
      } else if (!modifiedPropsOriginalValueMapInSandbox.has(propKey)) {
        // 如果當前 window 物件存在該屬性，且 record map 中未記錄過，則記錄該屬性初始值
        const originalValue = rawWindow[propKey];
        modifiedPropsOriginalValueMapInSandbox.set(propKey, originalValue);
      }
      currentUpdatedPropsValueMap.set(propKey, value);
      // 必須重新設定 window 物件保證下次 get 時能拿到已更新的資料
      rawWindow[propKey] = value;
      // 在 strict-mode 下，Proxy 的 handler.set 返回 false 會丟擲 TypeError，在沙箱解除安裝的情況下應該忽略錯誤
      return true;
    },
    get(target, propKey) {
      if (propKey === 'top' || propKey === 'window' || propKey === 'self') {
        return sandbox;
      }
      const value = rawWindow[propKey];
      // isConstructablev :監測函式是否是建構函式
      if (typeof value === 'function' && !isConstructable(value)) {
        if (value[boundValueSymbol]) {
          return value[boundValueSymbol];
        }
        const boundValue = value.bind(rawWindow);
        Object.keys(value).forEach(key => (boundValue[key] = value[key]));
        Object.defineProperty(value, boundValueSymbol, { enumerable: false, value: boundValue });
        return boundValue;
      }
      return value;
    },
    has(target, propKey) {
      return propKey in rawWindow;
    },
});
複製程式碼

大致原理就是記錄window物件在子系統執行期間新增、修改和刪除的屬性和方法，然後會在子系統解除安裝的時候復原這些操作。

這樣處理之後，全域性變數可以直接復原，但是事件監聽和定時器需要特殊處理：用addEventListener新增的事件，需要用removeEventListener方法來移除，定時器也需要特殊函式才能清除。所以它重寫了事件繫結/解綁和定時器相關函式。

重寫定時器(setInterval)部分程式碼如下：

const rawWindowInterval = window.setInterval;
const hijack = function () {
  const timerIds = [];
  window.setInterval = (...args) => {
    const intervalId = rawWindowInterval(...args);
    intervalIds.push(intervalId);
    return intervalId;
  };
  return function free() {
    window.setInterval = rawWindowInterval;
    intervalIds.forEach(id => {
      window.clearInterval(id);
    });
  };
}

複製程式碼

由於qiankun在js沙箱功能中使用了proxy新特性，所以它的相容性和vue3一樣，不支援IE11及以下版本的IE。不過作者說可以嘗試禁用沙箱功能來提高相容性，但是不保證都能執行。去掉了js沙箱功能，就變得索然無味了。

css汙染他是如何解決的

它解決css汙染的辦法是：在子系統解除安裝的時候，將子系統引入css使用的<link>、<style>標籤移除掉。移除的辦法是重寫<head>標籤的appendChild方法，辦法類似定時器的重寫。

子系統載入時，會將所需要的js/css檔案插入到<head>標籤，而重寫的appendChild方法會記錄所插入的標籤，然後子系統解除安裝的時候，會移除這些標籤。

預請求是如何實現的

解決子系統預請求的的根本在於，我們需要知道子系統有哪些js/css需要載入，而藉助systemJs載入子系統，只知道子系統的入口檔案(app.js)。qiankun不僅支援app.js作為入口檔案，還支援index.html作為入口檔案，它會用正則匹配出index.html裡面的js/css標籤，然後實現預請求。

網路不好和移動端訪問的時候，qiankun不會進行預請求，移動端大多是使用資料流量，預請求則會浪費使用者流量，判斷程式碼如下：

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const isSlowNetwork = navigator.connection
  ? navigator.connection.saveData || /(2|3)g/.test(navigator.connection.effectiveType)
  : false;
複製程式碼

請求js/css檔案它採用的是fetch請求，如果瀏覽器不支援，還需要polyfill。

以下程式碼就是它請求js並進行快取：

const defaultFetch = window.fetch.bind(window);
//scripts是用正則匹配到的script標籤
function getExternalScripts(scripts, fetch = defaultFetch) {
    return Promise.all(scripts.map(script => {
	if (script.startsWith('<')) {
	    // 內聯js程式碼塊
	    return getInlineCode(script);
	} else {
	    // 外鏈js
	    return scriptCache[script] ||
	           (scriptCache[script] = fetch(script).then(response => response.text()));
	}
    }));
}
複製程式碼

用qianklun框架實現微前端

qiankun的原始碼中已經給出了使用示例，使用起來也非常簡單好用。接下來我演示下如何從0開始用qianklun框架實現微前端，內容改編自官方使用示例。

主專案main

vue-cli3生成一個全新的vue專案，注意路由使用history模式。
安裝qiankun框架：npm i qiankun -S
修改app.vue,使其成為選單和子專案的容器。其中兩個資料，loading就是載入的狀態，而content則是子系統生成的HTML片段（子系統獨立執行時，這個HTML片段會被插入到#app裡面的）

<template>
  <div id="app">
    <header>
      <router-link to="/app-vue-hash/">app-vue-hash</router-link>
      <router-link to="/app-vue-history/">app-vue-history</router-link>
    </header>
    <div v-if="loading" class="loading">loading</div>
    <div class="appContainer" v-html="content">content</div>
  </div>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    },
  },
}
</script>
複製程式碼

修改main.js，註冊子專案，子專案入口檔案採用index.html

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerMicroApps, start } from 'qiankun';
Vue.config.productionTip = false
let app = null;
function render({ appContent, loading }) {
  if (!app) {
    app = new Vue({
      el: '#container',
      router,
      data() {
        return {
          content: appContent,
          loading,
        };
      },
      render(h){
        return h(App, {
          props: {
            content: this.content,
            loading: this.loading,
          },
        })
      } 
    });
  } else {
    app.content = appContent;
    app.loading = loading;
  }
}
function initApp() {
  render({ appContent: '', loading: false });
}
initApp();
function genActiveRule(routerPrefix) {
  return location => location.pathname.startsWith(routerPrefix);
}
registerMicroApps([
  { name: 'app-vue-hash', entry: 'http://localhost:80', render, activeRule: genActiveRule('/app-vue-hash') },
  { name: 'app-vue-history', entry: 'http://localhost:1314', render, activeRule: genActiveRule('/app-vue-history') },
]);
start();
複製程式碼

注意：主專案中的index.html模板裡面的<div id="app"></div>需要改為<div id="container"></div>

子專案app-vue-hash

vue-cli3生成一個全新的vue專案，注意路由使用hash模式。
在src目錄新增檔案public-path.js，注意用於修改子專案的publicPath。

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
複製程式碼

修改main.js，配合主專案匯出single-spa需要的三個生命週期。注意：路由例項化需要在main.js裡面完成，以便於路由的銷燬，所以路由檔案只需要匯出路由配置即可（原模板匯出的是路由例項）

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;
let router = null;
let instance = null;
function render() {
  router = new VueRouter({
    routes,
  });
  instance = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount('#appVueHash');// index.html 裡面的 id 需要改成 appVueHash，否則子專案無法獨立執行
}
if (!window.__POWERED_BY_QIANKUN__) {//全域性變數來判斷環境
  render();
}
export async function bootstrap() {
  console.log('vue app bootstraped');
}
export async function mount(props) {
  console.log('props from main framework', props);
  render();
}
export async function unmount() {
  instance.$destroy();
  instance = null;
  router = null;
}
複製程式碼

修改打包配置檔案vue.config.js ，主要是允許跨域、關閉熱更新、去掉檔案的hash值、以及打包成umd格式

const path = require('path');
const { name } = require('./package');
function resolve(dir) {
  return path.join(__dirname, dir);
}
const port = 7101; // dev port
module.exports = {
  filenameHashing: true,
  devServer: {
    hot: true,
    disableHostCheck: true,
    port,
    overlay: {
      warnings: false,
      errors: true,
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  // 自定義webpack配置
  configureWebpack: {
    output: {
      // 把子應用打包成 umd 庫格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

複製程式碼

子專案app-vue-history

history模式的vue專案與hash模式只有一個地方不同，其他的一模一樣。

即main.js裡面路由例項化的時候需要加入條件判斷，注入路由字首

function render() {
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue-history' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount('#appVueHistory');
}
複製程式碼

其他

如果想關閉js沙箱和預請求，在start函式中配置即可

start({
    prefetch: false, //預設是true，可選'all'
    jsSandbox: false, //預設是true
})
複製程式碼

子專案註冊函式registerMicroApps也可以傳遞資料給子專案，並且可以設定全域性的生命週期函式

// 其中app物件的props屬性就是傳遞給子專案的資料，預設是空物件
registerMicroApps(
  [
    { name: 'app-vue-hash', entry: 'http://localhost:80', render, activeRule: genActiveRule('/app-vue-hash') , props: { data : 'message' } },
    { name: 'app-vue-history', entry: 'http://localhost:1314', render, activeRule: genActiveRule('/app-vue-history') },
  ],
  {
    beforeLoad: [
      app => { console.log('before load', app); },
    ],
    beforeMount: [
      app => { console.log('before mount', app); },
    ],
    afterUnmount: [
      app => { console.log('after unload', app); },
    ],
  },
);
複製程式碼

qiankun的官方文件:qiankun.umijs.org/zh/api/#reg…
上述demo的完整程式碼github.com/gongshun/qi…

總結

js沙箱並不能解決所有的js汙染，例如我給<body>新增了一個點選事件，js沙箱並不能消除它的影響，所以說，還得靠程式碼規範和自己自覺。
拋開相容性，我覺得qiankun真的太好用了，無需對子專案做過多的修改，開箱即用。也不需要對子專案的開發部署做任何額外的操作。
qiankun框架使用index.html作為子專案的入口，會將裡面的style/link/script標籤以及註釋程式碼解析並插入，但是他沒有考慮meta和title標籤，如果切換系統，其中meta標籤有變化，則不會解析並插入，當然了，meta標籤不影響頁面展示，這樣的場景並不多。而切換系統，修改頁面的title，則需要通過全域性鉤子函式來實現。
qiankun框架不好實現keep-alive需求，因為解決css/js汙染的辦法就是刪除子系統插入的標籤和劫持window物件，解除安裝時還原成子系統載入前的樣子，這與keep-alive相悖：keep-alive要求保留這些，僅僅是樣式上的隱藏。

最後，有什麼問題或者錯誤歡迎指出，互相成長，感謝！

從0實現一個single-spa的前端微服務（中）
2020-01-15
前端微服務
從0實現一個前端微服務（上）
2020-01-13
前端微服務
從0實現一個webpack loader
2019-05-02
Web
前端單頁應用微服務化解決方案2 - Single-SPA
2018-09-18
前端微服務
從0到1實現一個模組間通訊的服務元件
2019-05-06
元件
一個知名網站的微服務架構最佳實現
2019-06-17
網站微服務架構
從0搭建一個實用的MVVM框架
2022-03-18
MVVM框架
【深入理解Go】從0到1實現一個validator
2021-10-03
Go
從0到1實現一個簡單計算器
2021-02-06
Serverless 下的微服務實踐
2021-11-18
Server微服務
【深入理解Go】從0到1實現一個filter（middleware）
2021-09-30
GoFilter
從程式碼到部署微服務實戰（一）
2021-01-10
微服務
微前端框架之 single-spa 從入門到精通
2022-01-24
前端框架
Knative 實戰：一個微服務應用的部署
2019-11-14
微服務
Eureka實現微服務的呼叫
2018-09-10
微服務
零基礎入門gRPC：從 0 實現一個Hello World
2024-11-22
RPC
eBay推出首個微服務架構下可實現ACID的分散式事務協議：GRIT
2019-10-29
微服務架構分散式協議
webpack4.X 實戰（二）：從0開始搭建一個簡單的前端專案
2019-02-26
Web前端
從SpringCloud看一個微服務框架的「五臟六腑」
2018-11-08
SpringGCCloud微服務框架
Go語言之從0到1實現一個簡單的Redis連線池
2019-07-02
GoRedis
3個註解，優雅的實現微服務鑑權
2022-05-31
微服務
Eureka-實現微服務的呼叫
2019-03-19
微服務
Spring Cloud之微服務之間相互呼叫、如何讓一個微服務呼叫另外一個微服務
2019-05-30
SpringCloud微服務
小白入門微服務(0) - 什麼是微服務
2018-09-08
微服務
從0到1實現Promise
2018-09-28
Promise
從 Spring Cloud 看一個微服務框架的「五臟六腑」
2019-01-25
SpringCloud微服務框架
從 0 打造一個 React 的 TS 模板
2019-02-01
React
如何實現一個前端對話
2024-05-03
前端
實現微服務預熱呼叫之後再開始服務(下)
2022-01-02
微服務
有效的微服務：10 個最佳實踐
2020-01-13
微服務
教程|使用Istio實現一個Service Mesh以簡化微服務間的通訊模式
2018-09-05
微服務模式
怎麼實現微服務的實時效能分析?
2019-02-01
微服務
如何在一分鐘內實現微服務系統下的架構視覺化
2018-12-05
微服務架構視覺化
網頁上的微服務—微前端架構實踐
2021-06-09
網頁微服務前端架構
從0開始學微服務-胡忠想-極客時間
2019-04-26
微服務
手把手從0到1實現一個web工程通用腳手架工具
2021-10-18
Web
微前端 Micro-Frontends - Single-SPA
2020-11-07
前端
從零實現一個 Webpack Plugin
2019-04-29
WebPlugin