前言 目前接触过很多SaaS系统。随着业务量的升级，项目不得不做拆分。保证系统稳定性的前提，优化开发人员的体验。 目前在做这块的升级，所以调研了一些主流方案，有兴趣的来看看吧

# 背景 我们有多个平台需要用到一些公共的业务组件，比如说消息中心，用户反馈等等。如果在多个平台全部开发一遍，或者是ctrl c+v，显示是很不适合后续的维护的。因此希望有一套方案，能够做到一次开发，

qiankun 是主流的微前端方案，其他的还有京东的 micro-app、腾讯的 wujie 等。 微前端就是可以一个页面跑多个 vue、react 甚至 jquery 等不同项目，它之间的 JS、C

学习single-spa、qiankun等比较火的微前端框架使用之后，通过webcomponents实现一个微前端框架。内容包含了从渲染到卸载的整体流程。

微前端概念的出现是前端发展的必然阶段，PC 互联网转向移动互联网时代时，PC 场景并未完全消失，反而衍生出了更多沉浸感更高、体验感更强的应用，与之对应的应该是出现新的架构模式来应对这些应用规模的增长。

1. 复用别的的项目页面 如果我们的项目需要开发某个新的功能，而这个功能另一个项目已经开发好，我们想直接复用时。PS：我们需要的只是别人项目的这个功能页面的内容部分，不需要别人项目的顶部导航和菜单。 一个比较笨的办法就是直接把别人项目这个页面的代码拷贝过来，但是万一别人不是 v…

本文则是在此基础上对现有的微前端解决方案进行对比总结，废话少说，让我们开始今天的课题。 众所周知，iframe是html提供的标签，能加载其他web应用的内容，并且它能兼容所有的浏览器，因此，你可以用它来加载任何你想要加载的web应用。 iframe最大的特性就是提供了浏览器原…

后来我还和element团队的iamkun通过一次话，对方也表示认可我们为了教育理念的开源。就一直维护下来了

花了一周多时间，终于把小掘金肝出来了。 起初只是想用qiankun+vue的架构以掘金为例子搭个简单的demo，却没想到疯狂掉入切图细节（强迫症确诊无误）。 事实上也因此更深入地体会到了微前端架构的一些利弊以及开发体验，所以也还不错吧。 希望这篇分享能够给想要尝试微前端架构却还…