认识微前端
前言：微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持
注：
微前端都有优缺点，需要按需求去选择，这里选无界，是因为大部分不支持vite
小满笔记：
https://juejin.cn/post/7212603829572911159
1、微前端概念
微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。
2、微前端特性
3、微前端方案
a、iframe
b、qiankun --》使用比较复杂 --》 自己写对vite的插件
c、micro-app --》京东开发 --》对vite支持更拉跨
注：
适配 vite 需要写很多代码，有些还要改，而且会失去很多功能！
d、EMP 方案--》必须使用 webpack5 --》很多人感觉不是微前端 --》 去中心化方式去共享模块，更像拆包
09:04
e、无界
p2 微前端前置知识 --》 webcomponents
渲染后
产生样式隔离
传参
接参
生命周期
p3 pnpm
1、安装pnpm
npm i pnpm -g
2、pnpm 较于npm优势 --》不会幽灵依赖+占用更小空间
前置知识-pnpm 底层原理 + monorepo架构 P3 - 00:55
3、pnpm使用到的技术：
a、硬链接+软连接
a.1、硬链接创建
注：
硬链接共享同一个内存地址
a.2、创建软链接 --》上图的符号链接
注：
软链接类似快捷方式
b、仓库 --》 全电脑的依赖都在这里，只有一份 --》 但是在C盘
幽灵依赖，参考渡一：网页链接
4、pnpm 的 monorepo架构
我们采用的是微前端一个主应用，和多个子应用，我们肯定不会一个一个去install安装依赖，采用monorepo 架构 一次install 即可安装完成。
a、构建主应用（非无界）
b、放入子应用
c、到根目录， pnpm init，创建 pnpm-workspace.yaml 文件
d、复制这段代码
执行 pnpm i
注：
I、main表示主应用要下载依赖；web/**表示web下的所有子应用都要下载依赖，更多配置见：https://www.pnpm.cn/pnpm-workspace_yaml
II、monorepo 会把公共的提出来
前置知识-pnpm 底层原理 + monorepo架构 P3 - 15:56
III、vue源码使用了monorepo架构，参考vue3源码解读：
https://wjchumble.github.io/explain-vue3/chapter1/#monorepo
5、monorepo架构特性
前置知识-pnpm 底层原理 + monorepo架构 P3 - 17:10
I、通过--filter(-F)去过滤执行哪一个文件中的命令！
II、子模块复用技术
pnpm -F main add common，就可以把复用的加到对应的文件中的package.json
p4 无界基础
1、在主应用安装无界
pnpm i wujie
2、主应用 main.js 引入 wujie
但是作者进行了封装，所以不用上述这样引入，变成了组件 wujie-vue3
安装
pnpm i wujie-vue3
引入
3、启动子应用，要开三个终端，分别起（也可以用 monorepo架构）
4、主应用使用
p5 自己封装 wujie-vue3 + webpack + swc + 发布npm
1、手写 wujie-vue3 --》 将无界封装成组件
2、写完后，使用webpack打包
二次封装无界 + webpack + swc + 发布npm P5 - 15:59
打包后的文件代码很多，因为把vue、无界都打包进去了
配置 打包不打包vue、无界
打包后发现没有转换成低阶语法
3、swc 代替 ts-loader+bable-loader，且构建速度很快 【迁移成本低】--》基于rust
安装依赖
webpack配置
就是把ts-loader换成了swc-loader！
此时打包完的还不能使用，需要配置webpack
注：
这个只有开发库的时候用到，让打包后的东西支持前端的引入规范用的
还是少了esmodule的兼容，使用swc
安装
新建配置文件 .swcrc
复制地址：https://swc.nodejs.cn/docs/configuration/swcrc
配置命令
ts报错：
二次封装无界 + webpack + swc + 发布npm P5 - 26:05
4、发布 npm
在package.json中添加一些配置
发包流程
p6 预加载
1、preloadApp实例 --》加上就可以预加载
源码
无界-预加载 + 底层原理 + 浏览器FPS帧率 P6 - 01:32
2、源码中重要的部分 requestIdleCallback
requestidlecallback 理解参考渡一：
浏览器的空闲时间 --》 requestidlecallback 的参数的 timeRemaining > 0 就表示还有多少时间去执行任务
a、60fps举例 --》这种情况一般没有多少时间留给 requestidlecallback 了
1000 / 60 = 16.6ms 之内完成输入渲染合成，空闲的时间才会留给 requestidlecallback
一帧做了什么事？
b、第二种情况是没有任务执行浏览器会有50ms空闲时间，这个时间段也会执行 requestidlecallback
c、和 react 中的 fiber 关系
因为react也有该机制 但是react并没有用 requestidlecallback，说是这个东西经过测试可能会超过16ms，超过16ms绘制就会看起来很卡 所以react16是用的 requestAnimationFrame + postMessage 实现的那为什么不用setTimeOut setTimeOut 及时为0 也会有一个最小毫秒延迟4ms，所以是用了postMessage。
react18又换成了MessageChannel 实现了队列方式去执行任务。
react 18 实现简单讲解
无界-预加载 + 底层原理 + 浏览器FPS帧率 P6 - 12:11
p7 跨应用传参
1、iframe
2、props
注意：
子应用是不用安装无界的！
3、event bus --》 无界的
p8 模块联邦技术
