qiankun隔离机制

于 2025-07-07 22:20:35 发布
阅读量180 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： 微前端 qiankun
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33203555/article/details/149182721
  1. css样式隔离
    在qiankun微前端项目中，css样式隔离主要有2种方案
    在这里插入图片描述
    第一种是主要是使用选择器进行样式隔离，效果如下
    在这里插入图片描述
    主要是选择器上添加上了每个自应用的标识。

第二种的话是shadow dom的方式，该方式会使整个子应用在shadow dom下渲染。类似于iframe的那种效果
在这里插入图片描述
可以看到子应用在shadow下渲染，全局样式也影响不到子应用了。

2.js隔离
在这里插入图片描述
于是在子应用中访问window时会优先访问该应用上的代理window,没有的话会访问主应用上的winow，子应用间设置window上的值不会反应到主应用上，各子应用互不影响

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

比如在主应用上设置window.test= ‘mian-vue’, vue2项目子应用改变window.test。 在vue2子应用中window.test为home-page,而在vue3项目子应用中访问window.test时是main-vue

在这里插入图片描述

qq_33203555
关注
qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用
高级前端工程师
10-29 6592
乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的
微前端方案 qiankun 的样式隔离：你是否应该避免使用它？
ZuqCloud的博客
10-01 405
这意味着每个微应用程序都可以在自己的 Shadow DOM 中定义和使用样式，而不会被其他微应用程序的样式所干扰。在某些情况下，样式隔离可能是必需的，而在其他情况下，可以考虑其他解决方案来共享样式。最重要的是，了解 qiankun 的样式隔离功能，并在开发过程中妥善处理样式相关的问题。这是因为每个微应用程序都有自己的 Shadow DOM，它们之间的样式是相互隔离的。这样，即使宿主应用程序和其他微应用程序具有相同的样式类名，它们之间也不会发生冲突，因为每个微应用程序都有自己的 Shadow DOM。
qiankun实现基座、子应用样式隔离
weixin_43845137的博客
03-23 2589
【代码】qiankun实现基座、子应用样式隔离。
乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
10-17 4581
qiankun作为微前端的一种融合方式，目前也比较成熟，但是由于各类开发技术选型非常繁多，导致了在项目中配置不同，解决别人的问题，不一定能解决自己的问题。
乾坤微服务（Qiankun）样式隔离深度解析
liuyuanshuaia的博客
02-19 2882
乾坤通过Shadow DOM和动态作用域CSS双轨机制，为微前端应用提供了灵活的样式隔离方案。在实际项目中，开发者需根据浏览器兼容性、子应用技术栈及性能要求选择合适的策略。未来，随着Web Components技术的普及，Shadow DOM或成为微前端样式隔离的终极解决方案，但动态作用域仍将在过渡期扮演重要角色。最佳实践路线图默认启用。对高安全要求的子应用逐步迁移至Shadow DOM。结合CSS-in-JS方案（如styled-components）进一步规避冲突。
qiankun【隔离沙箱】
qq_32019935的博客
07-11 3183
qiankun隔离沙箱有两种，一种是js变量隔离沙箱，LegacySandbox 单例沙箱ProxySandbox 多例沙箱SnapshotSandbox 低版本沙箱一种是样式隔离沙箱样式隔离沙箱通过配置。
qiankun微前端 如何确保主应用跟微应用之间的样式隔离
热门推荐
就是不掉头发
12-20 23万+
qiankun 将会自动隔离微应用之间的样式（开启沙箱的情况下），你可以通过手动的方式确保主应用与微应用之间的样式隔离。比如给主应用的所有样式添加一个前缀，或者假如你使用了 ant-design 这样的组件库，你可以通过这篇文档中的配置方式给主应用样式自动添加指定的前缀。 以 antd 为例： 配置 webpack 修改 less 变量 { loader: 'less-loader', options: { modifyVars: { '@ant-prefix': 'yourPr
qiankun+vue3的源码案例
03-10
通过qiankun的沙箱机制，子应用可以在主应用中无干扰地运行，同时保持状态隔离，确保应用的稳定性和独立性。 qiankun框架介绍： qiankun是一个基于Single-Spa的微前端实现库，它解决了微前端架构中的诸多痛点，如...
vue qiankun 2023
10-26
6. **子应用隔离**：Qiankun 使用 Shadow DOM 技术，确保子应用样式隔离，防止样式冲突。同时，通过沙箱机制限制子应用的全局作用域，避免影响其他子应用。 7. **通信机制**：子应用间可以通过 `postMessage` API ...
微前端qiankun基本使用
10-18
qiankun支持基于路由的动态加载机制，这意味着子应用只会加载它们所需的部分，从而达到减少主应用体积的目的。同时，这种机制也能提高应用的加载速度和性能。 在实现微前端时，也会面临一些挑战，比如样式的隔离、...
微前端架构模板--qiankun.zip
07-14
6. **API隔离与通信**：提供API隔离机制，同时提供消息通讯机制，使得子应用间可以安全地进行数据交换。 7. **兼容性**：Qiankun支持主流的现代浏览器，同时也考虑到了旧版本浏览器的兼容性问题。 在实际项目中，...
qiankun 微前端 隔离子应用样式，解决 ant-design-vue 子应用样式污染问题（已落地）
qq_44933075的博客
07-31 2573
先分析乾坤qiankun 构建之后，会根据你的配置 给每个子应用生成一个id， 当加载到对应子应用的时候，就把内容放到对应的id 标签里去， 这样能有效的隔离 js 代码，但是样式是加载在全局的。所以 当两个子应用的 全局的样式名一样的时候， 切换的子应用的上一个子应用的样式没有被清除是公用，所以就造成了样式污染，同样主应用和子应用之间也会有这个污染。如果是elemt UI 的可以看 下面的博客，我借鉴过他的思路，也是他是通过改下 挂载函数的方法，思路很重要，主要就是解决挂载问题。
乾坤的样式隔离、微前端的样式隔离
m0_72996918的博客
09-23 1559
乾坤的样式隔离：乾坤是一种基于微前端的解决方案，它可以将多个独立的前端应用整合到一个单页应用中。在乾坤中，样式隔离是一个重要的技术挑战，因为不同的应用可能使用不同的 UI 库（如 Element-UI 和 Element-Plus），它们的前缀相同，这可能导致样式冲突。总结来说，乾坤通过使用Shadow DOM实现子应用的样式隔离，而微前端可以采用CSS命名空间、CSS-in-JS等方式来实现样式隔离。这个方法可以有效地将不同库的样式隔离，但它需要在应用中添加一些额外的代码，可能会增加应用的复杂性。
qiankun 框架是怎么做的样式隔离
阿臻
04-25 3068
Qiankun 是一个微前端框架，它在技术上采用了 Web Components 技术实现样式隔离。具体来说，Qiankun 利用 Shadow DOM 的特性，在应用程序容器中创建一个隔离的 DOM 树，使得每个子应用都可以拥有自己独立的样式作用域。 在 Qiankun 中，每个子应用都被封装为一个 Custom Element，这个 Custom Element 包含了子应用所需的所有 HT...
【qiankun】主应用css隔离、js隔离、日常通信机制
shidouyu的专栏
11-28 1099
qiankun是一个微前端框架，它提供了多种机制来确保主应用与子应用之间的独立性，包括CSS隔离、JS隔离以及日常通信等。
使用微前端（qiankun），解决样式污染问题
zhangjing1019的博客
01-26 6520
使用微前端拆分巨石项目，主应用使用VUE2.0+Element，子应用同样使用VUE2.0+Element。由于主应用和子应用使用了相同的框架，多数元素的class类名相同，子应用与主应用样式隔离不彻底，会导致页面样式错乱。完全使用qiankun自带的沙箱隔离会遇到一些坑。
qiankun css隔离导致antd样式失效问题
m0_51429350的博客
04-03 657
与 Ant Design（antd）的全局样式加载逻辑冲突，导致子应用的 antd 组件样式被覆盖或未生效‌。‌配置启用了Shadow DOM将子应用与外部dom完全隔离，自然也包括了body，导致子组件中antd的样式无法作用到body上，导致了样式的丢失。Antd的Modal，Drawer等组件默认是挂载在body标签下的，strictStyleIsolation。例如，在qiankun中，通过。方式使用StyleProvider可以提高antd的css样式权重，从而恢复样式‌。
前端微应用-乾坤（qiankun）原理分析-沙箱隔离（js）
最新发布
W1391517383的博客
04-21 966
到这里其实已经完成所有qiankun的分享，各个方面都详细说了它的优缺点。因为他是容器、子应用的模式，可以把全局的方法放在容器的windows上，比如可以放封装好的axios,然后达到统一后端的API交互，就不用每个模块都引入axios的相关代码了。可以放一个发布订阅者的API,达到跨应用交互api调用的效果。如果框架都一致，可以考虑把组件都放在容器的windows上，然后子应用就可以直接用了。中的子应用信息缓存，会照成内纯泄漏吗？
qiankun微前端
zhangyizuishuai的博客
07-19 384
如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。【比如我们嵌套antdUI框架，我们刚进入是首页，当我们切换到组件的路有时候，我们刷新父应用的页面，你会发现，iframe回到了antd的首页，而不是在组件库的路由上；基座就是所有子应用当中最大的父应用，就相当于我们的路由，子应用就相当于路由出口routerview，子路由可以用任何技术栈去写，并且单独部署；
qiankun微前端架构演示
- 样式隔离：确保各个微应用之间的样式不会互相干扰，保持独立性。 - 资源预加载：可以通过配置来实现微应用资源的预加载，优化加载时间。 - 全局状态管理：qiankun支持全局状态管理，使得不同微应用间可以共享状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值