关键词：
参考技术A 【微前端】qiankun源码阅读(1)：Demo与single-spa流程【微前端】qiankun源码阅读(2)：加载子应用与沙箱隔离
通过前面的两篇可以大概了解qiankun的运行，其中可能会有些疑问：一个主应用有多个子应用，如果每次都在切换子应用时才去加载对应子应用的资源，那切换时的体验会比较差。为此，qiankun提供了预加载功能，可以看到在start中调用了 doPrefetchStrategy :
去到 src/prefetch.ts 中查看 doPrefetchStrategy ，可以看到其默认预加载策略是 prefetchAfterFirstMounted ，也就是等当前子应用加载完毕后，再去预加载其他子应用。 prefetchAfterFirstMounted 很简单，就是在 requestIdleCallback 中调用我们之前讲到的 importEntry 去加载每个子应用。
requestIdleCallback 是一个相对新的API，可以用它来执行一些低优先级的任务，它会在浏览器空闲的时候才去执行，从而避免影响当前子应用的加载。
另外有个问题是，如果我们每次切换应用都去 importEntry 重新加载资源，那不好。可以将资源保存起来。
这里其实也是 importEntry 做好了， importEntry 会将请求到的资源保存在 embedHTMLCache 变量中。
qiankun中的通信很简单，在 initGlobalState API文档 可以查看其使用。
这里源码在 src/globalState.ts 中。各种通信方式在微前端框架里同样适用，没啥好看。
qiankun框架的源码阅读暂时先这样，希望以后有应用场景可以使用一下这个框架。
解决qiankun微前端加载腾讯地图jsonp跨域问题
参考技术Aqiankun微前端框架加载腾讯地图会报jsonp请求跨域的问题,官网给的解决方案如下图所示：然而并不能解决实际项目遇到的场景，qiankun框架加载腾讯地图api，腾讯地图本身会动态加载一些JSONP请求的js，从而导致JSONP跨域错... 查看详情
qiankun微前端框架处理
...路由变化，加载不同的应用，实现应用解耦，single-spa、qiankun组合式集成：组件单独打包发布，类似于npm包EMP：主要基于Webpack5ModuleFederationwebcomponents：我们采用的是qiankun，主要思路是将一个大应用，拆分为更小的、可独立开发... 查看详情
微前端——乾坤qiankundemo
...制了！从而解决了前端协同开发问题。文档地址：https://qiankun.umijs.org/zh2018年Single-SPA诞生了，single-spa是一个用于前端微服务化的JavaScript前端解决方案(本身没有处理样式隔离，js执行隔离)实现了路由劫持和应用加载。2019年qiankun... 查看详情
前端微服务（qiankun）哈希路由实践(代码片段)
最近公司搞前端微服务，用了qiankun这个库，不得不说背靠轮子好乘凉啊~。qiankun介绍戳这里 https://qiankun.umijs.org/zh先看下效果 下面进入正题：我的项目，技术栈都是vue，主应用拥有自己的公共模块，同时需要以微应... 查看详情
qiankun子应用keep-alive实现方案
...、核心设计理念由于主应用微应用都能做到技术栈无关，qiankun对于用户而言只是一个类似jQuery的库，你需要调用几个qiankun的API即可完成应用的微前端改造。同时由于qiankun的HTMLentry及沙箱的设计，使得微应用的接入像使用iframe一... 查看详情
qiankun微前端应用实践与部署（四）
参考技术A一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用css文件里面引入资源路径加载失败的问题，下面就... 查看详情
qiankun+vue实现微前端架构(基于vue2实现)
参考技术A创建两个项目作为实现demo，一个为主应用，一个为子应用3.配置函数文件microAppSetting4.微应用出口文件index.js5.在App.vue内配置微应用容器及跳转菜单6.在main.js文件内引入微应用出口文件index.js7.运行后展示8.在配置完子应... 查看详情
基于qiankun的微前端实践(代码片段)
若干子应用接入问题：1.子应用不能直接对外暴露，如果附着在主应用，如何处理代理2.浏览器的Route路径需要处理，满足既能匹配主项目，又能匹配子项目3.静态资源需要处理，满足可以直接访问到子应用... 查看详情
基于qiankun的微前端实践(代码片段)
若干子应用接入问题：1.子应用不能直接对外暴露，如果附着在主应用，如何处理代理2.浏览器的Route路径需要处理，满足既能匹配主项目，又能匹配子项目3.静态资源需要处理，满足可以直接访问到子应用... 查看详情
基于微前端qiankun的多页签缓存方案实践
...联网前端团队-TangXiao本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。一、多页签是什么？我... 查看详情
qiankun框架对于微前端的解耦和沙盒与实战探索心得(代码片段)
@[toc]qiankun框架由于主应用程序和微应用程序可以独立于技术堆栈，所以qiankun只是一个面向用户的类似jQuery的库。需要调用几个API来完成应用程序的微前端转换。同时，由于qiankunHTML入口和沙盒的设计，微应用程序的访问与使用if... 查看详情
微前端方案qiankun只是更完善的single-spa
...很多，比较流行的是single-spa以及对它做了一层封装的qiankun。今天我们就来了解下这两个微前端实现方案：single-spa微前端的基本需求就是在url变化的时候，加载、卸载对应的子应用，singlespa就实现了这个功能。它... 查看详情
微前端架构-qiankun在vue3的应用(代码片段)
本文章介绍了qiankun在vue3的应用，其中子应用有vue2、vue3、react、angular介绍qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。其他几款（[single-spa]、[micro-app]... 查看详情
微前端qiankun架构(基于vue2实现)使用教程(代码片段)
...版本node-->16+@vue/cli-->5+创建文件创建文件夹qiankun-test。使用vue脚手架创建主应用main和子应用dev 主应用安装qiankun:yarnaddqiankun或者npmiqiankun-S使用qiankun：在utils内创建微应用文件夹microApp,在该文件夹内创建微应用出... 查看详情
qiankun实战（一）
...照那个方案调整是实现方面时间代价有点大，尝试了一下qiankun发现框架中可以不存在这个问题，所以决定更换微前端框架方案为qianun。如果想了解icestark可以看如下文章,里面有一些关于微前端架构理念的思考快速上手微前端框... 查看详情
androidpicasso图片加载库源码剖析
...图片加载缓存库。花了两天时间研读了下的阅读了下他的源码。做一下的剖析：Picasso的优点：足够轻量级:maven打包出来的jar只有130kb左右二级缓存策略，分别缓存内存和磁盘空间自动监控内存大小数据很好的线程控制... 查看详情
上线一个阿里qiankun“微前端”，逼走了2位90后(代码片段)
????序言作为一个团队领导者，需要经常帮助组员解决各类阻塞问题。????????????而我一直从事后端的开发，导致对前端的知识储备并没有那么丰富（实际很简陋）。鉴于当下流行的开发模式几乎都是前后端分离的&#x... 查看详情
微前端解决方案
...求。将微前端做到极致-无界微前端方案微前端（无界）qiankun方案qiankun方案是基于single-spa的微前端方案qiankun快速开始micro-app方案micro-app是基于webcomponent+qiankunsandbox的微前端方案。micro-app快速开始EMP方案MP方案是基于webpack5modulefed... 查看详情