微前端框架是为了解决项目应用在大型项目中带来的复杂性和维护难题而提出的技术方案。

微前端框架是为了解决单页应用（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');