部门：金融服务（貌似是支付相关）时间：笔试完三天约面一面：实习及项目相关了解微前端吗微前端怎么匹配子应用qiankun框架和其它微前端框架隔离策略的不同之处qiankun为什么要求子应用打包是umd格式umd、CommonJS、ESModules有什么区别reactfiber原理react18有什么更新

说到微前端，现在最火的方案就是qiankun。qiankun的特点是易用性和完备性很高。说白了就是能很方便、快速的接入，同时bug少，功能强大。介绍微前端已经火了一段时间了，就不介绍了，直接贴图得了。话不多少，本次主要做两件事情：拆解和解析qiankun源码尝试qiankun造轮子分析qi

qiankun是一个很流行的微前端解决方案。之前我也详细的分析过qiankun的原理，感兴趣的可以看看。Vite是当下比较流行的构建工具，它对标的是webpack，并作为Vue3脚手架的默认工具替代了老版vue-cli中的webpack。当然，Vite不仅仅能使用在Vue中，React+Vite也是很好用的。它的特点就是

没有特别的幸运，那么就特别的努力！！！前言涉及到环境npm：9.6.3node：19.9.0node官网地下载址：https://nodejs.org/dist项目框架主应用：vue2微应用1：vue2，qiankun官网API是基于vue2+webpack。微应用2：vue3+vite+ts，目前官网没有vue3示例，需要介入vite-plugin-qiankun插件进行处理

前言：qiankun官网qiankun(乾坤)微应用框架。可以让很多应用集成到一个项目里来。但集成时样式隔离是个很大的问题（坑）。官网也给出了一些解决方案。虽然无界完美的解决了样式隔离的问题（它的底层使用iframe实现的），同样它也有其他缺点：无界官网qiankun也给了为什么不用ifr

qiankun是single-spa二开；使用场景：不同技术栈，不同团队，独立开发部署、增量升级；总结：解耦；        主应用:具有整合-输入子应用的html入口；子应用  与single-spa基本一致，导出了三个生命周期函数 (bootstrapmountunmout)js沙箱:三个沙箱（快照沙箱、

一：Vue2改造主应用创建方式：vuecreatevue2-master 1:在vue2项目src下撞见qiankun文件夹用于注册和启动子应用配置创建index.js创建app.js。注册。name要和子应用vite.config.js配置相同。container要和indexView中id相同创建indexView.vue。用于显示微应用

title:Vue微前端架构与Qiankun实践理论指南date:2024/6/15updated:2024/6/15author:cmdragonexcerpt:这篇文章介绍了微前端架构概念，聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化，以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应

title:Vue微前端架构与Qiankun实践理论指南date:2024/6/15updated:2024/6/15author:cmdragonexcerpt:这篇文章介绍了微前端架构概念，聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化，以达到高效开发和维护的目的。讨论了Qiankun的原理、如何设置主应用与子

前一篇文章讲了qiankun集成vue子应用，这篇随笔讲集成react子应用。1、创建react子应用用react脚手架初始化一个react项目，至于项目的数据仓库store和路由、以及UI组件库这里就不做讲解，可以自己自行网上找资料配置。create-react-appmy-react-app2、在src路径下创建publicPat

一、背景‘熵增’问题一直是所有软件开发中都会遇到的问题，不管是前端还是后端都会遇到，老的系统在需求不断变更或者迭代，代码量会越来越大，最终都会形成一座‘屎山’，今天主要讨论前端对于这种情况的解决方案。目前前端的解决方案有比较古老的iframe，但是iframe是完全隔绝了

概论主要是有一个微前端的主权项目，实现对微服务的调用，类似iframe显示，父应用和子应用可以通过一些数据通信方式实现数据通信。代码微前端注册importVuefrom'vue'importAppfrom'./App.vue'import{registerMicroApps,start,setDefaultMountApp}from'qiankun'im

微前端用通俗易懂的话来说就是：一个主应用（基座）中可以搭建多个子应用（微应用），这些子应用可以是不同版本，不同前端框架，而且跟主应用的语言无关，主应用仅仅是一个基座。正常一个项目想要展示另一个项目，通常会用iframe进行嵌入，但是相比iframe，qiankun等微前端的接入表现形式会更加友好，

为什么要有js资源隔离机制？主应用和子应用，相同的全局变量，可能会发生冲突，子应用和子应用之间，相同的全局变量，也可能会发生冲突。在这里我们主要指的就是window。思路：打开沙箱时能够修改属性值；关闭沙箱时恢复未开启沙箱前的属性值，并且要记录修改了哪些属性。qiankun.js隔离机制Sn

本文将针对微前端框架qiankun的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是微前端。微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立

子应用主应用间如何通信qiankun官方提供了actions通信，qiankun内部使用initGlobalState(state)定义全局状态，该方法执行后返回一个MicroAppStateActions实例，实例中包含三个方法，分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。MicroAppStateActionsonGlob

 废话不多说先了解下在实践。1.什么是微前端web应用构建方式微前端 微前端在2016年ThoughtWorksTechnologyRadar正式被提出。微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化，富交互化，也就是SPA应用；这样越来越

qiankun中的文件路径问题qiankun中entry为什么是长这样//hostname/subpath/?import-html-entry中，采用了newurl(entry,window.location);,详细参考MDN,简单说，它会采取当前的网络协议(http:/https:),然后拼接成entry,也就是http(s)

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

三个项目，一个管理端，两个微前端文档地址 https://qiankun.umijs.org/zh普通项目管理端安装qiankun   npmiqiankun-S管理端main.jsimportVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=false//引入qiankunimport{ registerMicroApps

微前端实战什么是微前端微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且

这是第一次微前端很常见的提示，尤其是第一次写前端的时候碰到的解决1：主应用的 App.vue标签上的id="app"去掉，这是报错的根本解决2：//在子应用挂在的时候处理functionrender(props={}){const{container}=props;instance=newVue({render:h=>h

一、安装1、主应用安装qiankun(子应用只做代码配置，无需任何安装)yarnaddqiankun#或者npmiqiankun-S 二、关键参数介绍1、主应用注册微应用import{registerMicroApps,start,setDefaultMountApp,  loadMicroApp  }from'qiankun';registerMicroApps(apps,

在当前云原生微服务、业务中台、低代码平台等IT架构下，不再是传统的烟囱式应用系统建设，而是打破企业业务部门竖井，建立企业级的信息化平台（数据中台、业务中台），那么对业务开发的解耦和聚合将成为关键技术，目前对于系统后端已有成熟的微服务架构，基于SpringBoot开发微服务，通过SpringCloud