一、前言

隨著項目的發(fā)展，前端SPA應(yīng)用的規(guī)模不斷加大、業(yè)務(wù)代碼耦合、編譯慢，導(dǎo)致日常的維護難度日益增加。同時前端技術(shù)的發(fā)展迅猛，導(dǎo)致功能擴展吃力，重構(gòu)成本高，穩(wěn)定性低。因此前端微服務(wù)應(yīng)運而生。

前端微服務(wù)優(yōu)勢

1.復(fù)雜度可控: 業(yè)務(wù)模塊解耦,避免代碼過大,保持較低的復(fù)雜度,便于維護與開發(fā)效率。

2.獨立部署: 模塊部署,減少模塊影響范圍，單個模塊發(fā)生錯誤,不影響全局，提升項目穩(wěn)定性。

3.技術(shù)選型靈活: 在同一項目下可以使用市面上所有前端技術(shù)棧,也包括未來的前端技術(shù)棧。

4.擴展性，提升業(yè)務(wù)動態(tài)擴展的可能，避免資源浪費

微前端服務(wù)結(jié)構(gòu)

技術(shù)對比和選型：

通過對比多種技術(shù)對項目的支持情況和項目接入的成本，我們最終選型無界。

二、wujie簡單用法（以主應(yīng)用使用vue框架為例）

主應(yīng)用是vue框架可直接使用wujie-vue，react框架可直接使用wujie-react，先安裝對應(yīng)的插件哦

主應(yīng)用改造：

// 引入無界，根據(jù)框架不同版本不同，引入不同的版本
import { setupApp, bus, preloadApp, startApp } from 'wujie-vue2'

// 設(shè)置子應(yīng)用默認參數(shù)
setupApp({
    name: '子應(yīng)用id（唯一值）',
    url: "子應(yīng)用地址",
    exec: true,
    el: "容器",
    sync: true
})

// 預(yù)加載
preloadApp({ name: "唯一id"});

// 啟動子應(yīng)用
startApp({ name: "唯一id"});

子應(yīng)用改造：

1、跨域

子應(yīng)用如果支持跨域，則不用修改

原因：存在請求子應(yīng)用資源跨域

方案：因前端應(yīng)用基本是前后端分離，使用proxy代理。只需配置在子應(yīng)用配置允許跨域即可

// 本地配置
server: {
    host: '127.0.0.1', // 本地啟動如果主子應(yīng)用沒處在同一個ip下，也存在跨域的問題，需要配置
    headers: {
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': '*', // 如資源沒有攜帶 cookie,需設(shè)置此屬性
        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
        'Access-Control-Allow-Methods': '*'
    }
}

// nginx 配置
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Headers 'X-Requested-With,Content-Type';
add_header Access-Control-Allow-Methods "*";

2、運行模式選擇

無界有三種運行模式：單例模式、保活模式、重建模式

（1）、?；钅Ｊ剑ㄩL存頁面）

釋義：類似于vue的keep-alive性質(zhì)（子應(yīng)用實例和webcomponent不銷毀，狀態(tài)、路由都不丟失，只做熱webcomponent的熱插拔），子應(yīng)用不想做生命周期改造，子應(yīng)用切換又不想有白屏?xí)r間，可以采用保活模式。主應(yīng)用上有多個入口跳轉(zhuǎn)到子應(yīng)用的不同頁面，不能采用?；钅Ｊ?，因為無法改變子應(yīng)用路由。

配置：只需要在主應(yīng)用加載子應(yīng)用的時候，配置參數(shù)添加alive：true

效果：預(yù)加載+?；钅Ｊ?頁面數(shù)據(jù)請求和渲染提前完成，實現(xiàn)瞬間打開效果

（2）、單例模式

釋義：子應(yīng)用頁面切走，會調(diào)用window.__WUJIE_UNMOUNT銷毀子應(yīng)用當(dāng)前實例。子應(yīng)用頁面如果切換回來,會調(diào)用window.__WUJIE_MOUNT渲染子應(yīng)用新的子應(yīng)用實例。過程相當(dāng)于：銷毀當(dāng)前應(yīng)用實例 => 同步新路由 => 創(chuàng)建新應(yīng)用實例

配置：只需要在主應(yīng)用加載子應(yīng)用的時候，配置參數(shù)添加alive：false

改造生命周期

// window.__POWERED_BY_WUJIE__用來判斷子應(yīng)用是否在無界的環(huán)境中
if (window.__POWERED_BY_WUJIE__) {
  let instance;
  // 將子應(yīng)用的實例和路由進線創(chuàng)建和掛載
  window.__WUJIE_MOUNT = () => {
    const router = new VueRouter({ routes });
    instance = new Vue({ router, render: (h) => h(App) }).$mount("#app");
  };
   // 實例銷毀
  window.__WUJIE_UNMOUNT = () => {
    instance.$destroy();
  };
} else {
  // 子應(yīng)用單獨啟動
  new Vue({ router: new VueRouter({ routes }), render: (h) => h(App) }).$mount("#app");
}
 

（3）、重建模式

釋義：每次頁面切換銷毀子應(yīng)用webcomponent+js的iframe。

配置：只需要在主應(yīng)用加載子應(yīng)用的時候，配置參數(shù)添加alive：false

無生命周期改造

備注：非webpack打包的老項目，子應(yīng)用切換可能出現(xiàn)白屏，應(yīng)盡可能使用保活模式降低白屏?xí)r間

三、加載模塊（主應(yīng)用配置）

子應(yīng)用基礎(chǔ)信息管理

// subList.js 數(shù)據(jù)可在配置頁面動態(tài)配置
const subList = [
    {
        "name":"subVueApp1",
        "exec":true,// false只會預(yù)加載子應(yīng)用的資源,true時預(yù)執(zhí)行子應(yīng)用代碼
        "alive": true,
        "show":true,// 是否引入
        "url":{
            "pre":"http://xxx1-pre.com",
            "gray":"http://xxx1-gray.com",
            "prod":"http://xxx1.com"
        }
    },
    {
        "name":"subVueApp2",
        "exec":false,// false只會預(yù)加載子應(yīng)用的資源,true時預(yù)執(zhí)行子應(yīng)用代碼
        "alive": false,
        "show":true,// 是否引入
        "url":{
            "pre":"http://xxx2-pre.com",
            "gray":"http://xxx2-gray.com",
            "prod":"http://xxx2.com"
        }
    }
]
export default subList;

// hostMap.js
import subList from './subList'

 const env = process.env.mode || 'pre'

// 子應(yīng)用map結(jié)構(gòu)
const subMap = {}
const subArr = []

// 轉(zhuǎn)換子應(yīng)用
export const hostMap = () => {
    subList.forEach(v => {
        const {url, ...other} = v
        const info = {
            ...other,
            url: url[env]
        }
       subMap[v.name] = info
       subArr.push(info)
    })
   return subArr
}

// 獲取子應(yīng)用配置信息
export const getSubMap = name => {
    return subMap[name].show ? subMap[name] : {}
}

子應(yīng)用注冊預(yù)加載和啟動

// setupApp.js
import WujieVue from 'wujie-vue2';
import {hostMap} from './hostMap';

const { setupApp, preloadApp } = WujieVue 

const setUpApp = Vue => {
    Vue.use(WujieVue)
    hostMap().forEach(v => {
        setupApp(v)
        preloadApp(v.name)
    })
}
export default setUpApp;


// main.js
import Vue from 'vue'
import setUpApp from'@/microConfig/setupApp'
setUpApp(Vue)

配置公共函數(shù)

全子應(yīng)用共享的生命周期函數(shù)，可用于執(zhí)行多個子應(yīng)用間相同的邏輯操作函數(shù)共同處理

// lifecycle.js
const lifecycles = {
  beforeLoad: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeLoad 生命周期`),
  beforeMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeMount 生命周期`),
  afterMount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterMount 生命周期`),
  beforeUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} beforeUnmount 生命周期`),
  afterUnmount: (appWindow) => console.log(`${appWindow.__WUJIE.id} afterUnmount 生命周期`),
  activated: (appWindow) => console.log(`${appWindow.__WUJIE.id} activated 生命周期`),
  deactivated: (appWindow) => console.log(`${appWindow.__WUJIE.id} deactivated 生命周期`),
  loadError: (url, e) => console.log(`${url} 加載失敗`, e),
};

export default lifecycles;


// subCommon.js
// 跳轉(zhuǎn)到主應(yīng)用指定頁面
const toJumpMasterApp = (location, query) => {
    
    this.$router.replace(location, query);
    const url = new URL(window.location.href);
    url.search = query
    // 手動的掛載url查詢參數(shù)
    window.history.replaceState(null, '', url.href);
}
// 跳轉(zhuǎn)到子應(yīng)用的頁面
const toJumpSubApp = (appName, query) => {
   this.$router.push({path: appName}, query)
}
export default {
    toJumpMasterApp,
    toJumpSubApp 
}


// setupApp.js
import lifecycles from './lifecycles';
import subCommon from './subCommon';
const setUpApp = Vue => {
    ....
    hostMap().forEach(v => {
        setupApp({
            ...v,
            ...lifecycles,
            props: subCommon
        })
        preloadApp(v.name)
    })
}

主應(yīng)用加載子應(yīng)用頁面

// 子應(yīng)用頁面加載
// app1.vue
<template>
    <WujieVue
        :key="update"
        width="100%"
        height="100%"
        :name="name"
        :url="appUrl"
        :sync="subVueApp1Info.sync" 
        :alive="subVueApp1Info.alive" 
        :props="{ data: dataProps ,method:{propsMethod}}"
    ></WujieVue>
</template>

<script>
import wujieVue from "wujie-vue2";
import {getSubMap} from '../../hostMap';
const name = 'subVueApp1'
export default {
    data() {
       return {
          dataProps: [],
          subVueApp1Info: getSubMap(name)
       }
    },
    computed: {
      appUrl() {
        // return getSubMap('subVueApp1').url
        return this.subVueApp1Info.url + this.$route.params.path
      }
    },
     watch: {
        // 如果子應(yīng)用是?；钅Ｊ剑梢圆捎猛ㄐ诺姆绞礁嬷酚勺兓?        "$route.params.path": {
          handler: function () {
            wujieVue.bus.$emit("vue-router-change", `/${this.$route.params.path}`);
          },
          immediate: true,
        },
      },
    methods: {
        propsMethod() {}
    }
}
</script>

四、子應(yīng)用配置

無界的插件體系主要是方便用戶在運行時去修改子應(yīng)用代碼從而避免去改動倉庫代碼

// plugins.js
const plugins = {
  'subVueApp1': [{
    htmlLoader:code => {
      return code;
    },
    cssAfterLoaders: [
      // 在加載html所有樣式之后添加一個外聯(lián)樣式
      { src:'https://xxx/xxx.css' },
      // 在加載html所有樣式之后添加一個內(nèi)聯(lián)樣式
      { content:'img{height: 300px}' }
    ],
    jsAfterLoaders: [
      { src:'http://xxx/xxx.js' },
      // 插入一個內(nèi)聯(lián)腳本本
      { content:`
          window.$wujie.bus.$on('routeChange', path => {
          console.log(path, window, self, global, location)
          })`
      },
      // 執(zhí)行一個回調(diào)
      {
        callback(appWindow) {
          console.log(appWindow.__WUJIE.id);
        }
      }
    ]
  }],
  'subVueApp2': [{
    htmlLoader: code=> {
      return code;
    }
  }]
};
export default plugins;

// setupApp.js
import plugins from './plugins';
const setUpApp = Vue => {
    ......
    hostMap().forEach(v => {
        setupApp({
            ...v,
            plugins: plugins[element.name]
        })
        ......
    })
}

五、數(shù)據(jù)傳輸和消息通信

數(shù)據(jù)交互方式

1，通過props進行傳

2、通過window進線傳達

3，通過事件bus進行傳達

props

主應(yīng)用通過data傳參給子應(yīng)用， 子應(yīng)用通過methods方法傳參給主應(yīng)用

// 主應(yīng)用
<WujieVue name="xxx" url="xxx" :props="{ data: xxx, methods: xxx }"></WujieVue>

// 子應(yīng)用
const props = window.$wujie?.props; // {data: xxx, methods: xxx}

window

利用子應(yīng)用運行在主應(yīng)用的iframe

類似iframe的傳參和調(diào)用

// 主應(yīng)用獲取子應(yīng)用的全局變量數(shù)據(jù)
window.document.querySelector("iframe[name=子應(yīng)用id]").contentWindow.xxx;

//子應(yīng)用獲取主應(yīng)用的全局變量數(shù)據(jù)
window.parent.xxx;

eventBus

去中心化的通信方案，方便。類似于組件間的通信

主應(yīng)用

// 使用 wujie-vue
import WujieVue from"wujie-vue";
const{ bus }= WujieVue;

// 主應(yīng)用監(jiān)聽事件
bus.$on("事件名字",function(arg1,arg2, ...){});
// 主應(yīng)用發(fā)送事件
bus.$emit("事件名字", arg1, arg2,...);
// 主應(yīng)用取消事件監(jiān)聽
bus.$off("事件名字",function(arg1,arg2, ...){});

子應(yīng)用

// 子應(yīng)用監(jiān)聽事件
window.$wujie?.bus.$on("事件名字",function(arg1,arg2, ...){});
// 子應(yīng)用發(fā)送事件
window.$wujie?.bus.$emit("事件名字", arg1, arg2,...);
// 子應(yīng)用取消事件監(jiān)聽
window.$wujie?.bus.$off("事件名字",function(arg1,arg2, ...){});

規(guī)范主子應(yīng)用傳遞規(guī)則

規(guī)則：子應(yīng)用名+事件名

主應(yīng)用向子應(yīng)用傳參

// 主應(yīng)用傳參
bus.$emit('matser', options) // 主應(yīng)用向所有子應(yīng)用傳參
bus.$emit('vite:getOptions', options) // 主應(yīng)用向指定子應(yīng)用傳參

//子應(yīng)用監(jiān)聽主應(yīng)用事件
window?.$wujie?.bus.$on("master", (options) => {
  console.log(options)
});
//子應(yīng)用監(jiān)聽主應(yīng)用特定通知子應(yīng)用事件
window?.$wujie?.bus.$on("vite:getOptions", (options) => {
  console.log(options)
});

六、路由

以 vue 主應(yīng)用為例，子應(yīng)用 A 的 name 為 A， 主應(yīng)用 A 頁面的路徑為/pathA，子應(yīng)用 B 的 name 為 B，主應(yīng)用 B 頁面的路徑為/pathB為例

主應(yīng)用統(tǒng)一props傳入跳轉(zhuǎn)函數(shù)

jump (location) {
  this.$router.push(location);
}

1、主應(yīng)用history路由

子應(yīng)用 B 為非?；顟?yīng)用

1、子應(yīng)用A 只能跳轉(zhuǎn)到子應(yīng)用 B 的主應(yīng)用的默認路由

function handleJump(){
   window.$wujie?.props.jump({ path:"/pathB"});
}

2、子應(yīng)用A 只能跳轉(zhuǎn)到子應(yīng)用B 應(yīng)用的指定路由（非默認路由）

// 子應(yīng)用A點擊跳轉(zhuǎn)處理函數(shù), 子應(yīng)用B需開啟路由同步
function handleJump(){
    window.$wujie?.props.jump({ path:"/pathB", query:{ B:"/test"}});
}

子應(yīng)用 B 為?；顟?yīng)用

子應(yīng)用A 只能跳轉(zhuǎn)到子應(yīng)用 B 的主應(yīng)用的路由

可寫入主應(yīng)用的插件中，主應(yīng)用插件根據(jù)不同的應(yīng)用，引入不同方法

// 子應(yīng)用 A 點擊跳轉(zhuǎn)處理函數(shù)
function handleJump() {
  window.$wujie?.bus.$emit("routeChange", "/test");
}

// 子應(yīng)用 B 監(jiān)聽并跳轉(zhuǎn)
window.$wujie?.bus.$on("routeChange", (path) => this.$router.push({ path }));

2、主應(yīng)用hash路由

子應(yīng)用 B 為非?；顟?yīng)用

1、子應(yīng)用A 只能跳轉(zhuǎn)到子應(yīng)用 B 的主應(yīng)用的默認路由

同子應(yīng)用B為非?；顟?yīng)用，子應(yīng)用A跳轉(zhuǎn)到子應(yīng)用 B 的主應(yīng)用的默認路由

2、子應(yīng)用A 只能跳轉(zhuǎn)到子應(yīng)用B 應(yīng)用的指定路由（非默認路由）

主應(yīng)用
jump(location,query){ 
    // 跳轉(zhuǎn)到主應(yīng)用B頁面
    this.$router.push(location); 
    const url=new URL(window.location.href);
    url.search=query
    // 手動的掛載url查詢參數(shù)
    window.history.replaceState(null,"",url.href);
}

// 子應(yīng)用 B 開啟路由同步能力


// 子應(yīng)用A
function handleJump() {
  window.$wujie?.props.jump({ path: "/pathB" } , `?B=${window.encodeURIComponent("/test")}`});
}

子應(yīng)用 B 為保活應(yīng)用

同子應(yīng)用B為?；顟?yīng)用，子應(yīng)用A跳轉(zhuǎn)到子應(yīng)用 B 路由

// bus.js
// 在 xxx-sub 路由下子應(yīng)用將激活路由同步給主應(yīng)用，主應(yīng)用跳轉(zhuǎn)對應(yīng)路由高亮菜單欄
  bus.$on('sub-route-change', (name, path) => {
      const mainName = `${name}-sub`;
      const mainPath = `/${name}-sub${path}`;
      const currentName = router.currentRoute.name;
      const currentPath = router.currentRoute.path;
    if (mainName === currentName && mainPath !== currentPath) {
        router.push({ path: mainPath });
      }
  });

七、部署

前端單頁面的部署,不管怎么自動化,工具怎么變. 都是把打包好的靜態(tài)文件,放到服務(wù)器的正確位置下。所以支持項目的獨立部署和混合部署。

作者：京東物流 張燕燕 劉海鼎

內(nèi)容來源：京東云開發(fā)者社區(qū)文章來源地址http://www.zghlxwxcb.cn/news/detail-463004.html

到了這里，關(guān)于前端微服務(wù)無界實踐 | 京東云技術(shù)團隊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！