Vue qiankun微前端實現(xiàn)詳解

更新時間：2022年09月14日 16:12:47 作者：Cytra

這篇文章主要為大家介紹了Vue qiankun微前端實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

前端時間有個契機，讓我們團隊開始進行微前端的相關(guān)實踐。

最近正好有些成果了，來一個階段性的總結(jié)，也方便后續(xù)進一步的開發(fā)。

可能第一次聽說微前端的同學(xué)都會不明覺厲，那么ta到底是個啥？本章會從以下3個角度闡述我的理解：

What：微前端是什么
Why：為什么選擇微前端
How：微前端實踐

What：微前端是什么

首先，微前端其實并不高大上，它的本質(zhì)十分簡單：

一句話介紹：在一個應(yīng)用中展示另幾個應(yīng)用的界面。

是不是看起來與iFrame非常類似？

在微前端體系中，被展示的應(yīng)用稱為子應(yīng)用，而提供展示容器的應(yīng)用稱為主應(yīng)用。

Why：為什么選擇微前端

這個問題我覺得可以從兩個方面來回答：

微前端能做到什么
為什么不使用iFrame

微前端能做到什么

隨著公司規(guī)模不斷擴大，項目團隊數(shù)量不斷增加，我們不可避免的遇到了這些問題:

多個項目需要同一個能力模塊
項目團隊都有自己的特色模塊，這些模塊可能是別的項目團隊想要的
各個團隊使用的技術(shù)棧有所區(qū)別，遷移成本較大
開發(fā)新項目時，可能需要某些老項目的能力模塊
…………

這些問題，歸根結(jié)底就是技術(shù)復(fù)用。

我們想，能不能將每個團隊的特色模塊劃分為子應(yīng)用。大家都基于主應(yīng)用開發(fā)，當(dāng)路徑切換時加載不同的子應(yīng)用，這樣每個子應(yīng)用都是獨立的，技術(shù)棧也就不用再做限制了！

為什么不使用iFrame

如果不考慮體驗問題，iframe 幾乎是最完美的微前端解決方案了。--qiankun文檔

iframe 最大的特性就是提供了瀏覽器原生的硬隔離方案，不論是樣式隔離、js 隔離這類問題統(tǒng)統(tǒng)都能被完美解決。但他的最大問題也在于他的隔離性無法被突破，導(dǎo)致應(yīng)用間上下文無法被共享，隨之帶來的開發(fā)體驗、產(chǎn)品體驗的問題：

Url 不同步。在iFrame中刷新會導(dǎo)致應(yīng)用出錯、后退前進按鈕無法使用、無法使用統(tǒng)一的標簽導(dǎo)航……
UI 不同步，DOM 結(jié)構(gòu)不共享。iFrame中難以構(gòu)建一個帶有全局遮蓋的彈窗。
全局上下文完全隔離，內(nèi)存變量不共享。iframe 內(nèi)外系統(tǒng)的通信、數(shù)據(jù)同步等需求實現(xiàn)困難。

How：微前端實踐

拋開需求講技術(shù)完全就是耍流氓，所有架構(gòu)最終都是為了業(yè)務(wù)。

在我的認知中，微前端更適合構(gòu)建控制臺類的單頁面應(yīng)用。會打開多個頁面的社區(qū)、論壇類應(yīng)用是不適合使用微前端的。既然都打開新頁面了，為什么不直接跳轉(zhuǎn)到另一個項目的地址呢。

團隊選擇了qiankun@2.0作為微前端的實現(xiàn)方案，qiankun官方網(wǎng)站：qiankun.umijs.org/zh

跟著官網(wǎng)的Demo，只需要兩步就可以實現(xiàn)微前端模式改造：

在主應(yīng)用增加注冊子應(yīng)用的代碼
在子應(yīng)用中提供鉤子函數(shù)

在主應(yīng)用中注冊微應(yīng)用

在main.js等項目入口文件處注冊子應(yīng)用：

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
start();

當(dāng)微應(yīng)用信息注冊完之后，一旦瀏覽器的 url 發(fā)生變化，便會自動觸發(fā) qiankun 的匹配邏輯，所有 activeRule 規(guī)則匹配上的微應(yīng)用就會被插入到指定的 container 中，同時依次調(diào)用微應(yīng)用暴露出的生命周期鉤子。

在子應(yīng)用導(dǎo)出相應(yīng)的生命周期鉤子

微應(yīng)用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js，在我們項目中是main.js)
導(dǎo)出 bootstrap、mount、unmount 三個生命周期鉤子，以供主應(yīng)用在適當(dāng)?shù)臅r機調(diào)用。

/**
 * bootstrap 只會在微應(yīng)用初始化的時候調(diào)用一次，下次微應(yīng)用重新進入時會直接調(diào)用 mount 鉤子，不會再重復(fù)觸發(fā) bootstrap。
 * 通常我們可以在這里做一些全局變量的初始化，比如不會在 unmount 階段被銷毀的應(yīng)用級別的緩存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}
/**
 * 應(yīng)用每次進入都會調(diào)用 mount 方法，通常我們在這里觸發(fā)應(yīng)用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}
/**
 * 應(yīng)用每次 切出/卸載 會調(diào)用的方法，通常在這里我們會卸載微應(yīng)用的應(yīng)用實例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}
/**
 * 可選生命周期鉤子，僅使用 loadMicroApp 方式加載微應(yīng)用時生效
 */
export async function update(props) {
  console.log('update props', props);
}