【前端知識】微前端框架qiankun

微前端框架qiankun

- 簡介
- - 一、核心思想
  - 二、主要特性
  - 三、關鍵技術
  - 四、使用場景
  - 五、使用示例
  - 六、優勢與劣勢
  - 七、總結
- 使用
- - 一、創建主應用（Angular CLI項目）
  - 二、創建子應用（Vue CLI項目）
  - 三、啟動并測試
- 使用場景
- - 一、大型前端應用的拆分與整合
  - 二、獨立開發與部署
  - 三、增量升級與局部更新
  - 四、應用間的通信與共享
  - 五、跨域與安全性
- Web Components簡介
- - 一、概念與特點
  - 二、核心組成部分
  - 三、使用場景
  - 四、優勢與挑戰
  - 五、未來發展

簡介

Qiankun是一款由螞蟻金服推出的微前端框架，它基于single-spa進行二次開發，旨在將Web應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用。以下是對Qiankun的詳細介紹：

一、核心思想

Qiankun借鑒了微服務的架構理念，將一個龐大的前端應用拆分為多個獨立靈活的小型應用，每個應用都可以獨立開發、獨立運行、獨立部署，再將這些小型應用聯合為一個完整的應用。這種方式既可以將多個項目融合為一，又可以減少項目之間的耦合，提升項目擴展性。

二、主要特性

模塊化：將大型前端應用拆分為多個小型模塊，每個模塊都是一個獨立的微應用。
獨立開發：每個微應用可以由不同的團隊獨立開發，使用不同的技術棧。
獨立運行：微應用可以獨立運行，通過前端路由和頁面嵌入等技術實現模塊之間的相互調用和通信。
獨立部署：微應用可以獨立部署，無需整個應用重啟即可更新單個微應用。
技術棧無關性：允許使用不同的編程語言和框架進行開發，提高開發團隊的靈活性。

三、關鍵技術

基于路由的拆分：主應用根據路由的變化來加載和卸載不同的微應用。
Web Components：利用Web Components技術封裝微應用，實現組件級別的隔離和復用。但需要注意的是，Web Components的兼容性可能因瀏覽器而異。
iframe：通過iframe嵌入微應用，實現簡單的隔離和加載。但iframe的隔離性較強，可能導致樣式和腳本的沖突。
沙箱運行環境：Qiankun提供了沙箱機制，確保微應用之間的全局變量和事件不沖突。沙箱技術通過攔截和修改微應用對全局作用域（如window對象）的訪問，實現微應用之間的隔離。

四、使用場景

Qiankun適用于以下場景：

大型前端應用需要拆分為多個小型應用，以提高開發效率和可維護性。
不同技術棧、不同團隊需要獨立開發、獨立部署的應用。
需要實現應用間的增量升級和局部更新。

五、使用示例

以下是一個使用Qiankun搭建Vue微前端應用的簡單示例：

創建主應用：使用Vue或其他框架創建一個主應用，作為基座項目。在主應用中配置路由、權限等。
注冊微應用：在主應用中注冊需要加載的微應用信息，包括微應用名稱、入口地址、掛載節點、激活規則等。
啟動Qiankun：在主應用的入口文件中引入Qiankun，并調用其提供的API來啟動微前端框架。
配置微應用：在每個微應用中配置公共路徑（public-path），以確保微應用能夠正確加載資源。
啟動應用：分別啟動主應用和各個微應用。

六、優勢與劣勢

優勢：

技術兼容性好：各個子應用可以基于不同的技術架構。
接入方式簡單：像使用iframe一樣接入微應用。
耦合性低：各個團隊可以獨立開發，互不干擾。
可維護性和擴展性好：便于局部升級和增量升級。

劣勢：

無法支持多實例場景。
對Vite等現代前端構建工具的支持不夠友好，需要改動較多的代碼。
子應用間的資源共享能力較差，可能導致項目總體積變大。
開發人員需要處理分布式系統的復雜性。

七、總結

Qiankun是一款功能強大的微前端框架，它通過將大型前端應用拆分為多個小型應用，提高了開發效率和可維護性。同時，Qiankun提供了沙箱機制，確保了微應用之間的隔離性。然而，Qiankun也存在一些局限性，如不支持多實例場景、對Vite等構建工具的支持不夠友好等。因此，在選擇是否使用Qiankun時，需要根據具體項目的需求和團隊的技術棧進行綜合考慮。

使用

以下是一個完整的例子，用于說明qiankun微前端框架的使用。在這個例子中，我們將創建一個主應用（Angular CLI項目）和一個子應用（Vue CLI項目），并將它們集成在一起。

一、創建主應用（Angular CLI項目）

安裝Angular CLI并創建項目：

npm install -g @angular/cli
ng new angular-app
cd angular-app

安裝qiankun：

npm i qiankun --save

創建掛載子應用的頁面并配置路由：

在Angular項目中創建一個新的組件用于掛載子應用，并配置路由以指向該組件。

ng g component views/vue-page

配置路由（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { VuePageComponent } from './views/vue-page/vue-page.component';const routes: Routes = [{ path: 'home', component: VuePageComponent }
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

在VuePageComponent的HTML模板中添加一個容器元素用于掛載子應用：

<div id="container"></div>

在主應用中注冊子應用：

在main.ts中導入qiankun并注冊子應用：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { registerMicroApps, start } from 'qiankun';platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));registerMicroApps([{name: 'vueChildOne',entry: '//localhost:8080', // 子應用的請求地址container: '#container', // 掛載到主應用的哪個元素下activeRule: '/vue-app', // 路由地址為/vue-app時，加載該子應用}
]);start();

二、創建子應用（Vue CLI項目）

安裝Vue CLI并創建項目：

npm install -g @vue/cli
vue create vue-app
cd vue-app

安裝qiankun：

npm i qiankun --save

在子項目中添加public-path.js：

在src目錄下創建一個public-path.js文件，并添加以下代碼：

if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

修改Vue項目的入口文件：

在main.js中導出生命周期鉤子，并處理路由和渲染邏輯：

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';Vue.config.productionTip = false;let router = null;
let instance = null;function render(props = {}) {const { container } = props;router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/',mode: 'history',routes,});instance = new Vue({router,render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 獨立運行時
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}export async function mount(props) {console.log('[vue] props from main framework', props);render(props);
}export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;router = null;
}

配置路由：

在src/router/index.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';Vue.use(Router);const routes = [{path: '/',name: 'Home',component: Home},// 其他路由配置...
];const router = new Router({base: process.env.BASE_URL,mode: 'history',routes
});export default router;

配置微應用的打包工具：

在vue.config.js中添加以下配置，以便主應用能夠正確加載子應用的資源：

module.exports = {configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${name}`,},},
};

三、啟動并測試

啟動子應用：

npm run serve

確保子應用在localhost:8080上運行（或根據你的配置調整端口）。

啟動主應用：

ng serve

訪問主應用：

在瀏覽器中訪問http://localhost:4200/home（或根據你的Angular項目配置調整端口和路徑）。你應該會看到主應用的頁面，并且當路由匹配到/vue-app時，會加載并展示Vue子應用。

通過以上步驟，你就成功地使用qiankun將一個Angular主應用和一個Vue子應用集成在了一起。這只是一個簡單的例子，qiankun還支持更多高級功能，如應用間通信、樣式隔離等，你可以根據需要進行進一步的配置和開發。

使用場景

微前端框架qiankun的使用場景主要包括以下幾個方面：

一、大型前端應用的拆分與整合

巨石應用的拆分：
- 在大型前端應用中，隨著業務的發展和功能的增加，應用可能會變得非常龐大和復雜，難以維護和擴展。
- 使用qiankun可以將這些大型應用拆分為多個小型、獨立的微應用，每個微應用都可以獨立開發、部署和迭代，從而提高開發效率和應用的可維護性。
多技術棧的整合：
- 在大型項目中，可能會使用多種不同的前端技術棧，如React、Vue、Angular等。
- qiankun支持任意技術棧的應用接入，使得不同技術棧的微應用可以在同一個主應用中協同工作，實現技術的多樣性和靈活性。

二、獨立開發與部署

獨立開發：
- 不同的微應用可以由不同的團隊獨立開發，每個團隊都可以使用自己熟悉的技術棧和工具鏈。
- 這種獨立開發的方式可以提高開發效率，減少團隊之間的依賴和沖突。
獨立部署：
- 每個微應用都可以獨立部署和更新，無需整個應用重啟即可更新單個微應用。
- 這種獨立部署的方式可以減少更新對整個應用的影響，提高系統的穩定性和可靠性。

三、增量升級與局部更新

增量升級：
- 在面對各種復雜場景時，我們通常很難對一個已經存在的系統做全量的技術棧升級或重構。
- 使用qiankun可以實現微應用的增量升級，即只更新需要升級的微應用部分，而不需要對整個系統進行重構或升級。
局部更新：
- 當某個微應用需要更新時，只需要更新該微應用的代碼和資源，而不需要更新整個應用。
- 這種局部更新的方式可以減少更新帶來的風險和成本，提高系統的可維護性和可擴展性。

四、應用間的通信與共享

應用間通信：
- qiankun提供了多種應用間通信的方式，如全局狀態管理、事件總線等。
- 這些通信方式可以使得不同的微應用之間能夠方便地傳遞數據和事件，實現應用間的協同工作。
資源共享：
- 在微前端架構中，不同的微應用可能需要共享一些公共的資源或組件。
- qiankun支持在主應用中定義和共享這些公共資源和組件，使得不同的微應用能夠方便地復用這些資源和組件。

五、跨域與安全性

跨域問題：
- 在微前端架構中，不同的微應用可能部署在不同的域名下，這可能會導致跨域問題。
- qiankun提供了一些解決方案來處理跨域問題，如使用CORS（跨來源資源共享）策略、JSONP等。
安全性：
- 微前端架構可能會增加一些安全性問題，如跨站腳本攻擊（XSS）、點擊劫持等。
- qiankun提供了一些安全措施來防范這些攻擊，如使用沙箱機制、內容安全策略（CSP）等。

綜上所述，qiankun微前端框架的使用場景非常廣泛，適用于大型前端應用的拆分與整合、獨立開發與部署、增量升級與局部更新以及應用間的通信與共享等場景。同時，qiankun也提供了一些解決方案來處理跨域問題和安全性問題。

Web Components簡介

Web Components是一套技術規范，由一系列不同的Web平臺特性組成，允許開發者創建可復用的自定義元素（custom elements）和組件。以下是對Web Components的詳細介紹：

一、概念與特點

概念：
- Web Components是瀏覽器環境提供的一套API和模板，支持原生實現組件化。
- 開發者可以方便地創建可重用的定制元素，這些元素具有封裝好的結構、樣式和腳本。
特點：
- 組件化：可以將復雜的UI組件封裝成一個可重用的單元，有助于提高開發效率和代碼復用性。
- 跨平臺：Web Components可以跨瀏覽器、跨框架使用，不受特定技術棧的限制。
- 隔離性：通過Shadow DOM可以避免組件的樣式和行為受到外部影響，提供了良好的隔離性。
- 封裝性：提供了一種封裝和保護組件內部結構和樣式的機制，使得組件的樣式和行為不會受到外部的影響。

二、核心組成部分

Web Components實際上是一系列技術的組合，主要包含以下三部分：

自定義元素（Custom Elements）：
- 在HTML基礎標簽外擴展自定義標簽元素，即平時使用的框架組件。
- 通過customElements.define()方法注冊自定義元素。
Shadow DOM：
- 主要用于將Shadow DOM的內容與外層document DOM隔離。
- 可以理解為在document中的一個子容器，放置各種組件。
- 使用Element.attachShadow()方法將一個Shadow DOM附加到自定義元素上。
HTML模板（HTML Templates）：
- 使用<template>來定義組件模板。
- <template>標簽內部的內容在初始時不會渲染到頁面上，但可以通過JavaScript動態地插入到DOM中。
- 使用<slot>作為插槽，允許外部內容插入到模板中的指定位置。

三、使用場景

創建自定義UI元素：
- Web Components允許開發者定義自己的HTML元素，這些元素具有封裝好的結構、樣式和腳本。
- 可以像標準HTML元素一樣在DOM中使用。
構建組件化應用：
- 通過Web Components，開發者可以構建組件化的應用，提高代碼的復用性和可維護性。
- 每個組件都是獨立的，可以單獨開發、測試和部署。
跨框架開發：
- Web Components是瀏覽器原生支持的API，因此它們可以在不同的前端框架（如React、Vue）中被無縫集成和使用。
- 這有助于解決不同框架之間的兼容性問題，實現跨框架的組件復用。

四、優勢與挑戰

優勢：
- 技術棧無關性：允許使用不同的編程語言和框架進行開發。
- 樣式隔離：通過Shadow DOM實現組件樣式的隔離，避免樣式沖突。
- 性能優化：由于組件的獨立性，可以實現對特定組件的緩存和懶加載，提高頁面性能。
挑戰：
- 瀏覽器兼容性：雖然Web Components已經在現代瀏覽器中得到了較好的支持，但在一些老舊瀏覽器中可能仍然存在問題。
- 學習成本：Web Components涉及到多個技術點，需要較高的技術水平和學習成本。
- 性能問題：在某些情況下，Web Components可能會增加網頁的加載時間和渲染時間，需要進行優化和測試。