微前端学习笔记（一）

 接触微前端也有一段时间了，一直感觉它是个很难而且高大上的技术，这些天看一些课程讲述实现
 原理，我觉的讲述的非常好，这里和大家分享下学习内容。主要内容：如何使用和源码分析。文采
 不太好，大家见谅
   
    

什么是微前端

1. 微前端就是一种解决方案，它是存在于浏览器中的微服务。
2. 从我参与的一个项目说起：我们现在正在做的一个投资交易系统，它分为十几个业务和功能模块，每个业务都有很多个页面，都能作为单独的一个项目存在。每一个模块都有十几二十人在开发，如果这些业务和功能模块不拆分成单独的项目而作为一个整体存在，你无法想象几十个前端怎么开发一个项目。即使每个人的工作都是不相关的，但开发完成之后提交测试的时候也无法正常工作，比如开发a刚打包部署没几分钟，开发b就重新打包部署，频繁的部署，导致测试几乎无法正常测试。退一万步说，我们约定好某个时间点统一打包部署测试。但是这么大的项目，打包时间可想而知。其次因为某个人只改了个小问题，就要重新部署，也会导致整个项目的测试都无法进行下去。再或者说，上线一个小功能， 就要将整个项目迭代，也是不值得的。因此我们需要将这个系统进行拆分，根据业务或者功能拆分成单独的项目。微前端就是这种解决方案，将多个单独的项目整合成一个一体化的SPA的解决方案。也可以说微前端是一种将大型项目进行拆分整合的解决方案。

微前端能解决什么问题

1. 微前端架构主要解决一个单体应用经过长时间的迭代后，变成一个巨石应用，或者说成为一个由多个业务模块组合的大型系统。此时由于参与人员，团队的增多，变迁，导致该系统难以维护，甚至无法维护。

微前端的价值

1. 技术栈无关： 主框架不限制接入应用的技术栈，子应用可以自由选择技术栈（建议还是统一技术栈，方便后续的人力协调等）
2. 独立开发，独立部署：微应用都有自己单独的仓库，前后端均可以独立开发，部署完成后主框架自动完成同步更新
3. 增量升级：比如我们公司，刚开始的时候没有限制技术栈，老项目使用vue，Angular的都有。后来统一使用React技术栈，但是一些老项目任然使用的Angular，想重构吧，人力资源不足，也不划算。微前端就能做到在不重构老项目的情况下实施渐进式重构的手段和策略。
4. 独立运行：每个应用之间状态隔离，运行时候状态不共享。

落地方案：我们主要学习以下两种方案。

1. Single-spa

   • 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, 你正在使用的框架)

   • 独立部署每一个单页面应用

   • 新功能使用新框架，旧的单页应用不用重写可以共存

   • 改善初始加载时间，延迟加载代码

2. Qiankun

   • 基于 single-spa 封装，提供了更加开箱即用的 API。

   • 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。

   • HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。

   • 样式隔离，确保微应用之间样式互相不干扰。

   • JS 沙箱，确保微应用之间 全局变量/事件 不冲突。

   • 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

   • umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

     相比single-spa， qiankun是基于single-spa封装，因此single-spa有的他都有，
      single-spa没有的，他也有，例如js沙箱，样式隔离等。