qiankun__深入理解qiankun各功能实现

最新推荐文章于 2023-06-26 15:58:44 发布
最新推荐文章于 2023-06-26 15:58:44 发布
阅读量388 收藏
点赞数
分类专栏： qiankun 文章标签： 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40283784/article/details/121038285
版权

qiankun框架的编写基于两个十分重要的框架，一个是single-spa，另外一个是import-html-entry。

如果想要真正理解微前端和qiankun，有必要去看看两个框架的设计理念。

本文着重讨论，在single-spa和import-html-entry之上，qiankun做了什么事情，弥补了哪些singal-spa短板。

下图可以精确地体现出qiankun所解决的问题：

图中所列举的如js沙箱，子应用并行，qiankun是如何实现的呢？

我看了许多关于qiankun的文章，将一些比较精辟的文章链接记录下来，有助于我们更好的理解。

较为全面的qiankunJS剖析

qiankun如何实现js隔离

qiankun proxySand 沙箱

Lpd_Reason
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue 的qiankun
10-26
在`qiankun-master`这个压缩包中，包含了Qiankun的源码，你可以通过研究这个项目来深入了解Qiankun的实现细节。其中，`master`分支通常是最新的稳定版本，你可以查看其代码结构，了解如何配置和使用Qiankun。 ### ...
Vue2+微前端qiankun从搭建到部署的实践实现主子应用切换并集成vue3+vite3子应用（新增主应用在线地址可以进入vue2/vue3子应用）
wocwin的博客
02-14 6155
vue+微前端qiankun从搭建到部署的实践（主子应用切换；含vue2+qiankun+vue3+vite3+ts+element-ui+vite-plugin-qiankun技术栈）vue3+vite3+vue+微前端qiankun主子应用切换实践；集成vue3+vite3子应用；（新增Vue2/Vue3后台管理系统模板子应用）新增主应用在线地址可以进入vue2/vue3子应用
微前端框架qiankun之原理与实战
热门推荐
夕山雨的博客
02-22 2万+
一、微前端概述 在讲解qiankun之前，我们先来了解一下何为微前端。 微前端的概念借鉴自后端的微服务，主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的。它的主要思路是将一个大型工程拆分成若干个更小、更简单，可以独立开发、测试和部署的小工程，分别进行维护。 如果以前端组件的概念作类比，我们可以把每个被拆分出的小工程看作是一个应用级组件。这时我们需要一个“管理者”，负责决定哪些“应用级组件”渲染到页面上，而这个“管理者”，就是我们的主工程。 ...
微前端（Micro-Frontends）qiankun框架原理与实现
qq_39670012的博客
06-15 2417
微前端
微前端框架 之 qiankun
qq_43340606的博客
09-13 8090
qiankun文档:https://qiankun.umijs.org/zh/guide/getting-started 微前端 : 是最近一年国内前端领域被频繁提及的关键字，虽然它并不是一个全新的领域/技术，但很显然在当今越来越多的前端应用即将步入第 3 个、第 5 个甚至更久的年头的背景下，如何给 巨石应用/遗产应用 注入新鲜的技术血液已经成为我们不得不正视的问题，而微前端正是解决这类问题的一个非常合适的解决方案。 qiankun : 是一个生产可用的微前端框架，它基于 single-spa，.
乾坤的Js隔离机制（快照沙箱、两种代理沙箱）
m0_74418779的博客
02-19 1330
微前端js沙箱隔离机制
qiankun demo
11-22
通过分析这些文件，我们可以深入理解qiankun框架的使用方法，包括如何配置微应用注册、如何处理路由、如何进行跨应用通信等关键操作。 总的来说，"qiankun demo"项目是一个实践qiankun框架的实例，它涵盖了微前端...
qiankun.zip
11-12
本文将深入探讨qiankun框架，并通过实战demo来解析其核心功能和应用场景。 一、qiankun框架基础 qiankun是基于JavaScript的微前端框架，它通过提供一套完整的微前端解决方案，包括路由管理、状态管理、按需加载等...
qiankun-master.zip
03-11
微前端（Micro Frontend）是一...总之，"qiankun-master.zip"提供了一个微前端开发的实战案例，帮助开发者深入理解和掌握qiankun框架的使用，对于想要实践微前端架构或者提升前端开发能力的人来说，是一个宝贵的资源。
qiankun-example::rocket: qiankun实战demo，父应用vue，子应用用react和vue
05-08
通过这个项目，我们可以深入理解qiankun的工作原理以及如何在实际开发中运用。 首先，我们要理解qiankun的核心概念。qiankun提供了一种在单一浏览器窗口内运行多个独立的应用（子应用）的能力，这些子应用可以拥有...
万字长文+图文并茂+全面解析微前端框架 qiankun 源码 – qiankun 篇
01-08
本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。 微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。 qiankun（乾坤） 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应
vue-micro-front:仅适用于 Vue 项目的微前端解决方案
05-15
Vue 微前端解决方案 学习预加载路由项目有感尝试自己搭建前端已知路由配置情况下的 Vue 微前端解决方案。 SDK Version 目标 子项目支持单独开发，单独部署；因此可以多人同时开发子项目再进行合并部署。 单一的入口 HTML. 支持 JS 和 TS. 技术使用及注意事项 Lerna Lerna 是一个用于管理具有多个包的 JavaScript 项目的工具，它采用 monorepo（单代码仓库）的管理方式。 主要使用其可以管理多个项目的 package.json 文件以及可以共用 devDependencies 的特性。 使用 lerna link convert 命令，将子项目中公共的依赖（例如babel、eslint等）放到根目录的 package.json 文件中；一方面保证版本的统一，另一方面减少存储空间以及依赖安装的速度。 vue-cli 3 library 子项目使用
vite-plugin-qiankun:保留vite es特性，快速接入乾坤微前端子应用
08-04
简介 vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件 保留vite构建es模块的优势 一键配置，不影响已有的vite配置 快速开始 1、在 vite.config.ts 中安装插件 // vite.config.ts import qiankun from 'vite-plugin-qiankun'; export default { // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致 plugins: [qiankun('myMicroAppName')], // 生产环境需要指定运行域名作为base base: 'http://xxx.com/' } 2、在入口文件里面写入乾坤的生命周期配置 // main.ts import { renderWithQiankun, qiankunWindow
微前端qiankun使用+踩坑
wyh666csdn的博客
07-15 7687
首先，qiankun并不是单一个框架，它在基础上添加更多的功能。以下是qiankun提供的特性实现了子应用的加载，在原有single-spa的JSEntry基础上再提供了HTMLEntry样式和JS隔离更多的生命周期子应用预加载全局状态管理全局错误处理。............
微前端框架qiankun剖析
浮游的博客
04-19 2632
作为目前微前端领域首屈一指的框架，qiankun无论是从接入的方便程度还是从框架本身提供的易用性来说都是可圈可点的。qiankun基于single-spa进行了二次开发，不但为用户提供了简便的接入方式（包括减少侵入性，易于老项目的改造），还贴心的提供了沙箱隔离以及实现了基于发布订阅模式的应用间通信方式，大大降低了微前端的准入门槛，对于微前端工程化的推动作用是不可忽视的。
SingleSpa及qiankun入门、源码分析及案例
wuyxinu的博客
01-12 3469
SingleSpa及qiankun入门及案例 一、简介 1、微服务 为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）： 微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来 具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理 然而，越来越重的前端工程也面临同样的问题，自然地想到
微前端-qiankun：nuxt2 接入 nuxt2
snowball的博客
03-20 783
微前端-qiankun：nuxt2 接入 nuxt2 主应用：nuxt2、webpack 子应用：nuxt2、webpack
qiankun乾坤框架父子服务之间的跳转出现undefined路由
最新发布
富朝阳的博客
06-26 1624
最近在用重构我的博客。微应用架构用了阿里的qiankun，在实现界面微应用化后，发现了一个问题，就是当子应用切换过一次路由后，主应用路由报错。
qiankun原理解析
qq_42943914的博客
02-09 4641
qiankun 是一个基于single-spa框架实现的一个微前端框架，single-spa虽然实现了路由劫持和应用加载，但是没有实现样式隔离和js隔离，并不是一个完善的微前端框架;
page.locator("[id=\"__qiankun_microapp_wrapper_for_op_mc_1683869672814_465__\"]").get_by_text("竞争商品").click()
05-13
这段代码使用了 Python 的 page object 模式和 pytest-selenium 库，它的作用是在页面中找到 id 为 "__qiankun_microapp_wrapper_for_op_mc_1683869672814_465__" 的元素，然后点击该元素下的文本为 "竞争商品" 的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值