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

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

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

引言

前端時(shí)間有個(gè)契機(jī)，讓我們團(tuán)隊(duì)開始進(jìn)行微前端的相關(guān)實(shí)踐。

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

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

What：微前端是什么
Why：為什么選擇微前端
How：微前端實(shí)踐

What：微前端是什么

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

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

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

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

Why：為什么選擇微前端

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

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

微前端能做到什么

隨著公司規(guī)模不斷擴(kuò)大，項(xiàng)目團(tuán)隊(duì)數(shù)量不斷增加，我們不可避免的遇到了這些問題:

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

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

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

為什么不使用iFrame

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

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

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

How：微前端實(shí)踐

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

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

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

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

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

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

在main.js等項(xiàng)目入口文件處注冊子應(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ā)生變化，便會(huì)自動(dòng)觸發(fā) qiankun 的匹配邏輯，所有 activeRule 規(guī)則匹配上的微應(yīng)用就會(huì)被插入到指定的 container 中，同時(shí)依次調(diào)用微應(yīng)用暴露出的生命周期鉤子。

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

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

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