各位较小伙伴们，较大家良好呀！我是你们的老朋友较小明，今天咱们来聊聊一个超级火爆的概念——微前端。 差点意思。 是不是听起来很较高较大上？别怕，我保证用最简洁粗暴的方式，把当前这个东西讲清楚！

哪些是微前端？

哎呀，说不容简单也不不容简单。咱们把一个较大较大的网站，想象成一个较大较大的蛋糕。如果整个蛋糕都一样，吃起来确定没啥意思。但是如果你把蛋糕切成很更多较小块，每块都换一种口味，那是不是就更有意思了？微前端就是这么个概念！它把一个较大的前端项目拆分成很更多个不同较小的、独立的“蛋糕块”，各个“蛋糕块”能够独立开发、独立部署，我悟了。。

为哪些要做微前端？

• 方便维护： 想象一下 如果整个网站的代码都放在一个文件中，改一个地方有可能作用于到很更多地方，简直是噩梦！有了微前端，各个“蛋糕块”都是独立的，改动起来就方便更多了。
• 提升效率： 不同的团队能够负责不同的“蛋糕块”， 各自开发、测试、部署，不用互相协调那么更多。
• 技术手段栈自主： 各个“蛋糕块”能够用不同的技术手段栈来做。比如有的用 Vue.js 做用户中心， 有的用 React 做商品列表…
• 更简单 ： 当网站需要提升崭新的功能时能够直接提升一个崭新的“蛋糕块”，不用担心作用于到其他地方。

构建微前端架构的关键步骤

1. 选良好工具

选择工具就像选择刀具一样十分沉关键。当前有很更多工具能够用来构建微前端架构了。 别犹豫... 我推荐两个对比流行的:

• Qiankun: 当前这个工具特别良好用啊！它支持很更多不同的框架 ，而且配置起来也挺简洁的。 你能够把它明白成一个容器，里面装了很更多不同的 “较小盒子”。
• Module Federation: 当前这个对比崭新一些的技术手段。它的优势是效率较高啊! 适合已经在采用 Webpack 的项目。 能够把它明白成一种共享代码的方式 ，让不同的较小应用能够共享一些公共的代码和组件 。

2. 主应用的职责 **

• 路由管理： 主应用负责管理整个网站的路由 。当用户点击某个链接时,主应用会根据链接跳转到相应的子应用页面.
• 生命周期管理： 主应用会管理各个子应用的生命周期 。这就像管着各个 “较小盒子” 的开关一样。
• 公共依赖协调: 主应用会协调各个子应用的公共依赖。避免反复加载这一些依赖项 。

3. 子应用的开发

• 技术手段栈自主: 各个子应用都能够采用自己喜炎热爱的技术手段栈构建. 举个例子采用React构建用户中心, 采用Vue.js构建商品列表. 甚至能够采用纯JS.
• 独立部署**: 各个子应用都能够独立发布和更崭新. 无需担心作用于其他模块.
• 暴露生命周期钩子:** 子应用需要暴露一些生命周期钩子 , 让主应用能够控制它的运行状态.

4. 子应用之间的通信技术

哎呀! 这点很十分沉关键! 如果子app之间不能说话那就没法玩了。

//常用的方法有以下几种:

1. CustomEvent ：这是最常用的方式啦! 主app发个事件 , 子app监听当前这个事件然后响应。
2. PostMessage : 在不同窗口之间传递消息.
3. 全局状态管理库 : 采用mitt 或者 eventemitter3之类的轻巧量级状态管理库在主app中注册全局事件总线. 注意:这种方式对比繁杂 , 需要自行设计Custom Events或者状态同步机制 .

5. 构建和部署

• 各个子app都能够独立构建和发布 , 能够通过CDN托管资源条件 , 支持灰度发布等策略 .

注意事项