从零打造微前端框架：实战”汽车资讯平台“项目
最近入职的一家公司采用single-spa这个微前端框架，所以自学了此框架。
single-spa这个微前端框架虽然有中文文档，但是有些零散和晦涩。
必看！如何download课程所以我想在学习之余，写篇博客拉平一下这个学习曲线。
什么是微前端？微前端的灵感来源于服务端微服务的理念。
可以简单理解为，在开发一个复杂前端应用时，将其划分为一系列更小更简单的前端应用。
这些前端应用可以单独开发、测试、部署，松耦合，可维护性强，还可以让前端代码实现增量升级和使用不同的框架。
它的懒加载还能让整个复杂应用加载速度变快。
常用微前端玩法和single-spa在我之前的公司是使用iframe来实现微前端的，但是各个子应用间的通信往往比较麻烦，而且很不灵活。
而最新的微前端理念，是由webpack5中模块联合特性实现的，这里就不多讲了。
single-spa是一个比较流行的微前端框架，它并不是使用iframe来实现微前端，也不是通过模块联合，而是通过路由路径来在dom上加载不同的子应用。
Importmaps和SystemJS在具体讲解single-spa前，我们得先了解一个东西：Importmaps。
这个功能是Chrome89才支持的。
顾名思义，它是对import的一个映射处理，让你控制在js中使用import时，到底从哪个url获取这些库。
比如通常我们会在js中，以下面这种方式引入模块：
importmomentfrom"moment"
正常情况下肯定是node_modules中引入，但是现在我们在html中加入下面的代码：
scripttype="importmap"{"imports":{"moment":"/moment/src/moment.js"}}/script
这里/moment/src/moment.js这个地址换成一个cdn资源也是可以的。最终达到的效果就是：
importmomentfrom"/moment/src/moment.js"
有了Importmaps，import的语法就可以直接在浏览器中使用，而不再需要webpack来帮我们进行处理，不需要从node_modules中去加载库。
Importmaps甚至还有一个兜底的玩法：
"imports":{"jquery":["