微前端-qiankun

参考文章：
微前端到底是什么？
微前端入门:从single-spa到qiankun

什么是微前端

相关：微服务架构

微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来

具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理

微前端的灵感就来源于微服务架构。
微前端，将一个庞大复杂的前端应用分解成一些更小的、更简单的并且能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。先拆再合。

为什么要用微前端/微前端的特点

• 代码库更小，更内聚，可维护性更高。主项目只需要提供基本的配置支持。具体业务交给各个微前端独自完成。
• 松耦合，可拓展性更高。可以在不影响已存在的项目上，动态地添加新的微前端项目。
• 可渐进地升级、更新甚至重写部分前端功能。每个微前端项目独自运行、分开维护。可以单独对旧的、技术栈落后之类的微前端进行单独升级而不影响其他模块。
• 独立部署。每个微前端项目的开发、测试、部署互不干涉，独立维护。在不同的微前端项目上完全可以使用不同的技术栈。

微前端怎么用

• 多个 Bundle 如何集成？
• 子应用之间怎样隔离影响？
• 公共资源如何复用？
• 子应用间怎样通信？
• 如何测试？

多 Bundle 集成

功能独立的微前端最终会集结到一个主应用（容器应用）上。这个主应用的功能主要有：

• 渲染公共的页面元素，比如header、footer
• 维护公共数据。比如用户信息、token。
• 将各个微前端整个到一个页面上，控制微前端的渲染及其渲染区域。
  集成的方式：
• 服务端集成。
• 构建时集成。不推荐，发布阶段会造成耦合。
• 运行时集成。运行时才对获取对应微前端代码进行集成。常用方式有：iframe,js前端路由，web components…目前最常见方式即是前端路由方式。每个子应用暴露出渲染函数，主应用在启动时加载各个子应用的独立 Bundle，之后根据路由规则渲染相应的子应用。目前看来，是最灵活的方式。

子应用影响隔离

• 样式隔离：开发规范（如BEM）、CSS 预处理（如SASS）、模块定义（如CSS Module）、用 JS 来写（CSS-in-JS）、以及shadow DOM特性
• 作用域隔离：各种模块定义（如ES Module、AMD、Common Module、UMD）

应用间通信

• 路由参数。简单直接，方便有效。
• 全局变量通信。
• 基于 CustomEvent 实现通信(window的原生API)
• 基于props主子应用间通信

微前端缺点

• 用户流量负担。独立构建意味着公共资源的冗余，继而增加用户的流量负担
• 操作/管理上的复杂性。

微前端框架

客户端：

• Piral
• Open
• Components
• qiankun
• Luigi
• Frint.js
  服务端：
• Mosaic
• PuzzleJs
• Podium
• Micromono

只用过qiankun,先只关注qiankun.

2018年 Single-SPA诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决 方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载(即根据不同的路由加载不同的应用)
2019年6月，qiankun 1.0 发布。qiankun 1.0基于Single-SPA,提供更加开箱即用的 API，做到了技术栈无关、并且接入简单。