关于前端:微前端解决方案

51次阅读

共计 1228 个字符，预计需要花费 4 分钟才能阅读完成。

随着业务越来越简单，在开发过程中，咱们往往会面临以下的窘境。

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 框架。

正文完