1. qiankun 微前端应用实践与部署（四）
一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。
👉 独立应用下的 url-loader 配置：
因为 url-loader 的 options 项的属性 publicPath 属性默认是 '' ，表示相对路径，即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口，比如：
所有应用编译打包部署后，当主应用加载子应用，子应用加载自身的 css 文件样式时，由于 其对应的 css 文件里面的图片 url 引用是相对路径，会出现子应用的资源相对路径拼接主应用 domain 的情况，即子应用的 ../../static/img/bg_header.790a94f4.png 会在主应用的 domain 下进行资源的寻找，导致加载失败 404 的情况。
如果项目有用到第三方库，比如 element-ui ，那么就更有必要进行处理了。因为 element-ui 的字体图标是在 css 里面引入的，还有相关背景图片的引入也是在 css 里，所以需要配置 webpack 的 url-loader ，生产模式情况下直接指定资源前缀，使之成为绝对路径。
这样配置后，打包出来的 css 样式文件会变成：
资源是绝对路径，就不会出现上面子应用资源加载失败的情况。
但是，这种前端配置文件写死路径的做法灵活性并不好，比如不能做到编译一次，任意部署，因为路径写死，所以如果需要部署到其他服务器的话，就需要重新编译了。
接下来，讲的是实现灵活部署的方案。
我们在只编译打包一次前端应用的前提下，为了实现灵活部署，需要借助 nginx 来实现。
下面以 vue-cli 3 的配置为例，与 vue-cli 2 只是写法上的区别，其他都一样。
假设主应用部署地址是 192.168.2.192 ，子应用的部署地址是 192.168.2.192:7102 。
打包编译部署后，子应用的 css 文件里面的图片资源引用 url 如下：
主应用加载子应用的时候，子应用的资源拼接主应用 domian 后，子应用的 css 文件里面的图片资源加载路径 url 就会变成：
此时的关键就是要访问到子应用的资源，而不是去主应用资源目录去找。
所以我们采用 nginx 路径代理转发端口的方案，当应用访问 192.168.2.192/live 这个路径时，经过 nginx 进行路径代理转发配置，转发到子应用端口。
配置 nginx 代理规则：
此时真正访问的资源路径（子应用资源路径）是：
👋 至此，通过修改配置 url-loader 的 publicPath 以及配置 nginx 的路径代理转发，就可以实现编译打包一次，到处部署的目的。
2. 轻量、高效、功能强大的微前端框架-MicroApp
这几年后端的微服务是比较火爆，我们公司目前只要是新项目，基本上都是基于微服务去架构的，那么微前端是什么呢？
微前端是借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活
以前我们为了把几个独立运行的小型应用合并成一个应用都是通过iframe的方式去实现的，如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。
iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题
micro-app不是基于iframe架构的
micro-app提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的开箱即用功能
micro-app没有任何依赖
为了保证各个业务之间独立开发、独立部署的能力，micro-app做了诸多兼容，在任何技术框架中都可以正常运行。
下面我讲一下如何在Vue中使用micro-app
1、初始化一个基座应用
2、基座应用的文件修改
main.js修改
router.js修改
3、main-page.vue页面
4、创建一个子应用
5、子应用的router.js文件修改
6、src目录下新建 public-path.js
7、 main.js 引入public-path.js
到此这个简单的微应用就搭好了
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
3. 什么是后端开发，前端开发又是什么
前端和后端是编程开发的两个部分，前端后端都精通就是全栈开发
前端和后端是从开发者角度来说的，前端就是用户可见部分的优化、交互功能开发，随着软件WEB化，Html5前端开发技术的发展，前端的技术方向越来越多，可开发解决的功能很多。
web前端有广阔的发展空间，app、小程序、移动端、pc端等都是需要前端技术的开发支持才能够完成，技术门槛相对较低、需求量较大，薪资待遇良好。只要是互联网端的客户界面，就需要前端来制作完成，前端开发的编程量不大，但是需要部分编程，入门简单，但是要学的深入需要一个过程。
Web前端招聘岗位
• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师...
• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师...
• JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师...
• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师...
在互联网行业，前端有WEB前端、HTML前端等，随着互联网技术发展，就业方向也有很多。web前端的就业方向有web架构师、web前端工程师、HTML前端开发工程师、网页设计师等等。
HTML前端开发
与Web前端开发不同的是，使用HTML5不仅仅可以开发前端，还有网页游戏，手机APP，使用浏览器进行3D渲染等一系列建立在HTML5标准与搭载其标准浏览器上的开发，而未来可能会有更多的功能分支并入HTML5标准。web前端工程师
这个方向是目前从事Web前端开发的主要就业方向
Web架构师
薪资普遍比较高，技术要求高，掌握多种技能，包括：后端技术、DBA、Platform等等，甚至包括网站优化SEO技术。
数据方向
数据研发这个是在Web开发的基础上用数据附能，懂可视化的一定是有前端能力的，懂hadoop的一定java要熟悉，属于Web开发的拓展方向。
大前端方向
比如阿里，在大量实践rn和weex;由于公司内部安卓/ios式微，一定程度上，前端把ios和安卓收编了，统称大前端。
图形学方向
前端自然是与图形学有千丝万缕的联系，除了上面提到了可视化，还有相关3d引擎的开发工作。做这一行要求也非常高了，图形学相关的算法，3d引擎的开发，这都需要图形学相关知识。
4. 微前端——干坤qiankun Demo
微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！
我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。
文档地址： https://qiankun.umijs.org/zh
2018 年 Single-SPA 诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决方案 ( 本身没有处理样式隔离， js 执行隔离 ) 实现了路由劫持和应用加载。
2019 年 qiankun 基于 Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + import-html-entry ） 做到了，技术栈无关、并且接入简单（像 i frame 一样简单）。
这里我们打算建立三个项目进行实操，一个Vue项目充当主应用，另一个Vue和React应用充当子应用
基座：qiankun-base 子应用：qiankun-vue、qiankun-react
react + react-router 技术栈的主应用：只需要让子应用的 activeRule 包含主应用的这个路由即可。
vue + vue-router 技术栈的主应用:
用绝对路径，不用用相对路径，例如
qiankun 只能解决子项目之间的样式相互污染，不能解决子项目的样式污染主项目的样式
冲突的样式，采用BEM命名方式
子应用，需要增加 update 钩子以便主应用手动更新微应用
主应用，直接调用子应用实例的 update 方法即可
5. single-spa微前端简单实践与优化思路
微前端是指存在于浏览器中的 微服务 。
基于iframe的微前端因为不使用所以不在本文中出现具体表现为每一个子系统的子页面均是由iframe加载的，不同模块的前端应用之间可以相互独立运行
一开始就引入了多个应用的js。是把子应用直接加载到页面中。所有的子应用都运行在同一个内存空间。
simple-single-spa-webpack-example
通过配置externals可以减小子项目打包出来的体积。 webpack外部扩展
通过 system.js 优化资源加载
入口index.html只有一个，不一次性引入所有CDN资源，可能子项目A使用而B不使用导致重复引用systemjs只是在加载index.html时注册了这些CDN地址，不会直接去加载，当子项目里用到的时候，systemjs会接管模块引入，再动态去加载资源。避免不同子项多余加载。 参考demo地址
在获取子应用的配置信息时，我们可以按照约定 path 的规则，Single-SPA 对应 entry js/html 配置可以减少加载。
6. 微前端 -- 干坤（一）
在 toB 的前端开发工作中，我们往往就会遇到如下困境：
基座模式
通过一个主应用，来管理其它应用。设计难度小，方便实践，但是通用度低。
自组织模式。应用之间是平等的，不存在相互管理的模式。设计难度大，不方便实施，但是通用度高。
就当前而言，基座模式实施起来比较方便，方案也是蛮多的。
注册表模式
和微服务架构相似，不论是哪种微前端方式，都需要有一个应用注册表的服务。这个应用注册表拥有每个应用及对应的入口，即路由。
它可以是一个固定值的配置文件，如 JSON 文件，又或者是一个可动态更新的配置，又或者是一种动态的服务。
作用：
应用注册。即提供新的微前端应用，向应用注册表注册功能。
应用发现。让主应用可以寻找到其它应用。
首先看一下它的用法：
https://qiankun.umijs.org/zh/guide/getting-started
微前端每个应用都拥有自己的生命周期：
bootstrap， 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
Mount，应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
Unload，删除应用的生命周期
Unmount，应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
干坤，作为一款微前端领域的知名框架，其建立在single-spa基础上。相较于single-spa，干坤做了两件重要的事情，其一是加载资源，第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离.
每个微应用对全局的影响都会局限在微应用自己的作用域内。比如 A 应用在 window 上新增了个属性 test，这个属性只能在 A 应用自己的作用域通过 window.test 获取到，主应用或者其他应用都无法拿到这个变量。
1、快照沙箱
2、支持多应用的代理沙箱
💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
在使用 single-spa 加载微应用时，我们加载的不是微应用本身，而是微应用导出的 JS 文件，即JS Entry。
要接入一个微应用，就需要对微应用进行一系列的改造，然而 JS Entry 的问题就出在这儿，改造时对微应用的侵入行太强，而且和主应用的耦合性太强。
微应用改造一般分为三步：
l 微应用路由改造，添加一个特定的前缀
l 微应用入口改造，挂载点变更和生命周期函数导出
在js文件的入口中会导出一个对象，这个对象上有 bootstrap、mount、unmount 这三个接入 single-spa 框架必须提供的生命周期方法，其中 mount 方法规定了微应用应该怎么挂载到主应用提供的容器节点上。
l 打包工具配置更改
侵入型强其实说的就是第三点，更改打包工具的配置，使用 single-spa 接入微应用需要将微应用整个打包成一个 JS 文件，发布到静态资源服务器，然后在主应用中配置该 JS 文件的地址告诉 single-spa 去这个地址加载微应用。这就导致常见的打包优化基本上都没了，比如：按需加载、首屏资源加载优化、css 独立打包等优化措施。
项目发布以后出现了 bug ，修复之后需要更新上线，为了清除浏览器缓存带来的应用，一般文件名会带上 chunkcontent，微应用发布之后文件名都会发生变化，这时候还需要更新主应用中微应用配置，然后重新编译主应用然后发布，这套操作简直是不能忍受的。这也是 微前端框架 之 single-spa 从入门到精通 这篇文章中示例项目中微应用发布时的环境配置选择 development 的原因。
qiankun 框架为了解决 JS Entry 的问题，于是采用了 HTML Entry 的方式，让用户接入微应用就像使用 iframe 一样简单。
https://github.com/sy-l123/qiankun-demo
7. 快速上手微前端框架 icestark （一）
微前端本质和后端微服务理念是一样的，微前端解决方案一般包含如下特点
初始化 Vue 主应用
初始化 React 主应用
本地实例初始化的 Vue 主应用，运行如下
本地地址： http://localhost:3000
本地运行的官方主应用Demo,已经整合了官方提供的 Vue,React 子应用，接下来本地创建子应用，运行后分别挂在到本地启动的主应用中
Vue 子应用
本地地址： http://localhost:3001
React 子应用
本地地址： http://localhost:3333
在主应用中注册子应用，在主应用 App.vue 中的 onMounted 中修改 ice 注册配置，修改 name, activePath, title, entry 这四个属性即可
注意 activePath 指向子应用中的路由地址， entry 地址这里使用子应用启动后的根路由地址, 也可以指向对应的子应用指定地址, 如 http://localhost:3333/react
在主应用的 BasicLayout.vue 文件中配置 el-sub-menu
单独配置子应用路由对应主应用中的 activePath ，实现正常加载
React 子应用路由， 配置了一个 /react 路由地址
Vue 子应用路由, 配置一个 /vue 路由地址
这时候主应用的侧边栏的内容对应到本地启动的子应用，并且能访问就整合成功了，这时候已经本地示例实现了 icestark 框架的应用整合，应用接入，路由配置跳转的能力。
接下来，将在本地示例中实现子应用间的路由切换（页面跳转）和应用互相通信。
8. qiankun微前端框架处理
https://blog.csdn.net/qq_41694291/article/details/113842872
概念：微前端的概念借鉴于后端的微服务，一般以业务功能为拆分单元
解决问题：大型项目的变更、扩展、维护困难的问题
总体积变大，插件可上传cdn，但公共函数资源不便于共享
iframe ：隔离性和兼容性好，性能和使用感差（性能差因为不会有缓存，每次重新加载）
基座模式 ：基于 路由分发 ，由基座监听路由变化，加载不同的应用，实现应用解耦，single-spa、qiankun
组合式集成 ：组件单独打包发布，类似于npm包
EMP ：主要基于Webpack5 Mole Federation
web components ：
我们采用的是qiankun，主要思路是将一个大应用，拆分为更小的、可独立开发、测试、部署的子应用。
传统的大型项目：所有模块都在一个应用里，由应用本身负责路由管理，属于 应用分发路由 方式
拆分微应用的项目：属于基座模式下的系统架构，各应用互相独立，单独运行在不同的服务上，基座（基座一般是用户最终访问的应用）根据路由去加载不同的应用到页面上，即 路由分发应用 方式
微前段主要需要解决的问题有两个
qiankun和single-spa对比
activePath与当前的hash对比一致
9. web前端和后端有哪些区别
Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
web前端分为网页设计师、网页美工、web前端开发工程师。首先网页设计师是对网页的架构、色彩以及网站的整体页面代码负责网页美工只针对UI这块的东西，比如网站是否做的漂亮，web前端开发工程师是负责交互设计的，需要和程序员进行交互设计的配合。
web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。 后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样
实际的开发过程中，前端、后端开发人员的定位如下：
前端开发人员：精通JS，能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。
后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
10. 微前端前言
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
主框架不限制接入应用的技术栈，微应用具备完全自主权
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
每个微应用之间状态隔离，运行时状态不共享
微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
1.url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2.UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中。
3.全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4.慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。过于基础，成本太高，不建议。
qiankun是阿里推出的一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。因为是基于single-spa进行封装，所以single-spa的特点也被qiankun继承下来。成本低于single-spa，高于MicroApp。
MicroApp是京东推出的一款基于类WebComponent进行渲染的微前端框架，不同于目前流行的开源框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。是目前市面上接入微前端成本最低的方案。
single-spa github地址： https://github.com/single-spa/single-spa
qiankun官网： https://qiankun.umijs.org/zh
MicroApp官网： https://cang.org/micro-app/