引言

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

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

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

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

What：微前端是什么

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

一句話介紹：在一個應用中展示另幾個應用的界面。

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

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

Why：為什么選擇微前端

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

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

微前端能做到什么

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

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

這些問題，歸根結底就是技術復用。

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

為什么不使用iFrame

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

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

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

How：微前端實踐

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

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

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

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

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

在主應用中注冊微應用

在main.js等項目入口文件處注冊子應用：

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();

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

在子應用導出相應的生命周期鉤子

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

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

結尾

由于實際上的項目比Demo復雜的多，實際開發(fā)過程中遇到了一萬個坑，包括路由、權限、第三方插件等等，這部分的內(nèi)容會在后續(xù)帖子里更新。

以上就是Vue qiankun微前端實現(xiàn)詳解的詳細內(nèi)容，更多關于Vue qiankun微前端的資料請關注腳本之家其它相關文章！