目前国内最火的微前端框架是来自阿里的qi【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ankun，以及它底层的single-s本文作者：唐霜，转载请注明出处。原创内容，盗版必究。pa，但是，这是最终形态吗？在我看来并不【本文受版权保护】本文版权归作者所有，未经授权不得转载。是。无论是single-spa，还是qi本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ankun，都有比较强的协议规定，对原有【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net应用的侵入更多，细节上某些设计也不太符合【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。我的口味。这篇文章重新思考微前端这个话题本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net，聊一聊其中的一些技术点，提出一个更新更【转载请注明来源】本文作者：唐霜，转载请注明出处。酷更简洁的微前端框架：麦饭。
【本文首发于唐霜的博客】【转载请注明来源】原创内容，盗版必究。微前端到底要解决什么问题？【关注微信公众号：wwwtangshuangnet】
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net如果单纯从技术层面去思考，微前端最后很有著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。可能沦为玩具，无法成为主要生产方式。技术原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。领域有一项陋习，只要是新技术火了，不管三【未经授权禁止转载】转载请注明出处：www.tangshuang.net七二十一，上就是了。微前端火了，上就是了【未经授权禁止转载】【本文受版权保护】。为了微前端而微前端，只会让项目在之后的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net维护中，成本更大。我认为，就像vue所提【关注微信公众号：wwwtangshuangnet】【本文受版权保护】倡的一样，微前端是一个渐进式需求的结果，当你需要它转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】的时候，才使用它。【本文首发于唐霜的博客】
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。那我们什么时候需要微前端呢？回答这个问题本文作者：唐霜，转载请注明出处。【转载请注明来源】，也就回答了“微前端到底解决什么问题”这本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。个问题了。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】如果从微前端的形式出发，有些人会把重点放【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。在应用“可拆分”这个点上，认为微前端解决【原创不易，请尊重版权】原创内容，盗版必究。的是将一个大应用拆分成小应用，通过变小提【本文首发于唐霜的博客】【转载请注明来源】高效率或可维护性等。但是我认为，微前端真正要解决的是，当技术更新换代时，【转载请注明来源】【关注微信公众号：wwwtangshuangnet】应用可兼容不同代际应用，用阿里大佬的话，【转载请注明来源】【版权所有】唐霜 www.tangshuang.net就是“技术栈无关”。所谓“技术栈无关”不是说在开发的时候就【版权所有，侵权必究】【作者：唐霜】不考虑技术栈，而是当应用需要用新一代技术【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】写时，老技术栈的应用仍然可以被兼容，不需著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。要重写。兼容老技术栈，是微前端最基本的素质【作者：唐霜】。【版权所有，侵权必究】
【作者：唐霜】【版权所有，侵权必究】【未经授权禁止转载】原创内容，盗版必究。原创内容，盗版必究。微前端框架原创内容，盗版必究。
原创内容，盗版必究。【转载请注明来源】【版权所有，侵权必究】我们首先要了解，微前端架构本身要解决的问著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net题，以及从技术层面要解决哪些问题。微前端【原创内容，转载请注明出处】【转载请注明来源】，从技术上，目标是要在当前应用中运行其他【版权所有，侵权必究】【未经授权禁止转载】应用。其他应用在技术栈上，是未知的，无法本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】像我们在vue中使用别人开发的vue组件【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net，在react中使用别人开发的react【作者：唐霜】原创内容，盗版必究。组件，我们无法在当前的应用架构上预测别人本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】开发的组件/应用是不是符合本应用框架的协【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】议。因此，我们要找到一种办法，在当前应用【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net的技术架构上，可以运行别人通过任何技术栈【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。完成的应用，而这种方法，就是微前端，能够本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】支撑实现这效果的，就是微前端框架。
原创内容，盗版必究。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net技术上，我认为微前端框架解决的最主要问题【转载请注明来源】【版权所有，侵权必究】有三个：资源加载、环境隔离、父子通信。在【作者：唐霜】【版权所有】唐霜 www.tangshuang.net开发体验上，我觉得除了写法上简单之外，微【原创内容，转载请注明出处】【本文首发于唐霜的博客】前端框架应该做到对子应用的无侵入，也就是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。子应用开发者不需要思考它的外部环境如何使【本文首发于唐霜的博客】【版权所有，侵权必究】用它，这也符合Clean架构的思想。
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。我收集了网上看到的微前端框架/技术方案，原创内容，盗版必究。【本文受版权保护】现在把它们罗列出来进行对比。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】- Mooa：基于Angular的微前端服务转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net框架 https://github.com/p【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.nethodal/mooa 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。
- Single-Spa：最早的微前端框架，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】兼容多种前端技术栈。https://single-spa.j转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。s.org/ 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- Qiankun：基于Single-Spa【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，阿里系开源微前端框架。 https://github.com/u【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。mijs/qiankun 【本文受版权保护】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。
- Icestark：阿里飞冰微前端框架，兼【未经授权禁止转载】【本文首发于唐霜的博客】容多种前端技术栈 https://github.com/i著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ce-lab/icestark 【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- console-os 是在阿里云控制台体【原创不易，请尊重版权】【未经授权禁止转载】系中孵化的微前端方案， 定位是面向企业级【版权所有，侵权必究】【原创不易，请尊重版权】的微前端体系化解决方案。 https://github.com/a【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。liyun/alibabacloud-c未经授权，禁止复制转载。【本文受版权保护】onsole-os 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。
- Webpack 5 Module Fed本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.neteration：webpack给出的微前未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。端方案 https://webpack.js.o著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】rg/concepts/module-f转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ederation/ 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
- Luigi：一套复杂的分布式前端应用解决原创内容，盗版必究。未经授权，禁止复制转载。方案 https://github.com/S转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netAP/luigi 原创内容，盗版必究。【原创不易，请尊重版权】原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。
- FrintJS：自主解决依赖的微前端框架未经授权，禁止复制转载。【作者：唐霜】 https://github.com/f【原创不易，请尊重版权】【本文首发于唐霜的博客】rintjs/frint 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- PuzzleJS：一套复杂的前后端编译时【未经授权禁止转载】【作者：唐霜】相结合的微前端解决方案 https://github.com/p本文作者：唐霜，转载请注明出处。原创内容，盗版必究。uzzle-js/puzzle-js 【本文首发于唐霜的博客】【转载请注明来源】【本文受版权保护】
- ngx-planet：基于angular【原创内容，转载请注明出处】【原创不易，请尊重版权】的微前端框架 https://github.com/w【版权所有，侵权必究】【转载请注明来源】orktile/ngx-planet 本文作者：唐霜，转载请注明出处。【作者：唐霜】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。
- 麦饭（mfy）：由我开发的精巧简易微前端本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】框架 http://npmjs.com/pac本文版权归作者所有，未经授权不得转载。【转载请注明来源】kage/mfy 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
| 框架名原创内容，盗版必究。 | 技术栈无关未经授权，禁止复制转载。 | 子应用独立运行本文版权归作者所有，未经授权不得转载。 | 无侵入子应用著作权归作者所有，禁止商业用途转载。 | 多子应用共存本文版权归作者所有，未经授权不得转载。 | 路由穿透【版权所有】唐霜 www.tangshuang.net | 父子通信【原创不易，请尊重版权】 | 子应用嵌套子应用转载请注明出处：www.tangshuang.net |
| Mooa【原创不易，请尊重版权】 | ❌本文作者：唐霜，转载请注明出处。 | ✅【版权所有】唐霜 www.tangshuang.net | ❌【版权所有】唐霜 www.tangshuang.net | ❓【本文首发于唐霜的博客】 | ❌【转载请注明来源】 | ✅转载请注明出处：www.tangshuang.net | ❌【本文受版权保护】 |
| Single-SPA原创内容，盗版必究。 | ✅原创内容，盗版必究。 | ❌【版权所有】唐霜 www.tangshuang.net | ❌【本文受版权保护】 | ❌【原创不易，请尊重版权】 | ❌【未经授权禁止转载】 | ❌【未经授权禁止转载】 | ❌转载请注明出处：www.tangshuang.net |
| Qiankun【作者：唐霜】 | ✅【原创不易，请尊重版权】 | ✅本文作者：唐霜，转载请注明出处。 | ❌著作权归作者所有，禁止商业用途转载。 | ✅【原创不易，请尊重版权】 | ❌本文作者：唐霜，转载请注明出处。 | ✅转载请注明出处：www.tangshuang.net | ❌本文作者：唐霜，转载请注明出处。 |
| Icestark【原创内容，转载请注明出处】 | ❌【版权所有】唐霜 www.tangshuang.net | ✅未经授权，禁止复制转载。 | ❌【转载请注明来源】 | ✅本文版权归作者所有，未经授权不得转载。 | ✅【本文首发于唐霜的博客】 | ✅【原创不易，请尊重版权】 | ❌【版权所有】唐霜 www.tangshuang.net |
| console-os【作者：唐霜】 | ❌本文版权归作者所有，未经授权不得转载。 | ❌【本文首发于唐霜的博客】 | ❌本文版权归作者所有，未经授权不得转载。 | ✅【版权所有】唐霜 www.tangshuang.net | ❌【访问 www.tangshuang.net 获取更多精彩内容】 | ❓原创内容，盗版必究。 | ❌【转载请注明来源】 |
| Module Federation【关注微信公众号：wwwtangshuangnet】 | ❌转载请注明出处：www.tangshuang.net | ❌【版权所有，侵权必究】 | ❌本文版权归作者所有，未经授权不得转载。 | ❓著作权归作者所有，禁止商业用途转载。 | ❓【作者：唐霜】 | ❓本文版权归作者所有，未经授权不得转载。 | ❓【本文首发于唐霜的博客】 |
| Luigi著作权归作者所有，禁止商业用途转载。 | ❌本文版权归作者所有，未经授权不得转载。 | ❌【本文受版权保护】 | ❌转载请注明出处：www.tangshuang.net | ✅转载请注明出处：www.tangshuang.net | ❌本文版权归作者所有，未经授权不得转载。 | ✅【未经授权禁止转载】 | ❌原创内容，盗版必究。 |
| FrintJS未经授权，禁止复制转载。 | ❌转载请注明出处：www.tangshuang.net | ❌本文作者：唐霜，转载请注明出处。 | ❌【未经授权禁止转载】 | ✅本文版权归作者所有，未经授权不得转载。 | ✅转载请注明出处：www.tangshuang.net | ✅本文作者：唐霜，转载请注明出处。 | ❌未经授权，禁止复制转载。 |
| PuzzleJS本文版权归作者所有，未经授权不得转载。 | ❌【转载请注明来源】 | ❌转载请注明出处：www.tangshuang.net | ❌【版权所有】唐霜 www.tangshuang.net | ✅著作权归作者所有，禁止商业用途转载。 | ✅著作权归作者所有，禁止商业用途转载。 | ✅【本文首发于唐霜的博客】 | ❌【转载请注明来源】 |
| ngx-planet著作权归作者所有，禁止商业用途转载。 | ❌未经授权，禁止复制转载。 | ✅【原创不易，请尊重版权】 | ❌著作权归作者所有，禁止商业用途转载。 | ✅【访问 www.tangshuang.net 获取更多精彩内容】 | ✅【版权所有】唐霜 www.tangshuang.net | ✅本文作者：唐霜，转载请注明出处。 | ❌【作者：唐霜】 |
| 麦饭【关注微信公众号：wwwtangshuangnet】 | ✅未经授权，禁止复制转载。 | ✅【关注微信公众号：wwwtangshuangnet】 | ✅本文版权归作者所有，未经授权不得转载。 | ✅【访问 www.tangshuang.net 获取更多精彩内容】 | ✅【作者：唐霜】 | ✅【转载请注明来源】 | ✅本文作者：唐霜，转载请注明出处。 |
大部分框架还是存在一定的技术栈门槛，需要【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】开发者对框架进行大量学习后，在特定的条件转载请注明出处：www.tangshuang.net【未经授权禁止转载】下才能完成微应用的接入，而single-【作者：唐霜】【未经授权禁止转载】spa/qiankun采用expose接【原创不易，请尊重版权】【版权所有，侵权必究】口的方式，只要子应用对应导出bootst【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】rap,mount,unmount方法就【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。可以运行，而麦饭也是导出接口，但是不需要本文作者：唐霜，转载请注明出处。原创内容，盗版必究。子应用接入任何协议，子应用可以忽略麦饭存未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】在。子应用可以独立运行是一个必备的条件，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。因为开发者并不知道自己的应用会被哪些框架【版权所有，侵权必究】未经授权，禁止复制转载。哪去用，甚至在开发时，开发者不应该在潜意【作者：唐霜】原创内容，盗版必究。识里面刻印“要被使用”的思想，应该按照应本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】用开发的方式直接完成开发，并且可以独立部【原创不易，请尊重版权】【未经授权禁止转载】署运行。在所有框架中，只有麦饭做到了对子本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。应用的无侵入，不需要子应用按照特定的方式【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】开发或导出接口，这是对开发者最友好的方式本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。。另外，也只有麦饭做到了子应用内，还可以原创内容，盗版必究。原创内容，盗版必究。再嵌套子应用。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net麦饭，精巧简易【原创不易，请尊重版权】の【原创内容，转载请注明出处】微前端框架【版权所有，侵权必究】
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net对于开发者而言，特别是子应用开发者而言，转载请注明出处：www.tangshuang.net【未经授权禁止转载】如果不需要在子应用内再嵌套子应用，也不需本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】要和父应用通信，那么可以完全不理会麦饭。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】只有父应用的开发者，需要在代码中引入麦饭【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】的接口，而麦饭的接口非常简单，总共只有四转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。个，其中路由接口还是可选的，可不需要引入转载请注明出处：www.tangshuang.net【作者：唐霜】。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【未经授权禁止转载】<div class="container">
<mfy-app name="some"></mfy-app>
</div>
<script type="module">
import { importSource, resiterMicroApp } from 'https://unpkg.com/mfy/es/index.js'
const app = registerMicroApp({
name: 'some',
autoMount: true, // 自动挂载子应用
source: importSource('./apps/some/index.html'),
})
</script>
这就是麦饭最最最简单的使用方法，它包含三【未经授权禁止转载】未经授权，禁止复制转载。个部分：
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。- 在html结构中使用<mfy-ap本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】p>确定一个子应用要挂载的位置 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- registerMicroApp注册一个本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。子应用 本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
- app.bootstrap/app.mo【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】unt启动和挂载注册好的子应用（上面代码【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】中通过autoMount配置，让子应用自本文作者：唐霜，转载请注明出处。【转载请注明来源】动启动并挂载） 转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】原创内容，盗版必究。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net
在没有路由系统的情况下，开发者要自己决定【作者：唐霜】【本文首发于唐霜的博客】什么时候启动、挂载、卸载、销毁该子应用。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。麦饭的全部接口，总共就四个接口，其中路由【本文受版权保护】【版权所有，侵权必究】和通信接口还是可选的。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文受版权保护】【原创不易，请尊重版权】【作者：唐霜】【作者：唐霜】
环境隔离【作者：唐霜】
【本文受版权保护】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。微前端中，最难解决的就是环境隔离问题，这【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net个问题包含两个具体问题：样式隔离，JS运【未经授权禁止转载】转载请注明出处：www.tangshuang.net行隔离。在麦饭中，提供了3种隔离方案，一【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。种是iframe，一种是shadowdo本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】m，一种是none（默认），不同方案通过转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。type进行配置。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】iframe方案将子应用放在一个沙箱模式本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net下的iframe中，其内部具有较独立的运转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】行环境。但iframe方案的缺点也很明显本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】，当iframe的src被修改时，所有资本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。源会被重新加载，无法复用资源缓存；另一个本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。缺点是iframe形成了封闭文档，导致一本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】些被挂载在document.body下的【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。弹出层无法在顶层窗口打开，所以，ifra【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。me不适合这种情况，或者仅适合将ifra【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】me铺满整个屏幕的情况。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。shadowdom方案将子应用放在一个s【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】hadowdom中，所有样式被加载在这个【转载请注明来源】【原创不易，请尊重版权】shadowdom内部，因此样式实现了快【作者：唐霜】著作权归作者所有，禁止商业用途转载。速隔离。不过，由于样式只在shadowd【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netom内生效，这导致被挂载到外部文档的节点本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】丢失了样式，为了解决这个问题，我提供了h【本文首发于唐霜的博客】【原创内容，转载请注明出处】oistCssRules配置项，让开发者本文作者：唐霜，转载请注明出处。【未经授权禁止转载】自己决定，哪些样式将被挂载在顶层文档上，【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】以保证弹窗样式的正常。JS运行时的隔离是【未经授权禁止转载】【作者：唐霜】个大问题，麦饭采用了代理沙箱，为子应用的转载请注明出处：www.tangshuang.net【转载请注明来源】脚本运行创建了一个虚拟的环境，子应用的脚【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。本都在这个环境中运行（注意：子应用中ty本文版权归作者所有，未经授权不得转载。【转载请注明来源】pe=”moduleR著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。21;的脚本块无法在沙箱中运行，这个问题原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】尚未解决），这样就避免了子应用脚本运行时【本文受版权保护】【转载请注明来源】可能对父应用产生的某些破坏。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。和其他框架不同，麦饭不仅隔离了全局变量，【作者：唐霜】【转载请注明来源】还虚拟了子应用的location和his著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】tory，子应用内部的代码可以正常改变u著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。rl来达到界面变化的效果，但对于父应用而未经授权，禁止复制转载。【未经授权禁止转载】言，子应用的url变化不会影响浏览器的u【转载请注明来源】本文版权归作者所有，未经授权不得转载。rl变化。
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】转载请注明出处：www.tangshuang.netnone方案将子应用直接运行在当前文档中【转载请注明来源】【作者：唐霜】，所有样式被加上一个前缀实现样式隔离，但转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】js完全没有隔离，路由也是和当前浏览器u转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。rl共享。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【未经授权禁止转载】资源加载【原创内容，转载请注明出处】
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】麦饭中，我们需要使用importSour【转载请注明来源】【原创内容，转载请注明出处】ce加载资源，之所以要自己提供接口来加载【转载请注明来源】著作权归作者所有，禁止商业用途转载。资源，主要有两点考虑：1.资源缓存；2.未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net为资源绑定基础环境。麦饭遵循的第一原则是【未经授权禁止转载】本文作者：唐霜，转载请注明出处。，对已有的应用不做任何修改，就可以拿过来当本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。作子应用进行加载和运行。我们主要面对的是技术更新迭代时，不想重【版权所有，侵权必究】未经授权，禁止复制转载。写老应用的尴尬，而没有考虑微前端的另外一原创内容，盗版必究。【本文受版权保护】个场景：项目一开始就要求所有团队按照微前转载请注明出处：www.tangshuang.net【未经授权禁止转载】端架构进行开发，子应用团队必须提供对应的【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。接口。正是由于这种限制，导致麦饭在实现时转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net更难，最终得到的结果也有一些限制，比如，【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。麦饭很难解决跨域加载资源的问题，如果将子本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net应用放在另外一个域名下面，比如cdn域名著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net上，就会产生问题，这是不同选择得到的结果著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】，没有好坏之分。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】正因为我想不对子应用做任何修改就可以立即【作者：唐霜】【关注微信公众号：wwwtangshuangnet】运行，所以，我选择以子应用的index.本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】html作为子应用的入口，去解析inde未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。x.html的内容，然后加载到父应用中来原创内容，盗版必究。【原创不易，请尊重版权】运行。
【本文受版权保护】【原创不易，请尊重版权】【本文首发于唐霜的博客】【原创内容，转载请注明出处】解析时，会遇到子应用引用了其他资源的问题【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。，一般而言，我们的应用都是以外链的形式引本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。入css和js文件，现在已经很少看到直接【原创不易，请尊重版权】【作者：唐霜】把style和script写在html中著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】的应用了。所以，在加载html之后，我需本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。要再次请求里面的样式和脚本文件的内容。这转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。里还是比较简单的，但是，接下来就会遇到新【原创内容，转载请注明出处】原创内容，盗版必究。的问题，在样式表中，我们经常会看到使用 转载请注明出处：www.tangshuang.net【未经授权禁止转载】@import 引用其他css文件，使用著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。 url() 引用图片等，这怎么办呢？我原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。通过对样式表的解析，把这部分内容全部替换【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，比如 @import 的其他样式，我再本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。次进行加载解析，把解析出来的样式表平铺到【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】一个style标签中，如果里面还有嵌套，转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】就再这么做一次。
【本文受版权保护】【本文首发于唐霜的博客】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【本文受版权保护】对于使用 <script src&【转载请注明来源】未经授权，禁止复制转载。gt; 的方式引入脚本的情况，如果直接插【版权所有，侵权必究】原创内容，盗版必究。入该script标签，那么脚本将不会在沙【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】箱中运行，所以，处理时也像上面 @imp本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ort 的处理方式，把脚本内容请求回来之【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。后，在放到沙箱中运行。
未经授权，禁止复制转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】【未经授权禁止转载】父子通信【版权所有，侵权必究】
【本文受版权保护】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net在麦饭中，每一层的运行环境都对应一个sc原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netope，它的作用就是帮助父子应用进行通信【版权所有】唐霜 www.tangshuang.net【作者：唐霜】（子应用之间也可以通信，但是需要借助父应本文作者：唐霜，转载请注明出处。【未经授权禁止转载】用，有点像react中两个子组件通信一样本文作者：唐霜，转载请注明出处。原创内容，盗版必究。）。
本文作者：唐霜，转载请注明出处。【作者：唐霜】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】<script type="module">
import { connectScope } from 'https://unpkg.com/mfy/es/router.js'
const scope = connectScope()
scope.emit({ type: 'event', message: 'ok' }) // 向父应用发送消息
scrope.listen((data) => { // 接收到来自父应用发送的消息
const { type } = data
// ...
})
scope.watch(name, (data) => { // 接收到来自子应用发送的消息，name为子应用的名称
// ..
})
scope.send(name, data) // 向单个子应用发送消息
scope.dispatch({ type: 'event', message: 'gogo' }) // 向所有子应用广播消息（不包含孙应用）
scope.broadcast({ type: 'xx', message: 'oo' }) // 向整个应用树广播消息，自顶向下进行广播
</script>
由于通信系统的存在，应用间的通信和状态共转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。享成为可能，但是我并没有设计真正的状态共【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net享机制，因为对于微前端架构而言，子应用之【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】间应该尽可能的保持状态隔离，不应该有状态【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。依赖，当然，两个子应用使用同一个全局状态【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】管理器来达到共享全局状态的效果也是可行的【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。，但这样做会让子应用本身的纯净性产生复杂转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】数据问题，理论上，一个子应用的开发者，是【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。不会知道也不应该知道自己的应用会和哪些子本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net应用一起运行的，所以，实在需要共享一些数著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。据时，通过消息传递的方式来进行消息发送。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。路由映射【原创不易，请尊重版权】
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】著作权归作者所有，禁止商业用途转载。路由系统是可选的，但是作为微前端解决方案【本文首发于唐霜的博客】【原创内容，转载请注明出处】，麦饭提供了一种路由映射机制。因为子应用【本文受版权保护】【作者：唐霜】是运行在沙箱中的，所以，不同层的应用得到【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。的location是不同的，父级应用使用原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。浏览器的location，但是它的子应用未经授权，禁止复制转载。【原创内容，转载请注明出处】则不是，我们修改浏览器的url之后，可以【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net通过路由映射机制，伪造子应用得到的url未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】：
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】<script type="module">
import { registerRouter } from 'https://unpkg.com/mfy/es/router.js'
const router = registerRouter({
autoBootstrap: true,
routes: [
{
app: app,
match: ({ hash }) => hash.indexOf('#app') === 0,
map: ({ search }) => '#' + search, // 将父级路由映射到子应用内部，子应用将接收到这里map结果的路由
},
],
})
</script>
路由系统其实也很简单，主要是完成路由匹配原创内容，盗版必究。【原创不易，请尊重版权】和映射逻辑。匹配是为了当父应用获得某个u【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。rl之后，触发子应用的mount，当然，【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】对应的match返回false时子应用u【版权所有，侵权必究】【原创不易，请尊重版权】nmount。映射是为了保证父应用所在页【转载请注明来源】本文作者：唐霜，转载请注明出处。面的url被转化为一个新的url传给子应【原创内容，转载请注明出处】【本文受版权保护】用，也就是说，子应用读取自己所在环境下的本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。url得到的不是浏览器的url，而是经过原创内容，盗版必究。未经授权，禁止复制转载。处理后的环境url。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】应用树【本文受版权保护】
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】我发明了一种应用树的数据结构，在一个微前【作者：唐霜】【版权所有】唐霜 www.tangshuang.net端应用中，会构建一个树状的应用结构。一个【本文受版权保护】原创内容，盗版必究。麦饭应用，当它作为顶层应用时，它就是应用【原创不易，请尊重版权】【转载请注明来源】树顶端的应用，它作为子应用时，就在应用树【转载请注明来源】【作者：唐霜】的网络中。一棵应用树的结构大致是这样：
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。
每一个app都处在一个scope中，最顶未经授权，禁止复制转载。未经授权，禁止复制转载。层的scope被称为root scope【本文首发于唐霜的博客】【原创内容，转载请注明出处】，一个scope内可能有一个或多个app本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】，一个app在启动之后，又会形成自己的s【未经授权禁止转载】【作者：唐霜】cope（作为自己子应用的scope）。【本文受版权保护】本文版权归作者所有，未经授权不得转载。基于这一设计，处于应用树中的应用相互通信【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。成为可能，前面已经介绍过scope的通信【原创内容，转载请注明出处】【作者：唐霜】功能，此外，rootScope还具有向整【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】个网络广播的功能。从js本质上讲，roo【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】tScope是一个对象，可以在所有应用中【本文受版权保护】原创内容，盗版必究。被读取，也可以用来共享状态，但是，这显然【转载请注明来源】著作权归作者所有，禁止商业用途转载。是不被推荐的。
原创内容，盗版必究。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。这种树状结构和组件式开发基本一致，它有它【未经授权禁止转载】【未经授权禁止转载】的好处。在编程上，你可以在应用中嵌套子应【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】用，就像在组件中嵌套子组件。在数据流上，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net它也类似react一样，通过props完【未经授权禁止转载】【本文受版权保护】成数据的上下传递。
【版权所有，侵权必究】【转载请注明来源】原创内容，盗版必究。【转载请注明来源】转载请注明出处：www.tangshuang.netCustom Element【版权所有】唐霜 www.tangshuang.net
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【版权所有，侵权必究】在设计中，麦饭要求开发者在html中使用【转载请注明来源】未经授权，禁止复制转载。<mfy-app>标签来决定【原创内容，转载请注明出处】【作者：唐霜】子应用被放在什么位置。这个设计从技术层面【本文受版权保护】【本文首发于唐霜的博客】可以解决几个问题，和其他微前端框架相比【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】，具有更加明确的辨识度。为什么要这么设计转载请注明出处：www.tangshuang.net【本文受版权保护】呢？
著作权归作者所有，禁止商业用途转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。一是解决标签被卸载和重载问题。在vue组【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】件中，我们可能写出类似 <mfy-app name="xxx" v-if="showXXX"> 这样的控制代码，或者，<mfy-【版权所有，侵权必究】转载请注明出处：www.tangshuang.netapp>标签的父元素上挂载了v-i【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netf，这种在编程中是非常常见的。在其他框架转载请注明出处：www.tangshuang.net原创内容，盗版必究。中，如果被子应用挂载的节点被移除了会发生原创内容，盗版必究。【转载请注明来源】什么？这我真没有研究过。但是在麦饭中，&【转载请注明来源】【原创内容，转载请注明出处】lt;mfy-app>被从文档中移本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】除之后，当它再次回来时（创建或重新插入）【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，它将仍然工作。这主要是利用了custo【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】m element的监听能力。
另一个，解决子应用挂载和卸载的过渡动画效原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。果。没错，麦饭支持子应用的transit未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ion动画，在live demo著作权归作者所有，禁止商业用途转载。中你可以看到，子应用的出现是滑动过来的。【本文受版权保护】【原创内容，转载请注明出处】由于我们使用了custom elemen转载请注明出处：www.tangshuang.net【本文受版权保护】t，可以方便的处理shadow dom内著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】部的元素的出现和隐藏，也就很好的实现了动【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】画效果。
【本文首发于唐霜的博客】【本文受版权保护】本文版权归作者所有，未经授权不得转载。另外，使用custom element还未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。避免了和原文档中其他标签冲突，形式上也更原创内容，盗版必究。【原创内容，转载请注明出处】有辨识度，团队成员一看到这个标签，就知道【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。这是一个麦饭应用，而无需通过阅读代码来寻【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net找一个子应用将被挂载到那个元素上面。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【作者：唐霜】没有银弹💔【关注微信公众号：wwwtangshuangnet】
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创内容，转载请注明出处】和所有聊微前端的文章一样，我也要说这句话原创内容，盗版必究。原创内容，盗版必究。。微前端不是解决前端所有问题的统一方案，【本文受版权保护】【原创不易，请尊重版权】我们应该学习vue的渐进式思维，在需要的转载请注明出处：www.tangshuang.net【本文受版权保护】时候使用微前端，不需要的时候丢在一边。
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】当遇到如下场景时，是可以考虑使用微前端的本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】：
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【转载请注明来源】- 系统合并兼容：老系统还在运行，不想重新开原创内容，盗版必究。本文作者：唐霜，转载请注明出处。发一遍，此时可以在新系统中采用微前端方案著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。加载老系统 【作者：唐霜】原创内容，盗版必究。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
- 巨无霸应用拆分：应用模块复杂又庞大，一个【原创内容，转载请注明出处】原创内容，盗版必究。团队的人员维护起来疲于奔波，不如将团队进【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】行拆分，每个squad专注一个或两个应用 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创不易，请尊重版权】
- 渐进式技术栈升级：想尝试新技术，又不敢直【本文受版权保护】著作权归作者所有，禁止商业用途转载。接在整个系统中马上引入，不如将其中的一个本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】子应用先用新技术栈实现跑跑看 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。
对于麦饭而言，出发点集中在第一点上，也就【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。是完完全全不想改动已有的应用，但是又要使【作者：唐霜】转载请注明出处：www.tangshuang.net用新技术实现新系统。后面两点的出发点本身【转载请注明来源】【版权所有】唐霜 www.tangshuang.net就不是麦饭的初衷，当然，如果有一个过渡期【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。，通过麦饭进行改造，也可以在团队中实施分【版权所有】唐霜 www.tangshuang.net【转载请注明来源】治，也就是整个应用按父子应用进行拆分。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】原创内容，盗版必究。结语未经授权，禁止复制转载。
【作者：唐霜】【版权所有，侵权必究】【原创不易，请尊重版权】我认为微前端框架最主要要解决的是资源加载【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net、环境隔离、父子通信问题，但并不意味着微未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net前端只有这三个问题，其他问题不重要。实际【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】上，在微前端的部署上也是一个重要话题，因【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】为麦饭要求应用尽可能是同域的，这就导致在本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】部署时，不大可能直接通过发cdn就可以完【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net成，具体怎么做还需要在实践中不断摸索。总【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net之，在微前端的路上，我迈出了这一步，带来【版权所有，侵权必究】转载请注明出处：www.tangshuang.net了一个使用起来极其简单的框架。
【原创不易，请尊重版权】【版权所有，侵权必究】【原创内容，转载请注明出处】【本文受版权保护】2020-11-02 7819
