微前端框架是为了解决单页应用（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>
更多功能
-
沙箱隔离：
qiankun支持多种沙箱隔离策略，可以在注册子应用时配置。 -
全局状态管理：可以通过
qiankun提供的initGlobalState方法进行全局状态管理。
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）能够被主应用访问即可。
更多功能
-
应用间通信：使用
microApp提供的通信接口可以实现主应用和子应用间的通信。 - 加载策略：可以配置子应用的加载和卸载策略。
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）能够被主应用访问即可。
更多功能
- 应用隔离：Wujie 强调应用间的高度隔离，确保不同子应用之间不会互相影响。
- 性能优化：Wujie 进行了大量性能优化，适合对性能要求较高的项目。
虚拟路由（Virtual Routing）在微前端框架中起着关键作用，它允许主应用和子应用之间协调 URL 路由的变化，以便用户在访问某个路径时，能够正确加载对应的子应用。下面分别介绍 Qiankun.js、MicroApp 和 Wujie 这三种微前端框架的虚拟路由使用方式及优缺点。
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');
优缺点分析
-
优点：
- 强调应用间的隔离，主应用和子应用都可以独立管理路由，减少互相干扰。
- 子应用可以使用自己熟悉的路由库，无需对现有代码进行大幅修改。
-
缺点：
- 需要额外处理主应用和子应用的路由联动，尤其是在路径同步和参数传递方面。
- 对于复杂的路由场景，可能需要额外的逻辑来处理 URL 同步和状态管理。
总结
- Qiankun.js 提供灵活的路由管理方案，但需要手动处理主应用和子应用的路由切换，适合大型复杂项目。
- MicroApp 使用简单，主应用和子应用解耦，适合中小型项目，但路由联动需要额外处理。
- Wujie 强调应用隔离，使用灵活，但需要额外处理路由联动，适合现代前端项目。
压图地址