大家好，欢迎来到IT知识分享网。

大家好，我是Echa。

好消息，2023年10月份京东前端开发团队对外宣布MicroApp 1.0 正式发布。此消息一出，又在Web 开发者各大论坛讨论的沸沸扬扬，说前段时间字节跳动 ByteDance Web Infra 团队才对外宣布 Rspress 1.0 正式发布，这京东前端开发团队又接着发布微前端 MicroApp。有的人说他们是商量好的；有的人说各自在重复造轮子，各自卷；有些人说各自为了完成KPI；粉丝们你们怎么看呢？欢迎在评论下说出自己的看法。

MicroApp v1.0.0 -alpha.6版本

从去年MicroApp v1.0.0 -alpha.6版本（2022-08-19），历经来多少个日日夜夜。一路迭代更新到现在MicroApp 1.0版本，京东前端开发团队真心不容易，小编这一路来看着长大的。你们这种开发精神，非常值得我们程序员学习，小编给你们点赞。

借此机会，小编先给大家详细介绍一下MicroApp 到底是什么，能做什么，有哪些优点等等，只有彻底了解了MicroApp ，才能说出自己观点。希望对大家有所帮助，多了解，多学点有益无害，说不定哪天团队开发项目中就用上，你说是不是？下面小编给大家一一介绍上面的问题。

全文大纲

1. MicroApp 介绍
2. MicroApp 项目背景
3. MicroApp 优势有哪些？
4. MicroApp 扩展性如何呢？
5. MicroApp 开发调试工具介绍：Micro-App-DevTools
6. 如何部署搭建自己的 MicroApp呢？
7. 如何将MicroApp 0.x 版本升级到 1.0 版本呢？

MicroApp 介绍

传送门：https://micro-zoe.github.io/micro-app/

Github：https://github.com/micro-zoe/micro-app

MicroApp 官网

micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。

micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。

微前端的概念是由思特沃克软件技术（北京）有限公司 ThoughtWorks 在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型模块应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端模块仓库，微前端架构下的前端模块仓库倾向于更小更灵活。

此时此刻， 京东前端开发团队研发 MicroApp 诞生。

它主要解决了两个问题：

• 1、随着项目迭代应用越来越庞大，难以维护。
• 2、跨团队或跨部门协作开发项目导致效率低下的问题。

千言万语介绍 MicroApp，不如一张图介绍更让粉丝们理解深刻，具体如下图：

MicroApp 项目背景

在micro-app之前，业内已经有一些开源的微前端框架，比较流行的有2个：single-spa和qiankun。不知道粉丝们有没有用过？

single-spa

qiankun

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配置，是目前市面上接入微前端成本最低的方案。

描述了这么多，老规矩，直接上图会更容易理解，具体如下图：

micro-app 架构图

MicroApp 优势有哪些？

使用简单

<micro-app name='my-app’ url='//localhost:3000/'></micro-app>

官方将所有功能都封装到一个类WebComponent组件中，从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。

功能强大

micro-app提供了js沙箱、样式隔离、元素隔离、路由隔离、预加载、数据通信等一系列完善的功能。

• js沙箱 介绍

官方使用Proxy拦截了用户全局操作的行为，防止对window的访问和修改，避免全局变量污染。micro-app中的每个子应用都运行在沙箱环境，以获取相对纯净的运行空间。

沙箱是默认开启的，正常情况下不建议关闭，以避免出现不可预知的问题。

• 样式隔离

MicroApp的样式隔离是默认开启的，开启后会以<micro-app>标签作为样式作用域，利用标签的name属性为每个样式添加前缀，将子应用的样式影响禁锢在当前标签区域。

.test { color: red; } /* 转换为 */ micro-app[name=xxx] .test { color: red; }

但主应用的样式依然会对子应用产生影响，如果发生样式污染，推荐通过约定前缀或CSS Modules方式解决。

• 元素隔离

元素隔离的概念来自ShadowDom，即ShadowDom中的元素可以和外部的元素重复但不会冲突，micro-app模拟实现了类似ShadowDom的功能，元素不会逃离<micro-app>元素边界，子应用只能对自身的元素进行增、删、改、查的操作。

举个栗子 :

主应用和子应用都有一个元素<div id=’root’></div>，此时子应用通过document.querySelector(‘#root’)获取到的是自己内部的#root元素，而不是主应用的。

主应用可以获取子应用的元素吗？

可以的！

这一点和ShadowDom不同，在微前端下主应用拥有统筹全局的作用，所以我们没有对主应用操作子应用元素的行为进行限制。

• 路由隔离

MicroApp通过自定义location和history，实现了一套虚拟路由系统，子应用运行在这套虚拟路由系统中，和主应用的路由进行隔离，避免相互影响。

子应用的路由信息会作为query参数同步到浏览器地址上，如下：

虚拟路由系统还提供了丰富的功能，帮助用户提升开发效率和使用体验。

• 预加载

预加载是指在子应用尚未渲染时提前加载静态资源，从而提升子应用的首次渲染速度。

为了不影响主应用的性能，预加载会在浏览器空闲时间执行。

• 数据通信

micro-app提供了一套灵活的数据通信机制，方便主应用和子应用之间的数据传输。

主应用和子应用之间的通信是绑定的，主应用只能向指定的子应用发送数据，子应用只能向主应用发送数据，这种方式可以有效的避免数据污染，防止多个子应用之间相互影响。

同时我们也提供了全局通信，方便跨应用之间的数据通信。

兼容所有框架

为了保证各个业务之间独立开发、独立部署的能力，micro-app做了诸多兼容，在任何前端框架中都可以正常运行。

MicroApp 扩展性如何呢？

官方从功能的角度介绍如何接入微前端，这导致整体的逻辑不连贯。

在手把手系列中，我们会侧重于前端框架本身，详细介绍它们作为主应用和子应用如何接入微前端。

我们列举比较流行的前端框架，指出各框架的注意事项，规避各种可能出现的问题。

目前有：

• react
• vue
• vite
• angular
• nextjs
• nuxtjs

以上框架可以任意组合，换句话说任何一个框架都可以作为主应用嵌入其它类型的子应用，任何一个框架也可以作为子应用被其它框架嵌入，包括上面没有列举出的其它库，如 svelte、umi …

MicroApp 开发调试工具介绍：Micro-App-DevTools

Github：https://github.com/micro-zoe/micro-app-chrome-plugin

Micro-App-DevTools是基于京东零售推出的一款为micro-app框架而开发的chrome插件，旨在方便开发者对微前端进行数据查看以及调试,提升工作效率。

在chrome中输入chrome://extensions打开扩展程序，将已下载的插件拖入即可

Micro-App-DevTools 功能

1. Environment环境

可查看Micro app的Environment环境如下：

'__MICRO_APP_ENVIRONMENT__': '判断应用是否在微前端环境中' '__MICRO_APP_VERSION__': '微前端版本号' '__MICRO_APP_NAME__': '应用名称' '__MICRO_APP_PUBLIC_PATH__': '子应用的静态资源前缀' '__MICRO_APP_BASE_ROUTE__': '子应用的基础路由'

2. Communicate通讯

查看父子应用通讯 数据通信面板

功能一、获取父应用数据

点击按钮获取当前被嵌入页面基座应用的JSON格式数据

功能二、子应用开发环境模拟

点击按钮跳转至功能一中子应用开发环境模拟页面，此处模仿内嵌子应用，使用说明如下所示：

在子应用开发环境模拟页面中输入子页面URL等信息

a、子页面URL：此处输入被基座应用嵌入的子应用链接

b、父应用数据：此处输入JSON格式的父应用需要传给子应用的数据

c、子应用嵌入代码：此处显示子应用嵌入的代码

以上即完成微前端的嵌入，效果如下：

快捷打开方式一

点击右上角图标出现目录,选择”打开子应用开发环境模拟”

快捷打开方式二

点击鼠标右键，选择micro-app下，二级菜单点子应用开发环境模拟

3. View子应用视图

查看子应用相关视图信息

点击按钮即可获取当前被嵌入页面基座应用的视图

快捷打开方式

点击鼠标右键，选择micro-app下，二级菜单点击查看子应用范围

4. Route路由

功能一、获取子应用路由

点击查看子应用URL按钮即可获取当前页面下所有子应用的路由地址

功能二、复制及打开子应用路由链接

点击复制按钮复制子应用路由，点击打开按钮直接在浏览器打开子应用链接地址

如何部署搭建自己的 MicroApp呢？

我们分别列出主应用和子应用需要进行的修改，具体介绍micro-app的使用方式。

主应用

1. 安装依赖

 npm i @micro-zoe/micro-app --save

2. 初始化micro-app

// index.js import microApp from '@micro-zoe/micro-app' microApp.start()

3. 嵌入子应用

// React export function MyPage () { return ( <div> <h1>子应用</h1> // name：应用名称, url：应用地址 <micro-app name='my-app' url='http://localhost:3000/'></micro-app> </div> ) }

//Vue <template> <div> <h1>子应用</h1> <!-- name：应用名称, url：应用地址 --> <micro-app name='my-app' url='http://localhost:3000/'></micro-app> </div> </template>

子应用

1、在webpack-dev-server的headers中设置跨域支持。

devServer: { headers: { 'Access-Control-Allow-Origin': '*', } },

完成以上步骤即完成微前端的接入。

如何将MicroApp 0.x 版本升级到 1.0 版本呢？

从0.x版本迁移到1.0只针对于旧项目

迁移步骤

1. 安装最新版本

npm i @micro-zoe/micro-app@latest --save

2. 在start中增加配置

// index.js import microApp from '@micro-zoe/micro-app' microApp.start({ 'disable-memory-router': true, // 关闭虚拟路由系统 'disable-patch-request': true, // 关闭对子应用请求的拦截 })

vite迁移

这里只针对子应用是vite的情况，基座为vite不需要特殊处理。

步骤1：删除子应用vite.config.js中的配置

步骤2：开启iframe沙箱

去除之前的两个配置项：inline、disableSandbox，然后开启iframe沙箱。

<micro-app name='名称' url='地址' iframe></micro-app>

步骤3：删除基座中的自定义插件

步骤4：删除手动注册的通信对象

删除手动注册的通信对象，改用默认的通信方式进行数据通信

最后

粉丝们，MicroApp 1.0 版本介绍有什么想法呢？

欢迎在评论区分享讨论。

一台电脑,一个键盘,尽情挥洒智慧的人生;

几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

创作文章的初心是：沉淀、分享和利他。既想写给现在的你，也想贪心写给 10 年、20 年后的工程师们，现在的你站在浪潮之巅，面对魔幻的互联网世界，很容易把一条河流看成整片大海。未来的读者已经知道了这段技术的发展历史，但难免会忽略一些细节。如果未来的工程师们真的创造出了时间旅行机器，可以让你回到现在。那么小编的创作就是你和当年工程师们的接头暗号，你能感知到他们在这个时代的键盘上留下的余温。