微前端解决方案

随着业务越来越复杂，在开发过程中，我们往往会面临以下的困境。

1. 项目越来越大，打包发版越来越慢。
2. 只改动一个小模块，整个项目都要重新发版。
3. 开发人员越来越多，代码风格迥异，难以维护。

为了解决这些问题，一种类似于微服务思想的应用诞生在了前端，于是有了微前端的概念。

什么是微前端

简单的说，就是将一整个大项目拆分成各个小项目。每个项目完全具备独立的开发、测试、部署、运行能力的能力。但在用户看来，还是一个整系统。

微前端解决方案

近来看了一些关于微前端的解决方案的文章，也了解到社区现有的几种解决方案。有最原始的iframe嵌套子系统，以及后来的微前端框架 single-spa，还有阿里推出的qiankun框架。笔者也想练练手，就从最简单的iframe开始吧。
iframe实现方式比较简单，我们只需将单体的前端应用，按照业务模块进行拆分，分别部署。最后通过 iframe 进行动态加载即可。既然是各个子系统，笔者想着能不能展示多个子系统在界面上呢，将菜单与子系统结合起来，每个菜单对应不同的子系统，点击不同的菜单，链入不同的子系统到界面上，并作为tab标签页保存起来。可根据用户自己喜好打开多个子系统，无缝切换浏览不同子系统，还可以删除当前浏览的子系统。好，设想到这里就开始写吧。
要实现上述设想，笔者首先想到的是菜单加tabs的整合，点击菜单，往tabs数组中增加当前值，但是这样有一个问题，每次增加和删减tab标签，组件都会重新渲染，会导致iframe链入的子系统重新刷新。每次都刷新，这样很麻烦啊。所以笔者想，要不自己写一个tabs吧，绕过因状态改变导致界面重新渲染的问题。那需要创建nav模板以及content模板。

nav模板

  <div class="nav-tab nav-tab-${unique}" id="${item.id}" draggable="true">
    <span class="title">${item.title}</span>
    <span class="yy-close">X</span>
  </div>

content模板

  <div class="tab-content tab-content-${unique}" id="${item.id}-content">
    <iframe
      id="myFrame"
      width="100%"
      frameBorder={0}
      height="100%"
      scrolling="yes"
      src=${item.src}
    ></iframe>
  </div>

创建好模板，现只需要再点击菜单的时候创建对应的tab和content内容插入到界面上就可以了。笔者已经实现了创建tab，删除，以及拖拽tab的功能。效果如下：

代码已经上传到github上，感兴趣的童鞋可以看看：https://github.com/youtsider/MicroFrontEnd

这只是基于iframe的实现方案，之后可以研究研究qiankun框架。