qiankun揭秘（看完这篇你能够自己写个qiankun）

最新推荐文章于 2023-04-19 16:21:02 发布
最新推荐文章于 2023-04-19 16:21:02 发布
阅读量450 收藏 1
点赞数
文章标签： qiankun js 微前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjscy666/article/details/120250768
版权
本文深入解析qiankun微前端的registerMicroApps、start和initGlobalState等核心API，通过源码分析解释微应用的注册、加载、渲染和状态管理过程，帮助读者理解qiankun的工作原理。
摘要由CSDN通过智能技术生成

缘起

最近一直有童鞋问我，qiankun的原理是啥，能不能给个文章，小编想了想，微前端的概念也不算旧，那就发个文章吧！

入手

万事开头难，我们就从文档入手吧，哈哈哈哈！我们可以看看api页面，其实我们用的registerMicroApps，start和initGlobalState这三个api，那么我们来一个个看它们是如何工作的吧！

registerMicroApps

顾名思义，官网给出的这个api是注册微应用的，具体用法大家可以自行观看，这里贴个示例图。

在这里插入图片描述

接下来我们分析源码，前方高能，大家注意啊！

在这里插入图片描述
这个方法主要是注册未注册的app子应用，关键点是registerApplication这个方法。我们继续看这个方法，这个方法来自single-spa，我们就去single-spa看这个方法

在这里插入图片描述
我

最低0.47元/天 解锁文章
小鬼难缠
关注
万字长文+图文并茂+全面解析微前端框架 qiankun 源码 – qiankun 篇
01-08
本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。 qiankun（乾坤） 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应
微前端-qiankun上手
qq_32019935的博客
05-17 952
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、qiangkun是什么二、如何使用1.下载qiankun2.如何使用总结 前言 什么是微前端?现在前端的工作越来越复杂，项目越来越大。一个大型的项目，往往包含数千个页面。在如此庞大的体量下，项目的每一次完整的打包部署。所耗费的成本是非常可怕的，即便现在的构建工具（webpack之类）对此有着一些优化处理方案。但却没有在根本上解决问题，如果项目的体量持续增加下去。那么总有一个极限会让项目的构建速度变得不可接受。 微前端的概.
qiankun原理解析
qq_42943914的博客
02-09 5052
qiankun 是一个基于single-spa框架实现的一个微前端框架，single-spa虽然实现了路由劫持和应用加载，但是没有实现样式隔离和js隔离，并不是一个完善的微前端框架;
qiankun微前端原理
小魔仙的成长之路
03-31 2548
Qiankun 是一个基于 single-spa 的微前端框架，通过将不同的子应用打包成独立的 JavaScript 包，并通过路由或者菜单等方式进行集成，来实现多个子应用在同一页面内无缝协同工作的目的。使用 Proxy 对全局变量进行代理。为了防止子应用修改全局变量导致其他子应用受影响，Qiankun 会使用 Proxy 对全局变量进行代理，防止子应用直接修改全局变量。通过以上的技术原理，Qiankun 实现了多个子应用的协同工作，可以根据需要进行灵活的组合和拆分，从而提高开发效率和系统可维护性。
微前端框架qiankun之原理与实战
夕山雨的博客
02-22 2万+
一、微前端概述 在讲解qiankun之前，我们先来了解一下何为微前端。 微前端的概念借鉴自后端的微服务，主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的。它的主要思路是将一个大型工程拆分成若干个更小、更简单，可以独立开发、测试和部署的小工程，分别进行维护。 如果以前端组件的概念作类比，我们可以把每个被拆分出的小工程看作是一个应用级组件。这时我们需要一个“管理者”，负责决定哪些“应用级组件”渲染到页面上，而这个“管理者”，就是我们的主工程。 ...
qiankun-project_qiankun_umiqiankun_qiankun开发语言_乾坤这个名字_天堂_
09-29
qiankun，这个名字充满文化底蕴，正是这种技术理念的完美体现——如同天地一样包容并蓄，承载着多元化的前端组件和功能。 UMI，全称Uber Meta Infrastructure，是阿里巴巴开源的一款强大的前端构建工具，它集成了...
qiankun demo
11-22
【标题】"qiankun demo" 是一个关于前端微服务框架qiankun的示例项目，旨在演示如何在实际开发中应用该框架。qiankun是阿里开源的一款基于单页应用（SPA）的微前端解决方案，它允许开发者将多个独立的SPA组织成一个...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
qiankun 微前端应用实践与部署 微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发...
qiankun-source-code:微前端框架-qiankun源码阅读
03-23
qiankun（乾坤）源码阅读 主应用的启动start和子应用的注册registerMicroApps 首先，入口index.ts中约会和导出了启动主应用和注册子应用的方法 export { loadMicroApp, registerMicroApps, start } from './apis'; 然后是apis.ts中的注册子应用函数registerMicroApps import { loadApp } from './loader'; import { mountRootParcel, registerApplication, start as startSingleSpa } from 'single-spa'; let microApps: RegistrableApp[] = []; export let frameworkConfiguration: Framework
微前端qiankun框架的底层实现原理
wanghe1111_的博客
03-29 5549
微前端qiankun框架的底层实现原理
qiankun 使用方法及基座子应用搭建实践
hlpp123的博客
03-25 8332
qiankun 使用方法及基座子应用搭建实践
基于 qiankun 的微前端应用实践
hellozhxy的博客
03-22 2470
业务背景 云音乐广告 Dsp（需求方平台）平台分为合约平台（Vue 框架）和竞价平台（React 框架），因历史原因框架选型未能统一，最近来了新需求，需要同时在两个平台增加一样的模块，因为都是 Dsp 平台，后期这样的需求可能会很多，所以考虑到组件复用以及降低维护成本，在想怎么统一技术栈，把 React 系统塞到 Vue 项目中进行呈现。 系统是传统的左右布局，左侧侧边栏展示菜单栏，头部导航展示基础信息，应用内容全部填充到蓝色的内容区。 说实话，第一反应我直接想嵌套 iframe ，但是应用过 i
基于 qiankun 的微前端实践
油墨香^-^的博客
07-07 679
微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端并不是前端领域的新概念。早期希望前端工程能够像后台的微服务一样，项目分开自治，核心的诉求是：1、兼容不同技术栈2、将项目看作页面、组件，能够复用到不同的系统中早期比较成熟的 single-spa，从早期 React 的现代框架组件生命周期中获得灵感，将生命周期应用于这个应用程序，即将整个页面作为组件。后来蚂蚁金融团队孵化了基于 sin
微前端：使用qiankun框架的注意点
Big_YiFeng的博客
10-11 806
解决方案： 使用 vite-plugin-qiankun 包，暂未使用过，不过看有部分人是使用的这个。第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。初始化完成后进入默认的子应用。
市面上前端微服务化研究(五)：蚂蚁金服微前端框架
禅思院
09-10 3107
如何设计微前端架构 就当前而言，要设计出一个微前端应用不是一件容易的事——还没有最佳实践。在不同的落地案例里，使用的都是不同的方案。出现这种情况的主要原因是，每个项目所面临的情况、所使用的技术都不尽相同。为此，我们需要了解一些基础的微前端模式。 架构模式 微前端应用间的关系来看，分为两种：基座模式（管理式）、自组织式。分别也对应了两者不同的架构模式： 基座模式（管理式） 通过一个主应用，来管...
微前端vue项目实战 -- 乾坤qiankun框架 （一）
热门推荐
csl125的博客
04-09 2万+
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 如何使用qiankun搭建基于vue的微前端
微前端框架qiankun剖析
最新发布
浮游的博客
04-19 2822
作为目前微前端领域首屈一指的框架，qiankun无论是从接入的方便程度还是从框架本身提供的易用性来说都是可圈可点的。qiankun基于single-spa进行了二次开发，不但为用户提供了简便的接入方式（包括减少侵入性，易于老项目的改造），还贴心的提供了沙箱隔离以及实现了基于发布订阅模式的应用间通信方式，大大降低了微前端的准入门槛，对于微前端工程化的推动作用是不可忽视的。
微前端实战：Qiankun子应用通信与搭建解析
"这篇文档详细阐述了如何基于qiankun框架进行微前端开发，特别是应用间通信的实现。文档内容涵盖了子应用的构建原则、通信方式，包括官方推荐的Actions通信以及基于Storage的通信，同时也提及了使用props传递值的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值