【微前端】qiankun

这篇具有很好参考价值的文章主要介绍了【微前端】qiankun。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

专栏:

  • 【微前端】什么是微前端
  • 【微前端】qiankun
  • 【微前端】qiankun + vite + vue3

一、qiankun 是什么

qiankun是一种前端微服务架构,旨在解决大型复杂应用的拆分和管理问题。

二、qiankun 的设计思路

qiankun的设计思路是基于“微服务”架构和“大前端”思想的,通过拆分前端应用、动态加载、状态共享、兼容性和稳定性等特性,帮助开发者构建复杂的前端应用,并实现快速、稳定、可扩展的部署和管理。

它的设计思路主要包括以下几个方面:

2.1 从大前端角度出发

qiankun大前端的角度出发,将前端应用分为多个子应用,每个子应用相对独立,可以单独部署、独立运行。

这种方式类似于微服务架构,将前端应用拆分成多个小块,降低了整个应用的耦合度和复杂度。

2.2 基于路由的动态加载

qiankun的路由系统可以实现根据路由动态加载子应用。

在用户访问不同的页面时,qiankun会根据当前页面的路由信息动态加载相应的子应用,从而实现多个子应用的集成。

2.3 统一状态管理

qiankun通过提供一个全局状态管理器来实现多个子应用之间的状态共享。

子应用可以将自己的状态注册到全局状态管理器中,并在需要的时候获取全局状态,从而实现子应用之间的数据交换和共享。

2.4 兼容性和稳定性

qiankun采用了“双向通信”技术来实现子应用之间的通信,同时也提供了多种兼容性解决方案,可以在不同的浏览器和环境中运行,从而保证了整个应用的稳定性和兼容性。

三、qiankun 的子应用切换原理

qiankun的应用切换原理是通过动态加载应用卸载挂载、以及全局状态共享等机制来实现的。这些机制保证了多个子应用之间的隔离和独立性,同时又实现了数据和状态的共享,从而为用户提供了无缝的应用切换体验。

qiankun的应用切换原理可以概括为以下几个步骤:

  1. qiankun主应用加载

当用户访问qiankun主应用时,qiankun主应用会被加载和初始化。

在这个过程中,qiankun主应用会根据预定义的子应用列表(包括子应用的名称、入口文件路径、路由等信息)来预加载子应用的代码和资源文件。

  1. 子应用懒加载

当用户访问某个子应用时,qiankun主应用会根据路由信息动态加载相应的子应用。

这个过程中,qiankun会先检查子应用是否已经加载过,如果没有加载过,则会懒加载相应的子应用代码和资源文件。

  1. 应用切换

当用户从一个子应用切换到另一个子应用时,qiankun会首先将当前子应用卸载,并清除其对应的 DOM 节点和事件监听器。然后,qiankun会加载新的子应用,并将其挂载到 DOM 节点上,同时调用子应用的生命周期函数来初始化新的应用。

  1. 全局状态共享

qiankun提供了一个全局状态管理器来实现子应用之间的状态共享。

当用户从一个子应用切换到另一个子应用时,qiankun会自动将当前子应用的状态保存到全局状态管理器中,然后再将新的子应用的状态从全局状态管理器中获取并更新到新的子应用中。

四、沙箱机制

为了避免不同子应用之间的代码冲突和安全问题,采用了沙箱机制来隔离不同子应用的代码执行环境。具体来说,qiankun沙箱机制主要有以下几个方面:

  • 应用级别的沙箱

qiankun将每个子应用都视为一个独立的应用,每个子应用都有自己的独立沙箱环境,因此每个子应用都可以独立运行、独立调试、独立部署,互不影响。

  • 模块级别的沙箱

在子应用中,qiankun会使用自定义的模块加载器来加载和执行子应用的代码,这些代码都运行在独立的模块沙箱环境中,避免了子应用之间的代码污染和冲突。

  • 样式隔离

qiankun还提供了样式隔离机制,可以在不同子应用之间隔离样式,避免了样式冲突的问题。

  • 生命周期隔离

qiankun中,每个子应用都有自己的生命周期管理机制,这些生命周期钩子函数运行在独立的沙箱环境中,避免了子应用之间的生命周期冲突和影响。

qiankun的沙箱机制可以有效地隔离不同子应用之间的代码执行环境,避免了代码冲突和安全问题。开发者可以放心地在qiankun架构下开发和部署多个子应用,并且不必担心子应用之间的代码污染和冲突问题。文章来源地址https://www.toymoban.com/news/detail-494942.html

五、优劣点

  • 优势
    • 模块化
    • 动态加载
    • 全局状态管理
    • 兼容性和稳定性
  • 劣势
    • 复杂性:工程复杂,主应用、子应用。
    • 调试困难:多个子应用之间存在状态共享时,调试困难。
    • 性能问题:在网络条件不佳的情况下,动态加载可能会导致用户等待时间过长。
    • 安全性:跨站点脚本攻击(XSS)和跨站点请求伪造(CSRF)等。

到了这里,关于【微前端】qiankun的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • qiankun 微前端实例化使用

    一、qiankun使用场景 1. 简介:qiankun是在single-spa的基础上实现的,可以保证各个项目独立使用,也可以集成使用。各系统之间不受技术栈的限制,集成使用也能保证各样式和全局变量的隔离。 模块的插拔式使用,当公司项目集是一个大系统下包含多个子系统或者模块时,可以

    2024年02月04日
    浏览(60)
  • 微前端框架篇一,了解qiankun

    微前端是一种将复杂单体应用拆分为多个小型独立前端应用,然后将这些小应用按需加载并集成到主应用的技术方案。 每个子应用都有自己的 JavaScript 和 CSS 代码。 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。所有页面都来回在这张页面上切换。

    2024年01月22日
    浏览(40)
  • 微前端:qiankun的五种通信方式

    今天盘点一下 qiankun 父子应用的通信方式都有哪些,我发现了 5 种。 1、localStorage/sessionStorage 2、通过路由参数共享 3、官方提供的 props 4、官方提供的 actions 5、使用vuex或redux管理状态,通过shared分享 接下来我们一个一个进行说明 有人说这个方案必须主应用和子应用是同一个

    2024年03月21日
    浏览(48)
  • vue项目集成乾坤(qiankun)微前端

    npm i qiankun -S qiankun文档官方地址:https://qiankun.umijs.org/zh/guide 新建一个.vue文件 配置路由地址

    2024年02月05日
    浏览(48)
  • 【qiankun】前端微服务架构踩坑记录

    目录 前言 1.Cannot GET /cooperation/board 场景: 分析 解决 2.Invalid options in vue.config.js:\\\"css.requireModuleExtension\\\" is not allowed 原因 解决 3.less版本升级导致除法写法未转换 原因 解决 4.主子应用样式隔离 场景 解决 5.在webpack5中配置output报错 报错如下  原因  解决 6.微应用部署后报错 场景

    2024年02月15日
    浏览(35)
  • 【qiankun】微前端在项目中的具体使用

    在主应用的入口文件main.ts中,引入qiankun的注册方法: 创建一个数组,用于配置子应用的相关信息。每个子应用都需要提供一个名称、入口URL、挂载点和一些可选配置项。例如: 调用 registerMicroApps 方法,注册子应用: 调用 start 方法,启动qiankun微前端应用: 在主应用的根文

    2024年02月12日
    浏览(40)
  • 微前端架构-qiankun在vue3的应用

    本文章介绍了qiankun在vue3的应用,其中子应用有vue2、vue3、react、angular qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 其他几款([single-spa]、[micro-app]、[百度emp]]) 使用 iframe 整合系统时,假设我们有系统 A, 当

    2023年04月08日
    浏览(35)
  • 微前端qiankun架构 (基于vue2实现)使用教程

    node -- 16+ @vue/cli -- 5+ 创建文件夹qiankun-test。 使用vue脚手架创建主应用main和子应用dev   安装 qiankun: 使用qiankun: 在 utils 内创建 微应用文件夹 microApp,在该文件夹内创建微应用出口文件 index.js,路由文件 microAppRouter,配置函数文件 microAppSetting。 路由文件 microAppRouter 配置函数文件

    2023年04月19日
    浏览(47)
  • 基于vue3+webpack5+qiankun实现微前端

    一 主应用改造(又称基座改造) 1 在主应用中安装qiankun(npm i qiankun -S)  2 在src下新建micro-app.js文件,用于存放所有子应用。  3 改造vue.config.js,允许跨域访问子应用页面  4 改造main.js   5 在App.vue中写响应跳转子应用(根据自己的项目找对应位置写,不局限于App.vue)   需要注

    2024年02月13日
    浏览(60)
  • 【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法

    参考链接 qiankun官网:微应用之间如何跳转? 1.主应用、子应用路由都是hash模式    主应用根据 hash 来判断微应用,无需考虑该问题 2.主应用根据path判断子应用 方法 实现 适用条件 参数传递 存在问题 a标签跳转 a href=\\\"/toA\\\"/a 页面重新刷新,原来的状态丢失,用户体验不好 h

    2024年02月07日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包