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

小豆包3D世界2024-07-04 22:36

微前端框架是为了解决单页应用（SPA）在大型项目中带来的复杂性和维护难题而提出的技术方案。Qiankun.js、MicroApp 和 Wujie 是三种流行的微前端框架。以下是对这三种框架的优缺点分析：

Qiankun.js

优点
  1. 成熟度高：Qiankun.js 基于 Single-SPA，并针对中国开发者进行了优化和本地化，已经得到了广泛的应用和验证。
  2. 生态系统完善：提供了丰富的插件和工具链，支持快速集成和上手。
  3. 框架无关性：支持 React、Vue、Angular 等多种主流前端框架，可以在同一个项目中同时使用多种技术栈。
  4. 灵活性强：可以自由选择是否使用沙箱隔离、应用加载策略等，满足不同场景需求。
  5. 社区活跃：有较多的社区资源和支持，问题解决较快。
缺点
  1. 复杂度高：由于其功能强大，配置和使用相对复杂，对开发者的技术要求较高。
  2. 性能开销：在某些场景下，沙箱隔离机制会带来一定的性能开销。

MicroApp

优点
  1. 轻量级：MicroApp 体积小，性能较好，适合对性能要求较高的项目。
  2. 简单易用：上手简单，API 设计清晰，开发成本低。
  3. 兼容性好：支持各种主流前端框架，并且能够与现有项目无缝集成。
  4. 灵活性强：提供灵活的加载和卸载机制，支持动态应用加载。
缺点
  1. 功能较少：相比 Qiankun.js，MicroApp 的功能相对较少，不支持某些高级特性。
  2. 社区资源较少：社区相对不够活跃，遇到问题时可能需要更多时间解决。

Wujie

优点
  1. 高度隔离：Wujie 强调应用间的高度隔离，保证各个子应用之间不会互相影响。
  2. 高性能：针对性能进行了优化，适合对性能要求较高的项目。
  3. 现代化设计：采用现代化的设计思想，支持最新的前端技术和工具链。
缺点
  1. 相对较新：相较于 Qiankun.js 和 MicroApp，Wujie 较为新颖，社区和生态系统尚在发展中。
  2. 文档和支持：由于其新颖性，文档和支持可能不如 Qiankun.js 完善。

总结

  • Qiankun.js 适合大型项目和复杂场景，功能全面，但使用复杂度较高。
  • MicroApp 适合中小型项目，追求轻量级和高性能，功能相对较少。
  • Wujie 适合现代化前端项目，强调隔离和性能，但社区资源和支持尚待发展。

1. Qiankun.js

安装
bash 复制代码 
npm install qiankun
基本使用方法
  1. 主应用配置

在主应用中，配置 qiankun 并注册子应用：

javascript 复制代码 
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();
  1. 子应用配置

在子应用中，添加 qiankun 的生命周期函数：

javascript 复制代码 
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;
}
  1. 主应用中加载子应用的 HTML 文件
html 复制代码 
<div id="container"></div>
更多功能
  • 沙箱隔离 ：qiankun 支持多种沙箱隔离策略，可以在注册子应用时配置。
  • 全局状态管理 ：可以通过 qiankun 提供的 initGlobalState 方法进行全局状态管理。

2. MicroApp

安装
bash 复制代码 
npm install @micro-zoe/micro-app
基本使用方法
  1. 主应用配置

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

javascript 复制代码 
import microApp from '@micro-zoe/micro-app';

microApp.start();

在 HTML 中嵌入子应用：

html 复制代码 
<micro-app name="vue-app" url="http://localhost:7101/"></micro-app>
<micro-app name="react-app" url="http://localhost:7100/"></micro-app>
  1. 子应用配置

在子应用中无需特殊配置，只需正常开发应用，确保入口文件（如 index.html）能够被主应用访问即可。

更多功能
  • 应用间通信 ：使用 microApp 提供的通信接口可以实现主应用和子应用间的通信。
  • 加载策略：可以配置子应用的加载和卸载策略。

3. Wujie

安装
bash 复制代码 
npm install wujie
基本使用方法
  1. 主应用配置

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

javascript 复制代码 
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();
  1. 子应用配置

在子应用中无需特殊配置，只需正常开发应用，确保入口文件（如 index.html）能够被主应用访问即可。

更多功能
  • 应用隔离：Wujie 强调应用间的高度隔离，确保不同子应用之间不会互相影响。
  • 性能优化：Wujie 进行了大量性能优化，适合对性能要求较高的项目。

虚拟路由（Virtual Routing）在微前端框架中起着关键作用，它允许主应用和子应用之间协调 URL 路由的变化，以便用户在访问某个路径时，能够正确加载对应的子应用。下面分别介绍 Qiankun.js、MicroApp 和 Wujie 这三种微前端框架的虚拟路由使用方式及优缺点。

1. Qiankun.js

虚拟路由使用方式

在 Qiankun 中，主应用和子应用都可以拥有自己的路由系统。主应用使用路由来激活不同的子应用，而子应用本身也可以有独立的路由。

  • 主应用配置：

在主应用中，通过 registerMicroApps 注册子应用时，指定 activeRule 来匹配 URL 路径：

javascript 复制代码 
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）来管理内部路由。

javascript 复制代码 
// 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 复制代码 
<!-- 主应用 HTML -->
<micro-app name="vue-app" url="http://localhost:7101/"></micro-app>
<micro-app name="react-app" url="http://localhost:7100/"></micro-app>
  • 子应用配置：

子应用依然可以使用各自的路由库来管理路由。

javascript 复制代码 
// 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 和容器。

javascript 复制代码 
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();
  • 子应用配置：

子应用可以使用各自的路由库来管理路由。

javascript 复制代码 
// 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 强调应用隔离，使用灵活，但需要额外处理路由联动，适合现代前端项目。

压图地址

相关推荐
@PHARAOH3 小时前
HOW - React Router v6.x Feature 实践（react-router-dom）
前端·react.js·前端框架
蓉妹妹17 小时前
@amap/amap-jsapi-loader实现高德地图嵌入React项目中，并且做到点击地图任意一处，获得它的经纬度
前端·react.js·前端框架
孤影过客1 天前
【408考点之数据结构】B树和B+树
数据结构·b树·前端框架
苏十八1 天前
前端进阶：Vue.js
前端·javascript·vue.js·前端框架·npm·node.js·ecmascript
与墨学长2 天前
Rust破界：前端革新与Vite重构的深度透视（中）
开发语言·前端·rust·前端框架·wasm
Amore05252 天前
React+TS前台项目实战（二十三）-- 基于属性自定义数值显示组件Decimal封装
前端·react.js·typescript·前端框架
空白诗2 天前
Monorepo（单体仓库）与 MultiRepo（多仓库）: Monorepo 单体仓库开发策略与实践指南
前端·数据仓库·前端框架
LLLuckyGirl~2 天前
react之错误边界
前端·react.js·前端框架
@PHARAOH2 天前
WHAT - React useReducer vs Redux
前端·react.js·前端框架
前端扎啤2 天前
解决npm与yarn痛点：幽灵依赖与依赖分身
前端·前端框架·npm·yarn·幽灵依赖
热门推荐
012024年江苏省研究生数学建模科研创新实践大赛C题气象数据高精度融合技术研究论文和代码分析02Coze扣子平台完整体验和实践（附国内和国际版对比）03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）042024亚太赛（中文赛）数学建模竞赛选题建议+初步分析05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【经验分享】Ubuntu22.04安装微信(linux官方版)07通用大模型VS垂直大模型，你更青睐哪一方？082025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题09【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解102024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题超详细解题思路+数据预处理问题一代码分享