微前端框架是为了解决单页应用(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 强调应用隔离,使用灵活,但需要额外处理路由联动,适合现代前端项目。