隨著前端業務的快速發展，單體應用模式（Monolith）越來越難以支撐復雜業務場景。微前端（Micro Frontends）應運而生，它將大型應用拆解成多個子應用（Micro App），通過主應用進行統一調度和集成。
在微前端技術棧中，Qiankun（乾坤）是一個廣泛使用的解決方案，基于 single-spa 封裝，提供了開箱即用的微應用加載、沙箱隔離和通信機制。接下來，我們將通過一個完整的實踐案例，從零構建并配置 Qiankun 微前端架構。
一、qiankun 原理概述
qiankun 是一個基于 single-spa 的微前端實現庫，旨在幫助開發者更簡單、無痛地構建生產可用的微前端架構系統。qiankun 通過以下核心機制實現微前端架構：
1. 應用注冊與加載
qiankun 通過 registerMicroApps 方法注冊子應用，并使用 loadMicroApp 方法加載子應用的資源。qiankun 支持兩種加載方式：HTML Entry 和 JS Entry。HTML Entry 是 qiankun 的默認加載方式，它通過加載子應用的 HTML 文件，解析其中的 <script> 和 <link> 標簽，動態加載子應用的 JavaScript 和 CSS 資源。
2. 沙箱隔離機制
為了防止子應用之間的相互干擾，qiankun 提供了兩種沙箱隔離機制：Proxy 沙箱和快照沙箱。Proxy 沙箱通過 JavaScript 的 Proxy 對象，代理全局對象 window，攔截對全局對象的訪問和修改，實現對子應用的隔離。快照沙箱則在子應用掛載和卸載時，分別記錄和恢復 window 對象的快照，確保子應用的獨立性。
3. 樣式隔離機制
qiankun 提供了兩種樣式隔離方式：CSS 前綴和 Shadow DOM。CSS 前綴通過為子應用的 CSS 類名添加唯一前綴，避免樣式沖突。Shadow DOM 則通過瀏覽器的 Shadow DOM 技術，將子應用的樣式和 DOM 結構封裝在一個獨立的影子樹中，實現樣式的完全隔離。
4. 生命周期管理
qiankun 為每個子應用提供了生命周期鉤子函數，包括 bootstrap、mount、unmount 等，開發者可以在這些鉤子函數中編寫子應用的初始化、掛載和卸載邏輯，實現對子應用的精細化管理。
5. 應用間通信
qiankun 提供了多種應用間通信方式，包括全局事件總線、props 傳遞和自定義事件等，開發者可以根據需要選擇合適的通信方式，實現主應用與子應用之間的數據傳遞和事件處理。
?? 推薦閱讀：
-
Qiankun 官方文檔
二、基座應用（主應用）配置
1. 安裝 qiankun
在主應用中安裝 qiankun：
npm install qiankun --save
或者
yarn add qiankun2. 配置路由
在 router/index.ts 中配置路由：
//router/index.ts{path: "/home",component: Home,meta: { requiresAuth: true },children: [{ path: "", redirect: "/home/app-store" },{path: "app-store",name: "AppStoreHome",component: AppStore,meta: { requiresAuth: true },},{path: "app-store/:appPath(.*)*",name: "AppStoreSubApp",component: SubAppView,meta: { requiresAuth: true },},// ? 其他微前端子應用（不在 app-store 內部）{path: ":appPath(.*)*",name: "SubAppView",component: SubAppView,
)
)
