前言
老早就聽說微前端了，覺得很高大上的樣子。看了一些文章感覺一知半解，還是得自己搭建一下Demo，學(xué)習(xí)一下它到底是運(yùn)作的。
微前端方案有很多，目前較為流行的方案的是自研框架。在自研方案中也有許多的框架，如Single-Spa， Qiankun。而qiankun也是基于single-spa開發(fā)的，現(xiàn)使用qiankun進(jìn)行項(xiàng)目的搭建學(xué)習(xí)。
正文
（1）Demo搭建
為搭建一個(gè)Demo，首先準(zhǔn)備幾個(gè)不同技術(shù)棧搭建的子應(yīng)用（vue2、vue3、react15、react16），以及一個(gè)主應(yīng)用(main)：
這里的每個(gè)應(yīng)用都可以獨(dú)立運(yùn)行。
準(zhǔn)備好各個(gè)子應(yīng)用后，開始引入qiankun， qiankun的使用很簡單，按照官網(wǎng) 快速上手 文檔就好。
首先在主應(yīng)用的 main.js 中，注冊微應(yīng)用：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 注冊、加載、啟動子應(yīng)用
import { leftNav } from './store';
import { registerMicroApps, start } from 'qiankun';
registerMicroApps(leftNav.navList,
// 主應(yīng)用生命周期
{
beforeLoad: [
() => {
console.log('開始加載 -- ');
},
],
mounted: [
() => {
console.log('加載完成 -- ');
},
],
destoryed: [
() => {
console.log('卸載完成 -- ');
},
],
});
start();
createApp(App).use(router()).mount('#micro_web_main_app');
其中registerMicroApps傳入的list為各個(gè)子應(yīng)用的信息：
export const navList = [
{
name: 'react15',// 唯一
entry: '//localhost:9002',
loading,
container: '#micro-container',
activeRule: '/react15',
},
{
name: 'react16',
entry: '//localhost:9003',
loading,
container: '#micro-container',
activeRule: '/react16',
},
{
name: 'vue2',
entry: '//localhost:9004',
loading,
container: '#micro-container',
activeRule: '/vue2',
},
{
name: 'vue3',
entry: '//localhost:9005',
loading,
container: '#micro-container',
activeRule: '/vue3',
},
];
當(dāng)微應(yīng)用信息注冊完之后，一旦瀏覽器的 url 發(fā)生變化，便會自動觸發(fā) qiankun 的匹配邏輯，所有 activeRule 規(guī)則匹配上的微應(yīng)用就會被插入到指定的 container 中，同時(shí)依次調(diào)用微應(yīng)用暴露出的生命周期鉤子。
最后按照 微應(yīng)用 文檔改造一下子應(yīng)用，并啟動每個(gè)子應(yīng)用，就可以在查看展示效果了。
可以看到，主應(yīng)用提供了micro-container容器，然后根據(jù)當(dāng)前的url加載到對應(yīng)的子應(yīng)用，而子應(yīng)用的內(nèi)容就是之前單頁面應(yīng)用時(shí)的id="app"。
（2）源碼閱讀：registerMicroApps、start
可以看到，我們就是引入了qiankun中的兩個(gè)方法便成功運(yùn)行了，下面看一下源碼實(shí)現(xiàn)。
import { registerMicroApps, start } from 'qiankun';
這里閱讀是版本是 qiankun v2.7.1。
在src/apis.ts可以看到，registerApplication, start兩個(gè)關(guān)鍵的方法都是從single-spa中引入的，所以說qiankun也是基于single-spa開發(fā)的。
這里直接跳到single-spa，閱讀版本是 single-spa v5.9.3。（注意：以下文件路徑都是指在single-spa項(xiàng)目下的文件）
在src/applications/apps.js中，主要就是將傳遞進(jìn)來的apps信息保存，并暴露各個(gè)操作apps的方法。
保存完后調(diào)用reroute，在 src/navigation/reroute.js 中查看reroute：
if (isStarted()) {
appChangeUnderway = true;
appsThatChanged = appsToUnload.concat(
appsToLoad,
appsToUnmount,
appsToMount
);
return performAppChanges();
} else {
appsThatChanged = appsToLoad;
return loadApps();
}
可以看到如果應(yīng)用已經(jīng)start，調(diào)用performAppChanges，否則調(diào)用loadApps。這里的start就前面提到的start。在src/start.js：
let started = false;
export function start(opts) {
started = true;
if (opts && opts.urlRerouteOnly) {
setUrlRerouteOnly(opts.urlRerouteOnly);
}
if (isInBrowser) {
reroute();
}
}
export function isStarted() {
return started;
}
performAppChanges：用于在路由切換時(shí)，調(diào)用toLoadPromise，加載對應(yīng)的子應(yīng)用。
loadApps做了兩件重要的事情：1是路由劫持、2也是使用toLoadPromise加載子應(yīng)用。
路由劫持在src/navigation/navigation-events.js中，可以看到文件中直接重寫了pushState、replaceState。為什么要劫持路由變化？是為了在路由切換時(shí)加載對應(yīng)的子路由。
window.history.pushState = patchedUpdateState(
window.history.pushState,
"pushState"
);
window.history.replaceState = patchedUpdateState(
window.history.replaceState,
"replaceState"
);
在 src/lifecycles/load.js 中查看toLoadPromise，可以看到toLoadPromise就是將已經(jīng)加載好的app處理一下后返回。這里的app，就是子應(yīng)用前面打包時(shí)output配置的library，運(yùn)行打包文件(vendors/bundle)后輸出的app module，以便在window[library]中訪問到。
可以看到，single-spa要求我們自己提供并加載好app，那我們要如何運(yùn)行打包文件獲取到app呢？可以使用動態(tài)腳本加載方式。下面single-spa子應(yīng)用配置的一個(gè)例子：
const createScript = (url) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
const first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);
});
}
const loadApp = async (urls, name) => {
await Promise.all(urls.map((url) => createScript(url)));
return window[name];
}
export const navList = [
{
name: 'vue3',
app: loadApp([ // loadApp需要自己實(shí)現(xiàn)，自己加載js。所以single-spa和qiankun相比，少了沙箱隔離等功能
'http://localhost:9005/static/js/chunk-vendors.js',
'http://localhost:9005/vue3.js'
], 'vue3'),
activeWhen: (location) => location.pathname.startsWith('/vue3'),
customProps: {},
},
];
總結(jié)
上面寫得有點(diǎn)亂，但大概整體框架還是挺簡單的。就是主應(yīng)用提供一個(gè)容器，然后根據(jù)路由切換動態(tài)加載不同子應(yīng)用的bundle，然后bundle會接管容器的內(nèi)容展示，這里就和單頁面應(yīng)用幾乎一樣。
上面主要描述了single-spa的功能，但可以發(fā)現(xiàn)會有些問題：
1.single-spa需要開發(fā)者自己加載好app，然后傳遞給app配置。很麻煩。
2.各個(gè)子應(yīng)用間沒有隔離，比如在一個(gè)子應(yīng)用中修改了window中的字段，切換到另一個(gè)子應(yīng)用后，window沒有復(fù)原，被污染了。
所以基于single-spa封裝的qiankun進(jìn)行了加強(qiáng)，對于上面兩個(gè)問題做了處理：
1.可以看一開始qiankun的app配置，開發(fā)者只需提供entry字段，qiankun會自己去加載子應(yīng)用的資源。
2.qiankun提供沙箱隔離，避免全局污染。
自此基本是講的是single-spa，后面會繼續(xù)介紹qiankun的上面兩個(gè)功能的實(shí)現(xiàn)。
另外對于微前端框架的使用場景，由于我在項(xiàng)目中也沒有使用過，不知道它可以帶來哪些好處。比如各個(gè)子應(yīng)用已經(jīng)有自己的站點(diǎn)并獨(dú)立運(yùn)行，在主應(yīng)用里直接鏈接跳轉(zhuǎn)過去，和這種微前端加載相比，微前端的優(yōu)勢在哪里？這里看到一些理由是說：每當(dāng)用戶當(dāng)切換系統(tǒng)時(shí)，鏈接跳轉(zhuǎn)的方式導(dǎo)致頁面都會刷新，體驗(yàn)很差。
參考
微前端-最容易看懂的微前端知識
微前端01 : 乾坤的Js隔離機(jī)制原理剖析（快照沙箱、兩種代理沙箱）
每日優(yōu)鮮供應(yīng)鏈前端團(tuán)隊(duì)微前端改造
