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

最新推荐文章于 2024-07-10 17:03:57 发布
最新推荐文章于 2024-07-10 17:03:57 发布
阅读量1k 收藏 17
点赞数 24
文章标签： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37030315/article/details/140004522
版权

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

安装
npm install qiankun
基本使用方法
  1. 主应用配置

在主应用中，配置 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();
  1. 子应用配置

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

2. MicroApp

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

在主应用中，引入并使用 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>
  1. 子应用配置

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

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

3. Wujie

安装
npm install wujie
基本使用方法
  1. 主应用配置

在主应用中，引入并使用 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();
  1. 子应用配置

在子应用中无需特殊配置，只需正常开发应用，确保入口文件（如 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 强调应用隔离，使用灵活，但需要额外处理路由联动，适合现代前端项目。

压图地址

小豆包3D世界
关注
  • 24
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微前端框架对比
lyn1772671980的博客
01-02 1400
微前端框架对比，single-spa、qiankun、micro app、wujie
微前端介绍，构建一个现代web应用所需要的技术，策略和方法
08-08
微前端是一种现代Web应用架构风格，它源自微服务理念，旨在解决大型复杂产品的前端开发难题。当多个团队需要同时开发一个应用程序时，微前端允许他们各自独立地工作、测试和部署小型前端应用，这些应用最终能够聚合...
微前端wujie、qiankun、micro-app、EMP 方案比较
weixin_43832782的博客
02-08 3201
微前端wujie、qiankun、micro-app、EMP 方案比较
微前端：乾坤 、无界、single-spa、iframe对比
最新发布
m0_56416159的博客
07-10 1435
微前端框架是一种技术解决方案，旨在将大型前端应用拆分为多个小型、独立、可维护的微前端应用，每个微前端应用可以独立开发、测试、部署和运行，同时保持整体的协同工作和用户体验。这种架构类似于微服务架构，但专注于前端领域。
qiankun、wujie、micro-app框架简析
weixin_38954787的博客
08-02 2743
随着ES6的普及，利用Proxy可以比较良好的解决这个问题，这就诞生了LegacySandbox，可以实现和快照沙箱一样的功能，但是却性能更好，和SnapshotSandbox一样，由于会污染全局的window，LegacySandbox也仅仅允许页面同时运行一个微应用，所以我们也称LegacySandbox为支持单应用的代理沙箱。执行子应用js代码的时候会将this.proxyWindow作为参数传入，这样子应用原本应该直接操作window的地方，都是操作这个proxyWindow对象，实现了代理功能。
qiankun？这次我选了wujie！
zz_jesse的博客
03-21 303
本文面向对无界和微前端有一定了解的人群，不再对微前端的概念和无界的基础使用方式做解释说明前言掘金上搜wujie，那么大眼一看，好像全都是介绍的，并没有几个落地方案的分享。正好我上个月把部门内三个业务系统用wujie整合了一下，记录成文章和大家分享一下。（为什么不用qiankun？qiankun之前做了好多次了，这次想尝个鲜~）背景说明笔者部门内有三个管理系统，技术栈分别是：A： Vue2 + We...
三大主流微前端框架，you love who？
程序员成长指北
01-30 9489
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群背景及相关信息微前端目前已经是大型前端应用中常见的技术，目前微前端常用的框架主要有三个：无界qiankun 乾坤MicroApp那么这三种微前端框架各有什么优缺点，在企业中进行大型应用开发时，应该如何进行选择呢？这篇文章讲由浅入深的告诉你答案！原文：https://juejin.cn/user/...
高频面试题：微服务Qiankun和Wujie的前端面试频率较高的面试题和答案（十）
05-13 843
`qiankun`（乾坤）是一个用于构建微前端架构的JavaScript库，而`wujie`（无界）是一个基于React的UI组件库。以下是一些可能会在面试中问到的关于`qiankun`和`wujie`的前端面试题及答案：
最完善的微前端解决方案.docx
10-26
微前端架构的主要目标是解决随着项目规模增长和技术人员变动带来的单体应用维护难题。它通过以下几点实现了这一目标： 1. **技术栈无关**：主框架不对接入的应用所采用的技术栈进行限制，使得子应用能够自由选择...
企业中台技术架构解决方案.pdf
09-30
- **中台设计理念**：通过微服务架构，将单一应用程序拆分为一组相互协作的小服务，每个服务都可以独立部署，降低维护复杂性和提高扩展性。 - **去中心化架构**：从传统的中心化服务总线模式转变为去中心化模式，...
基于CA MVVM S的新一代前端开发框架，解决移动端H5开发种种难题.zip
04-07
在IT行业中，前端开发框架是构建用户界面的关键工具，它们为开发者提供了便利的抽象和工具，使得构建响应式、高性能的Web应用变得更加高效。本文将深入探讨基于CA MVVM（Component Architecture Model-View-...
微前端架构体系-云时代的前端架构
11-01
微前端架构是随着互联网发展和云时代背景下，应对复杂前端应用的一种创新解决方案。它源于微服务的概念，将微服务的理念引入到浏览器端，旨在解决大型Web应用开发、维护和更新的难题。 微前端的核心思想是将一个...
微前端是什么、价值、不足、典型模式
weixin_43434729的博客
10-27 2395
微前端技术调研 微前端（Micro-Frontends）是什么 为了解决庞大的后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices），越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了「微前端（micro-frontends）」的概念。微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。简单说就是将前端应用分解成一些更小
无界(wujie)微前端实现及三种通信方式介绍
热门推荐
acheding的博客
09-29 1万+
本文主要介绍了无界(wujie)微前端和qiankun的对比、wujie的实现及三种通信方式（props、window、eventBus）。
微前端框架qiankun调研及开发过程中的血泪教训
Yi_qian的博客
12-28 1790
微前端就是将前端应用拆分为更小、更易于管理的多个应用，通过一个主应用来加载这些子应用。比如某个功能庞大的系统（某团），某团外卖、某团优选、某团骑行等模块若全都处于一个项目中，项目代码量逐渐庞大，项目可维护性难免会降低；微前端可将这些模块单独拆成独立子应用，通过统一入口分别跳转，子应用发布、报错、测试流程仅限于子应用，不会受别的业务影响，同时也不影响别的业务，实现业务解耦。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
三分钟了解微前端, 乾坤方案改造 和无界方案改造
m0_71835253的博客
07-07 4017
三分钟了解微前端, 乾坤方案改造 和无界方案改造
微前端之 二 常用框架对比
我的世界我的光彩
03-22 3965
wujie(腾讯) Micro App (京东) qiankun (蚂蚁金服) single-spa
vue快速搭建qiankun微前端框架完整步骤
qq_66180056的博客
03-24 5642
手把手教你qiankun框架的搭建
oa系统的项目前端的技术选型
09-13
在选择OA系统项目前端的技术时，需要考虑以下几个因素。 首先是功能需求。根据OA系统的具体功能需求，我们可以确定需要哪些前端技术来支持这些功能。例如，如果系统需要实现复杂的数据可视化展示，可以考虑使用React或Vue.js等流行的前端框架；如果需要实现实时通信功能，可以选择使用WebSocket技术。 其次是开发团队的技术栈。考虑到项目的开发和维护成本，需要评估团队成员的技术能力和经验，选择他们熟悉和擅长的前端技术。如果团队已经掌握了某些前端框架或库，可以优先考虑使用这些技术，减少学习成本和提高开发效率。 第三是性能要求。OA系统通常需要处理大量的数据和用户请求，因此在技术选型时需要考虑前端技术对性能的影响。一般来说，使用轻量级的前端框架或库可以提高页面加载速度和用户体验。 第四是兼容性和跨平台性。OA系统可能需要在多个浏览器和设备上运行，因此在技术选型时需要考虑前端技术对不同浏览器和设备的兼容性。可以选择符合W3C标准的技术，如HTML5、CSS3等，以确保系统在不同平台上的稳定运行。 最后是生态系统和社区支持。选择具有活跃的社区和庞大的生态系统的前端技术，可以获取更多的资源和支持，解决可能出现的技术问题和难题。 综上所述，在选择OA系统项目前端的技术时，需要综合考虑功能需求、开发团队的技术栈、性能要求、兼容性和跨平台性以及生态系统和社区支持等因素。只有综合考虑这些因素，才能选择出最适合项目的前端技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值