[14章附电子书]从0到1落地微前端架构， MicroApp实战招聘网站

能够应对不同技术栈、不同构建工具的巨石应用架构是前端高级工程师的衡量标准之一。本文为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案，并结合主流微前端框架MicroApp，流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站，助力你成长为独当一面、具备team leader潜质的前端高级工程师。

一、什么是微前端框架MicroApp

 微前端是一种架构风格，旨在通过将前端应用程序拆分为更小、更可管理的部分，使多个团队能够独立开发、部署和维护这些部分，从而实现前端的可扩展性和可维护性。

MicroApp框架是京东出品的一种用于构建微前端架构的开源框架，旨在帮助开发者更好地构建和管理复杂的前端应用程序。

京东MicroApp框架具有以下特点和功能：

轻量级：框架本身体积小，加载速度快，不会给应用程序带来额外的负担。

插件化：支持插件机制，可以根据需要灵活添加和扩展功能。

组件化：采用组件化的开发模式，方便开发者进行模块化开发和复用。

独立部署：每个MicroApp都可以独立部署和运行，支持单独开发和测试。

路由管理：提供路由管理功能，支持子应用之间的路由跳转和通信。

状态管理：提供状态管理机制，允许不同子应用之间共享数据和状态。

样式隔离：采用样式隔离的方式，确保每个子应用之间的样式不会相互干扰。

二、如何开始使用 Microapp？

要开始使用 Microapp，首先需要安装 Microapp CLI 工具。可以通过以下命令来安装：

Copy

npm install -g @microapp/cli

安装完成后，可以使用 Microapp CLI 创建一个新的 Microapp 项目，例如：

Copy

microapp create my-app

这将创建一个名为 “my-app” 的新项目，并在其中包含一些默认的配置和示例代码。然后，可以使用以下命令启动该项目：

Copy

cd my-app

npm start

三、microapp兼容性

microapp兼容性高。MicroApp的接入成本低、兼容性高、性能强是我们选择MicroApp作为微前端框架使用的重要因素。microapp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。

四、microapp前景

随着这些年互联网的飞速发展，很多企业的web应用在持续迭代中功能越来越复杂，参与的人员、团队不断增多，导致项目出现难以维护的问题，这种情况PC端尤其常见，许多研发团队也在找寻一种高效管理复杂应用的方案，于是微前端被提及 的越来越频繁。

微前端并不是一项新的技术，而是一种架构理念，它将单一的web应用拆解成多个可以独立开发、独立运行、独立部署的小型应用，并将它们整合为一个应用。

在实际业务中，我们也遇到同样的问题，并且在不同的业务场景下尝试了各种解决方案，如iframe、npm包、微前端框架，并对各种方案的优劣进行了对比。

iframe：在所有微前端方案中，iframe是最稳定的、上手难度最低的，但它有一些无法解决的问题，例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖，它的成长性不高，只适合简单的页面渲染。

npm包：将子应用封装成npm包，通过组件的方式引入，在性能和兼容性上是最优的方案，但却有一个致命的问题就是版本更新，每次版本发布需要通知接入方同步更新，管理非常困难。

微前端框架：流行的微前端框架有single-spa和qiankun，它们将维护成本和功能上达到一种平衡，是目前实现微前端备受推崇的方案。

由于iframe和npm包存在问题理论上无法解决，在最初我们采用qiankun作为解决方案，qiankun是在single-spa基础上进行了封装，提供了js沙箱、样式隔离、预加载等功能，并且与技术栈无关，可以兼容不同的框架。

五、micro-app的优势

公司的一个巨石应用需要改造成为微前端架构，在调研了市场现有微前端框架之后，最后使用了京东出品的micro-app，想比较于qiankun，micro-app具有以下优势：

对现有项目改动很小，不需要改造入口文件和导出特定的生命周期，项目侵入性基本等于没有。

完整的沙箱机制和样式隔离

完整的通信系统，包括主应用和基座应用互相通信，全局通信等。

支持多个框架，包括vite、nuxt、next等。

官网教程非常详细，包括手把手教学和示例项目。

qiankun坑太多，网上看了一圈文章，全是踩坑的。