（一）导学

了解微前端

什么是微前端

为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制，将整体前端服务拆分成一些更小、更简单的，能够独立开发、测试部署的小块儿。但是在整体表现上还是一个整体的产品的服务称为微前端。

为什么要学习微前端

关键优势

每个分模块的规模更小，更利于维护
松散各个模块之间的耦合。
可以实现增量升级，避免在重构的时候影响整体逻辑
技术栈无关，可以在每个子模块之间选取合适的技术栈进行开发
独立开发独立部署

为什么要学

在重构项目的时候，总会有各种各样的问题，如：

• 项目技术栈落后，重构时混用多种技术栈，导致项目技术栈混杂。
• 各个模块之间耦合严重，动一处，可能影响整体项目运转
• 因为各种历史问题不得不做出各种妥协，或者是添加各种兼容条件限制。

当你也有以上问题的时候，不妨考虑使用微前端，不仅可以拜托繁重的历史包袱，让你可以进行轻松重构，而且不会出现重构不彻底的情况，可以根据需求的实际情况进行重构工作，而不是基于项目历史债务的问题进行考虑。

这是需要学习微前端一个很重要的前提，如果你的项目没有任何历史包袱，或者说项目是从零开始的，这样就不推荐你引入微前端这个东西，这样或许不能达到预期的目的，或许只会加重自己的开发负担。

手写一个框架可以给我们带来什么

可以从框架作者的角度去考虑，为什么框架的架构要这么设计，从中学习作者的设计思想，对于模型概念的理解。

很多同学都会说一个问题，现在框架学都学不会，怎么还会想着去手动实现一个呢。

其实对于实现一个框架来说，对你能力的提升是非常巨大的。

在实现过程中，我们可以学会思考一下几个内容

• 思考一个语言需要如何使用才能发挥它最好的性能
• 如何才能让自己的框架发挥出最大的优势
• api 如何设计，才能让使用者更加易于使用
• 如何设计场景有关的问题，才能让框架真正可移植。
• 如何更好的提示开发者，给他们提供最准确的错误提示
• 框架的受众是什么。明确框架要服务的对象

这些问题都是在创建一个框架的时候需要考虑的问题，只有将这些问题都做的比较好了，那才算是一个比较好的框架（也许视频里的框架实现的并没有这么完美，还请见谅）。

这也是我们要学着手动实现一个框架的原因。

微前端实现方式对比

iframe

优势：

天生支持沙箱隔离，这是最大的优势。不用做任何沙箱的处理。

劣势：

无法预加载缓存 iframe
无法共享基础库
事件通信限制较多
快捷键劫持
事件无法冒泡到顶层
跳转路径无法保持统一
登录状态无法共享
iframe 加载失败，主应用无法感知
性能问题难以计算

基于 SPA 的微前端架构

优势：

可以规避 iframe 现存的问题点：
可缓存和预加载
共享登录状态
主应用感知加载状态
快捷键劫持
通信设计
共享基础库

劣势：

实现难度较高。需要实现以下几项内容：
路由系统
沙箱隔离
样式隔离
通信
html 加载和 js 解析能力
调试开发能力

确定技术栈

使用 SPA 架构模式实现微前端架构。

项目架构图

前端架构的前世今生

初始

无架构，前端代码内嵌到后端应用中，html、js代码融合在后端代码中，所有交互功能是通过后端来实现的，数据也是通过后端进行注入的

后端mvc架构

将前端渲染体系从后端的服务体系中拆解出去，将视图层、数据层、控制层做分离，后端服务集中在控制层和数据层；
缺点：重度依赖开发环境，代码混淆严重

前后端分离架构

将前端代码从后端环境中提炼出来（ajax促进了前后端分离架构的发展）多页面架构；
缺点：前端缺乏独立部署能力，整体流程依赖后端环境

Nodejs的广泛使用促进了前端技术的飞速发展

各种构建、打包工具应运而生；
诞生了多元化前端开发方式，使得前端开发可以脱离整体后端环境，可以只部署或者只打包前端的依赖

单页面架构

打包：gulp、rollup、webpack、vite。。。
框架：vue/react/angular/。。。；
ui库：antd/iview/elementui/minitui。。。；
优势：
切换页面无刷新浏览器，用户体验好
组件化开发方式，极大提升了代码复用率
劣势：
不利于SEO，首次渲染会出现较长时间的白屏（可解决）

大前端时代

后端框架：express，koa
包管理工具：npm，yarn
node版本管理工具：nvm
过于灵活的实现也导致了前端应用拆分过多，维护困难
往往一个功能或需求会跨两三个项目进行开发

微前端等新型架构–天下大势合久必分分久必合

优势：
技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权
独立开发，独立部署
支持增量升级
微前端是一种非常好的实施渐进式重构的手段和策略
微应用仓库独立，前后端可独立开发，主框架自动完成同步更新
独立运行时，每一个子应用都是可以独立运行的
每个微应用之间状态隔离，运行时状态不共享，如果需要共享可以通过主应用进行共享

劣势：
接入难度较高
应用场景–移动端少，管理端多