【第2763期】接入成本最低微前端框架：京东零售micro-app

前言

可能大家已经知道 micro-app。今日前端早读课文章由 @马国华分享，公号：京东零售技术授权。

正文从这开始～～

micro-app 是由京东零售 iPaaS 前端研发团队推出的一款微前端框架，它从组件化的思维，基于类 WebComponent 进行微前端的渲染，它旨在降低上手难度、提升工作效率，并且无关技术栈，也不和业务绑定，可以用于任何前端框架。

micro-app 已经在多个京东内部项目中投入使用并顺利发布上线，随着近半年的不断优化、测试、迭代，框架已趋于稳定，目前已对外开源。

• 源码地址：https://github.com/micro-zoe/micro-app

• 官网地址：https://zeroing.jd.com/micro-app

什么是微前端

微前端的概念是由 ThoughtWorks 在 2016 年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。

微前端主要解决了两个问题：

• 随着迭代应用越来越庞大，难以维护。

• 跨团队或跨部门协作开发项目导致的效率低下的问题。

这两个问题在很多公司都很常见，许多前端项目经过多年不断迭代或项目交接，技术架构早已落后，新接手的同学对于冗余的庞大项目无可奈何。微前端可以让我们跳出这个陷阱，减少新旧项目的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更简单。

如何实现微前端

实现微前端方式有很多，我们这里列出两种最常用的方式：iframe 和微前端框架。

iframe 是在页面中创建一个独立的 window 窗口，它完全和自己所在的页面隔离，具有天然的样式和 JS 隔离特性，这也是实现微前端最简单、最稳定的方案。但也因为 iframe 每次都会初始化整个 window，一个 iframe 标签其实就是一个内嵌的浏览器窗口，所以也导致一系列的问题，比如性能不高、双滚动条、弹窗无法覆盖全局、刷新页面路由状态丢失，这些问题的根源在于 iframe 的渲染方式，无法很好的解决。

微前端框架也是最近几年新推出的一种微前端解决方案，它的基本原理是将子应用的 JS、CSS 等静态资源加载到基座应用渲染，本质上这两个应用都是在同一个页面，只是渲染的区域不同，并通过一些手段防止多个应用之间的冲突。较早推出的比较有名的微前端框架是 single-spa，它主要负责渲染，即将多个独立的应用融合为一，功能相对较少，所以很多团队以它为基础进行封装，增加更多符合团队和业务的功能。比较出名且已经开源的有 qiankun，qiankun 在 single-spa 的基础上封装了很多强大的功能，比如样式隔离、JS 沙箱、htmlEntry，这些功能降低了微前端的接入难度。

总结下来，iframe 简单稳定，但有一些无法解决的问题，成长性不高，微前端框架接入稍难，但上限更高。当然每个项目的情况都不同，适合自己的就是最好的。

micro-app 有什么优势？

single-spa 是通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时 single-spa 要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。因为 qiankun 是基于 single-spa 进行封装，所以这些特点也被 qiankun 继承下来，并且需要对 webpack 配置进行一些修改。

micro-app 并没有沿袭 single-spa 的思路，而是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。并且由于自定义 ShadowDom 的隔离特性，micro-app 不需要像 single-spa 和 qiankun 一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改 webpack 配置，是目前市面上接入微前端成本最低的方案，并且提供了 js 沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

micro-app 的特点：

• 上手简单：使用方式类似 iframe

• 侵入性低：对原代码几乎没有影响

• 组件化：基于 webComponents 思想实现微前端

• 功能丰富：JS 沙箱，样式隔离，预加载等

• 轻量的体积：≈10kb (gzip)

• 零依赖：不依赖于任何第三方库

如何使用 micro-app

为了具体介绍 micro-app 的使用方式，我们分别使用 vue-cli 和 create-react-app 两个官方脚手架创建一个应用，并使用 micro-app 将它们改造为微前端应用。

我们以 vue 项目为基座应用，react 项目为子应用，将 react 项目嵌入到 vue 项目内渲染。

vue 页面如下：

react 页面如下：

修改 vue 基座应用

1、 安装依赖

2、 在 main.js 中引入依赖

3、 在 app.vue 中使用 micro-app

修改 react 子应用

因为 create-react-app 创建的项目默认是不支持跨域访问的，所以我们在 /config/webpackDevServer.config.js 中添加跨域支持。

只需要上面这几个简单的步骤，我们就完成所有工作，实现了微前端，嵌入后的效果如下：

以上可见，micro-app 的接入方式非常简单，侵入性很低，不会对原有代码造成影响。

当然上面的案例是非常基础和简单的，微前端在实际使用场景下非常复杂，不同的框架、构建工具都有可能产生冲突，具体详细的配置请参考官网文档。

结语

micro-app 作为新推出的框架，我们将会积极响应开发者的疑问与反馈，持续不断打磨完善，帮助更多开发者提升开发效率，改善开发体验。欢迎大家使用 micro-app 和参与共建，也希望在 github 上点个 Star 支持我们一下～

源码地址：https://github.com/micro-zoe/micro-app

官网地址：https://zeroing.jd.com/micro-app

iPaaS 地址：http://ipaas.jd.com

关于本文
作者：@马国华
原文：https://mp.weixin.qq.com/s/oI6InGJ3M_opH368eVXHYA

关于【微前端】相关推荐，欢迎读者自荐投稿，前端早读课等你来。+v：zhgb_f2er

【第2727期】基于 iframe 的微前端框架 —— 擎天

【第2689期】将微前端做到极致-无界方案