微前端，相信大家都不陌生。简单地说，微前端是把一个大前端应用拆分为多个小应用（子应用），每个可以独立开发、独立部署、独立运行，最后再通过一个"主应用"整合在一起。
结构图
我们给出一个简单的结构图帮助你理解 
举个例子
假设一个大型电商网站有多个模块：
- 首页（使用 Vue）
- 商品详情页 （使用React）
- 购物车 （使用Angular）
传统方式：所有模块都在一个单体前端项目中开发和部署。
微前端方式：每个模块是一个独立的前端应用，并可能使用不同的技术栈，比如首页用Vue, 商品业用React。子应用分别由不同团队开发、部署。主应用根据用户的路由加载对应模块。
技术与解决的问题
下面，结合自己所学，列出微前端使用的主要技术，以及技术背后解决的主要问题
| 解决的问题 | 技术 | 简要说明 | 例子 |
|---|---|---|---|
| 子应用加载 | module/native federation | native/module federation都是用来加载远程模块的，只是module federation是webpack提供的，native federation与builder没有关联 | federation-demo来自的Angular Architect平台的Module Federation系列 |
| fetch | 使用浏览器原生的fetch也能从远程请求子应用资源，比如html,JS,CSS等 | 京东Mic-App使用fetch加载子应用 | |
| 应用隔离 | shadow DOM | 浏览器原生的shadow DOM允许开发者创建隔离的DOM子树，阻止与子应用发生脚本/样式冲突。(Note: 很多库(Angular、React等)组件不能在shadow DOM下很好的渲染，最好采用lit等web component技术框架) |
|
| iframe | iframe 为子应用提供了独立的 window、document、history、location | 腾讯的wujie使用iframe来做子应用隔离 | |
| JS sandbox + CSS isolation + DOM isolation | 通过window/document的proxy, 还有CSS加前缀类型的方式自行构造沙箱 | 京东Mic-App | |
| 应用通信 | postMessage API | iframe做隔离的应用之间使用postMessage来通信 | |
| JS observable | 使用observable来做一个应用间通信的event bus | wujie 的 eventBus 通信 | |
| Context | 这里把存放主应用上下文的容器(比如Angular的Injector,React的Context)与子应用的上下文容器链接起来，从而子应用可以向上检索拿到主应用上下文 | ||
| window | 通过window对象把主应用上下文传入子应用，比如把虚拟路由、event bus、用户授权等 | 京东Mic-App通过window proxy传入主应用上下文到沙箱中 | |
| 技术栈差异 | Web component | 子应用使用不同技术栈或者同一技术栈的不同版本时，把子应用包装成Web component，就可以让主应用做到框架不可知，无需安装多个不同的技术栈 |
总结
我们简单认识了什么是微前端，实现微前端的一些技术方案，以及他们背后解决的问题。后面的系列文章将会展开每一部分来讲，欢迎跟进阅读。