微前端框架是為了解決項目應用在大型項目中帶來的復雜性和維護難題而提出的技術方案。

微前端框架是為了解決單頁應用（SPA）在大型項目中帶來的復雜性和維護難題而提出的技術方案。Qiankun.js、MicroApp 和 Wujie 是三種流行的微前端框架。以下是對這三種框架的優缺點分析：
在這里插入圖片描述

Qiankun.js

優點

成熟度高：Qiankun.js 基于 Single-SPA，并針對中國開發者進行了優化和本地化，已經得到了廣泛的應用和驗證。
生態系統完善：提供了豐富的插件和工具鏈，支持快速集成和上手。
框架無關性：支持 React、Vue、Angular 等多種主流前端框架，可以在同一個項目中同時使用多種技術棧。
靈活性強：可以自由選擇是否使用沙箱隔離、應用加載策略等，滿足不同場景需求。
社區活躍：有較多的社區資源和支持，問題解決較快。

缺點

復雜度高：由于其功能強大，配置和使用相對復雜，對開發者的技術要求較高。
性能開銷：在某些場景下，沙箱隔離機制會帶來一定的性能開銷。

MicroApp

優點

輕量級：MicroApp 體積小，性能較好，適合對性能要求較高的項目。
簡單易用：上手簡單，API 設計清晰，開發成本低。
兼容性好：支持各種主流前端框架，并且能夠與現有項目無縫集成。
靈活性強：提供靈活的加載和卸載機制，支持動態應用加載。

缺點

功能較少：相比 Qiankun.js，MicroApp 的功能相對較少，不支持某些高級特性。
社區資源較少：社區相對不夠活躍，遇到問題時可能需要更多時間解決。

Wujie

優點

高度隔離：Wujie 強調應用間的高度隔離，保證各個子應用之間不會互相影響。
高性能：針對性能進行了優化，適合對性能要求較高的項目。
現代化設計：采用現代化的設計思想，支持最新的前端技術和工具鏈。

缺點

相對較新：相較于 Qiankun.js 和 MicroApp，Wujie 較為新穎，社區和生態系統尚在發展中。
文檔和支持：由于其新穎性，文檔和支持可能不如 Qiankun.js 完善。

總結

Qiankun.js 適合大型項目和復雜場景，功能全面，但使用復雜度較高。
MicroApp 適合中小型項目，追求輕量級和高性能，功能相對較少。
Wujie 適合現代化前端項目，強調隔離和性能，但社區資源和支持尚待發展。

1. Qiankun.js

安裝

npm install qiankun

基本使用方法

主應用配置

在主應用中，配置 qiankun 并注冊子應用：

import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'reactApp',entry: '//localhost:7100',container: '#container',activeRule: '/react',},{name: 'vueApp',entry: '//localhost:7101',container: '#container',activeRule: '/vue',},
]);start();

子應用配置

在子應用中，添加 qiankun 的生命周期函數：

import './public-path';
import Vue from 'vue';
import App from './App.vue';Vue.config.productionTip = false;let instance = null;
function render(props = {}) {const { container } = props;instance = new Vue({render: h => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('Vue app bootstraped');
}
export async function mount(props) {render(props);
}
export async function unmount() {instance.$destroy();instance = null;
}

主應用中加載子應用的 HTML 文件

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

2. MicroApp

安裝

npm install @micro-zoe/micro-app

基本使用方法

主應用配置

在主應用中，引入并使用 MicroApp：

import microApp from '@micro-zoe/micro-app';microApp.start();

在 HTML 中嵌入子應用：

<micro-app name="vue-app" url="http://localhost:7101/"></micro-app>
<micro-app name="react-app" url="http://localhost:7100/"></micro-app>

子應用配置

在子應用中無需特殊配置，只需正常開發應用，確保入口文件（如 index.html）能夠被主應用訪問即可。

3. Wujie

安裝

npm install wujie

基本使用方法

主應用配置

在主應用中，引入并使用 Wujie：

import { createWujieApp } from 'wujie';const app = createWujieApp({el: '#app',apps: [{name: 'vueApp',url: 'http://localhost:7101/',container: '#container',activeRule: '/vue',},{name: 'reactApp',url: 'http://localhost:7100/',container: '#container',activeRule: '/react',},],
});app.start();

子應用配置

在子應用中無需特殊配置，只需正常開發應用，確保入口文件（如 index.html）能夠被主應用訪問即可。

1. Qiankun.js

虛擬路由使用方式

在 Qiankun 中，主應用和子應用都可以擁有自己的路由系統。主應用使用路由來激活不同的子應用，而子應用本身也可以有獨立的路由。

主應用配置：

在主應用中，通過 registerMicroApps 注冊子應用時，指定 activeRule 來匹配 URL 路徑：

import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'reactApp',entry: '//localhost:7100',container: '#container',activeRule: '/react',},{name: 'vueApp',entry: '//localhost:7101',container: '#container',activeRule: '/vue',},
]);start();

子應用配置：

子應用可以使用各自的路由庫（如 react-router 或 vue-router）來管理內部路由。

// Vue 子應用示例
import Vue from 'vue';
import Router from 'vue-router';
import App from './App.vue';
import routes from './routes';Vue.use(Router);const router = new Router({ routes });new Vue({router,render: h => h(App)
}).$mount('#app');

優缺點分析

優點：
- 靈活性高，主應用和子應用都可以獨立管理自己的路由。
- 子應用可以使用自己熟悉的路由庫，無需對現有代碼進行大幅修改。
缺點：
- 需要手動處理主應用和子應用的路由切換，尤其是嵌套多層子應用時，配置和管理較復雜。
- 對于復雜的路由場景，主應用和子應用之間的 URL 同步和參數傳遞可能會比較麻煩。

2. MicroApp

虛擬路由使用方式

MicroApp 支持子應用的獨立路由，同時通過 micro-app 標簽來嵌入子應用，并且子應用可以與主應用路由進行聯動。

主應用配置：

在主應用中，直接使用 micro-app 標簽來嵌入子應用。

<!-- 主應用 HTML -->
<micro-app name="vue-app" url="http://localhost:7101/"></micro-app>
<micro-app name="react-app" url="http://localhost:7100/"></micro-app>

子應用配置：

子應用依然可以使用各自的路由庫來管理路由。

// React 子應用示例
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';const Root = () => (<Router><Switch><Route path="/" component={App} /></Switch></Router>
);export default Root;

優缺點分析

優點：
- 使用方式簡單，主應用和子應用之間路由解耦，子應用可以獨立開發和調試。
- 子應用可以使用自己熟悉的路由庫，減少學習成本。
缺點：
- 主應用與子應用的路由聯動可能需要額外處理。
- 對于復雜的路由場景，可能需要額外的邏輯來處理 URL 同步和參數傳遞。

3. Wujie

虛擬路由使用方式

Wujie 強調應用間的高度隔離，同時提供靈活的路由管理方案。主應用和子應用都可以獨立管理自己的路由。

主應用配置：

在主應用中，通過 createWujieApp 注冊子應用，并指定 URL 和容器。

import { createWujieApp } from 'wujie';const app = createWujieApp({el: '#app',apps: [{name: 'vueApp',url: 'http://localhost:7101/',container: '#container',activeRule: '/vue',},{name: 'reactApp',url: 'http://localhost:7100/',container: '#container',activeRule: '/react',},],
});app.start();

子應用配置：

子應用可以使用各自的路由庫來管理路由。

// Vue 子應用示例
import Vue from 'vue';
import Router from 'vue-router';
import App from './App.vue';
import routes from './routes';Vue.use(Router);const router = new Router({ routes });new Vue({router,render: h => h(App)
}).$mount('#app');