微前端是什么?
微前端是一种架构方式。使得大型应用程序可以被拆分成许多独立的、但又可以相互协作的小型前端模块。每个模块都有自己的路由和独立的部署。 这种方法有助于提高应用程序的灵活性和可维护性,因为开发人员可以独立开发和部署每个模块。
解决什么问题?
传统的单体应用在开发和维护过程中越来越难维护,其中的难点包括:
- 复杂性管理: 单体应用随着功能增加变得越来越复杂,代码间的依赖关系变得难以理解和维护。
- 团队协作: 大型团队同时开发一个单体应用时,很容易造成开发冲突和版本管理困难。
- 独立部署: 单体应用整体部署的方式导致任何小的改动都要求整个应用重新部署,影响灵活性和效率。
微前端方案
- single-spa 解决主子应用加载的问题
- qiankun 基于single-spa 增加了沙箱、prefetch,解析 html 成 js & css 等基础建设
加载方式
- 手动加载
主应用手动加载方案初始化,注册配置文件。IApp 实例 load 函数会找到对应子应用的bundle,把子应用暴露出来的mount钩子做一个加载。
- 路由加载
区别在于路由控制,监听history行为,触发对应子应用的加载。
架构与核心实践
提前需要了解的知识
- 模块打包(AMD/commonJS/UMD/es Mudule)
- html5 history api
- html 在浏览器解析的过程
- js 隔离方案:iframe/proxy(全局变量,子应用是里面的小对象,get/set)/快照(把子应用的window缓存,切换对应应用的时候就是切换缓存)
- css 隔离:cssModule(外部的一种方法,算法生成 classname 不重名)/shadowDom
基本工作原理

资源解析器
有两种:url entry和html entry;
监听路由变化,url entry,本质就是静态资源,拿到对应的js/css,识别加载bundle,触发mount钩子,渲染对应子应用。
html entry 不是静态资源了,所以拿到html之后需要解析成js/css.

路由分发器
