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

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

压图地址

相关推荐
哑巴语天雨14 小时前
React+Vite项目框架
前端·react.js·前端框架
码农老起14 小时前
掌握 React：组件化开发与性能优化的实战指南
react.js·前端框架
撸码到无法自拔18 小时前
React：组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
Domain-zhuo18 小时前
如何利用webpack来优化前端性能？
前端·webpack·前端框架·node.js·ecmascript
web150850966411 天前
【React&前端】大屏适配解决方案&从框架结构到实现（超详细）（附代码）
前端·react.js·前端框架
Cachel wood1 天前
Vue.js前端框架教程8：Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript
Super毛毛穗1 天前
Vue中＜script setup＞＜/script＞的主要语法元素和特性
前端·javascript·vue.js·前端框架
h_小波2 天前
探索 Vue.js 组件开发：从基础到进阶的完整指南
前端·vue.js·前端框架
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做？系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
好开心333 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play