微前端实践

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、微前端是什么？

在项目迭代中，随着业务的发展壮大，项目的功能模块通常也会越来越多。可能原来所有的代码模块都在一个仓库里，由一个团队负责。但随着功能模块越来越多，一个团队可能负责不过来，需要多个团队来专门维护不同的模块。相应的代码也会被拆到多个仓库里，并且各模块能独立开发、部署更新。通常虽然项目被拆成了多个模块，但为了维持整体统一性以及用户体验，各模块依然都会挂在统一的入口下。

上面所述场景就是典型的微前端场景，类似于后端的微服务架构，它将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。通常，要实现上面类似的需求，我们很容易会想到使用iframe的方式来实现。在入口框架中用iframe来显示子模块的页面，切换子模块时，iframe也跟着切换成对应子模块页面的url。

虽然iframe是比较容易实现的，但通常也会有一些问题：显示区域受限制，比如子项目中显示弹窗蒙层时，蒙层只会覆盖iframe区域，无法覆盖整个页面，内容也无法真正居中。页面浏览记录无法自动被记录，刷新页面后iframe又自动回到首页。全局上下文完全隔离，变量不共享，页面间通信比较麻烦，比如子项目与主题框架、子项目之间通信等，只能采用postMessage方式。速度较慢，每次进入子应用时都要重建整个上下文。

上面所列问题，有些可以解决，有些甚至都没法或者很难解决。总的来说，iframe是一个比较快捷的方案，但不是最好的方案，会对体验有很多限制。如果强行打各种patch，复杂度又上来了，最后可能得不偿失。

二、qiankun微前端框架

其实，已经有个基于single-spa的开源库qiankun已经帮我们解决了上面提到的问题，其有如下特征：解析子应用入口时，不是解析的js文件，二是直接解析子应用的html文件。

就算子应用更新了，其入口html文件的url始终不会变，并且完整的包含了所有的初始化资源url，所以不用再自行维护子应用的资源列表了。

子应用挂载时，会自动进行一些特殊处理，可以确保子应用所有的资源dom（包括js添加的style标签等）都集中在子应用根节点dom下。

子应用卸载时，对应的整个dom都移除了，这样也就避免了样式冲突。提供了js沙箱，子应用挂载时，会对全局window对象代理、对全局事件监听进行劫持等，确保各子应用都运行在自己的沙箱内，这样也就避免了js冲突。

---

总结

当然，在前端越来越庞大复杂的场景中，微前端方案也不是银弹，但确是值得探索实践的方向。