微前端

一 、微前端概念

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略
核心价值:
1.技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权
2.独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3.增量升级 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
4.独立运行 每个微应用之间状态隔离，运行时状态不共享

之前微前端的实现方案：iframe
体验
iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。
iframe的问题
父子应用之间通信问题
cookie共享问题（可做单点登陆SSO）
交互视图效果不佳

1、url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2、UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..
3、全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4、慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
5、seo差，获取不到iframe里面的内容导致网站seo排名靠后

二、推荐的几个微前端框架

1.Qiankun

qiankun 是一个基于 single-spa 的微前端实现库，但已使 single�spa 可用于生产（production-ready）。旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统

1 优点

• 阿里团队开发维护，文档多。
• 基于 single-spa 封装，提供了更加开箱即用的 API。
• 解耦，技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
• 样式隔离，确保微应用之间样式互相不干扰。
• JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
• umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
• 兼容IE11

2 缺点

1.上线部署文档较少
2.qiankun 只能解决子项目之间的样式相互污染，不能解决子项目的样式污染主项目的样式

3.相关文档

官网:https://qiankun.umijs.org/zh/cookbook
github地址
qiankun 技术圆桌
微前端框架qiankun以及源码

2. Webpack 5 的 Module Federation

Module Federation [ˌfedəˈreɪʃn] 主要是用来解决多个应用之间代码共享的问题,允许 JavaScript 应用程序在运行时从另一个应 用程序动态导入代码。模块将构建唯一的 JavaScript 入口文件，其他应用程 序可以通过设置 Webpack 配置项来下载该入口文件。

它还通过启用依赖关系共享来解决代码依赖关系和包大小增加的问题。例如， 如果你要下载一个 React 组件，那么你的应用程序不会两次导入 React 代 码。模块将自动使用你已有的 React 源，仅额外导入组件代码。

你可以使用 React.lazy 和 React.suspense 提供后备功能，以确保当导入的代码 由于某种原因失败后，不会因构建失败而影响用户体验。
多个单独的构建最后要形成一个应用程序。这些单独的构建不应相互依赖，因
此可以单独开发和部署。

每个项目可以是host也可以是remote，也可以两个都是。

1.优点

1.webpack对于前端开发者比较熟悉，比较容易接受

2.缺点

1.需要你们所有的项目都基于 Webpack，而且已经升级到了 Webpack 5.
2.Webpack 5当前并没有正式加入Module Federation功能，而是在开发分支中加入的，所以需要从git仓库中安装Webpack 5 以及html-webpack-plugin，即

npm install --save-dev git://github.com/webpack/webpack.git#dev-1
npm git://github.com/ScriptedAlchemy/html-webpack-plugin.git#master

3.全部打成一个包，打包时间较慢，据统计，内部云编译平台的平均编译时间在 100s 以上；
4.公共依赖共享，只能是host给remote提供。两个remote之间是不能共享的

3.官网文档

webpack5官网
Webpack5 跨应用代码共享 - Module Federation

3.Piral

Piral 所要求的前提条件相当宽松，开发人员仅需要安装喜欢的编辑器、终端、
网络浏览器和 Node.js 即可。开发者可以在本地开发机的仿真器中执行和调
试 Piral instance（应用程序外壳）和 piltes（功能模块）。
特点：
1、高度模块化
2、多框架兼容
3、支持资源文件的拆分
4、全局状态管理
5、独立开发和部署
6、CLI工具

1.优点

translations 翻译 Bundle Splitting 模块划分 Multi Framework 多框架 Main Framework 主框架 Modal manager 模态管理器 live Data Feed 实时数据推送
standards-Driven 标准驱动 free deployments 免费部署 free development 免费开发 form Management 表单管理 search providers 搜索提供程序 global state全局状态 notifications 通知 module Communication 模块通信 stitching location运行位置

与同类框架的比较

2.缺点

文档太少，官网只有英文版

3.相关文档

官网:https://docs.piral.io/guidelines/tutorials/01-introduction
github