微前端分享

什么是微前端？

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

qiankun框架

qiankun 是一个基于 single-spa 的微前端实现库，孵化自蚂蚁金融科技，目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用。

特性：

• 基于 single-spa 封装，提供了更加开箱即用的 API。
• 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
•  HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
•  样式隔离，确保微应用之间样式互相不干扰。
•  JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
•  资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度

使用

1，主应用安装

yarn add qiankun

2，主应用注册子应用

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'pcm', 
    entry: /pcm,
    container: '#yourContainer',
    activeRule: '/dop/pcm',
  },
  {
    name: 'asd',
    entry: /asd,
    container: '#yourContainer',
    activeRule: '/dop/asd',
  },
]);

start();

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

4 ，微应用

不需要额外安装任何其他依赖即可接入 qiankun 主应用。

微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

项目实践

笔者所在项目是做devops平台，包含了非常多的业务模块，如敏捷开发，度量，自动化部署，流水线，代码管理等，从原来的单体应用演变为前后端拆分为微前端和微服务的架构模式，微前端已经将qiankun进行了落地实践，并取得了一定的成效。

考量点

• 拆分解耦：按业务领域拆分成不同的仓库进行维护，不同业务线之间互不影响，可单独上线
• 加速体验：本地开发环境急速启动，提高开发体验
• 侵入性低：微前端方案改动原有代码的侵入性降到最小，无需大规模改造
• 学习成本低: 尽量做到开发人员无需感知拆分的存在，保持单页应用的开发体验，
• 用户无感知：子应用之间切换保证良好的用户体验

部署

部署是参考官网的第2中部署方式，各个应用部署在不同的服务，通过nginx反向代理。

	nginx	容器云
主应用	ip/dop	负载均衡-->ingress	dop-main-web-service
子应用pcm	ip/pcm		dop-pcm-web-service
子应用asd	ip/asd		dop-asd-web-service

参考：

qiankun文档

微前端在美团外卖的实践

著作权归作者所有。商业转载请联系本账号获得授权，非商业转载请注明原文地址。