微前端架构详解

微前端架构作为一种前端开发的架构方法，已经变得越来越流行，这应该也会成为这几年开发项目的主流架构。在谈论一个架构怎么实现前，或许我们应该先谈谈它是什么、好不好、为什么要用它。

本文就对微前端架构的优势到微前端的实现进行阐述。

什么是微前端

了解后端开发的同学应该听说过微服务架构，而微前端和微服务是一个道理，都是通过拆分单体应用程序为独立的、可以独立开发、部署和运行的小型应用来提高可维护性和团队的灵活性。微前端的关键概念有以下几个：

• 独立开发和部署： 微前端允许不同的团队独立地开发和部署其部分，而不会干扰其他部分的开发和部署。
• 独立运行时： 每个微前端部分都有自己的运行时环境，可以独立运行，也可以被组合成完整的应用程序。
• 松耦合： 微前端的部分之间应该是松耦合的，彼此不依赖于具体的实现细节，可以用不同的技术栈实现。
• 集成： 微前端允许将独立开发的部分集成到一个整体应用程序中。

微前端的优势

结合在实际开发工作中，我们还需要结合开发团队人员配置来协调完成开发任务，所以这里会从真实开发的角度出发介绍微前端的优势。

1. 方便扩展
   在一个开发团队中，开发人员熟悉和使用的框架和开发语言不尽相同，即使都是前端开发，有的人喜欢用Vue，有的喜欢用React，JS和TS的使用也各有偏好。微前端相对独立的应用恰好可以解决这一问题。
   将原来的团队分成多个团队，每个人都可以尽其所能地表达自己。不同的团队可以根据他们必须处理的业务逻辑，在架构、测试和编码风格方面做出最佳决策。此外，这种方法本质上会导致代码和样式隔离，使每个团队都独立于其他团队。
2. 使用不同技术栈
   由于微前端应用的模块相对独立，每个模块可以使用不同的技术栈，这提高了灵活性同时还方便人员的招聘。现在新技术层出不穷，特别是前端，技术更新换代很快，在不改变之前的应用模块的情况下，新的模块可以使用新的技术实现，同时也不会对之前的功能造成太大的影响。
3. 构建部署更快
   相比大型的单体应用，构建小型微前端更快、更容易。因此，应用的部署时间也将显着改善。事实上，每当团队完成一项功能的工作时，他们都可以在线部署它，而无需等待。换句话说，微型前端应用程序基于独立团队同时处理独立功能。这不能不代表实现更高发布率的机会，特别是随着小团队数量的增加。
4. 项目易维护
   如果你曾经处理过大型应用程序，就会知道它们很容易变得难以维护，尤其是当它们是单体并且在一直迭代升级。另一方面，微前端基于分而治之的方法。这意味着，通过为你的 Web 应用程序选择此体系结构，你可以使每个业务需求都更易于测试和维护。
   测试大型单体应用程序具有挑战性，需要花费大量时间，我们都知道这一点。但采用微前端方法，每个团队都负责测试其开发的功能，这些功能比完整的前端应用程序要小得多。这加快了整个过程并使其更容易。此外，每个独立的团队现在都可以自由使用他们喜欢的测试工具和技术。
   同时，处理小块意味着了解正在发生的事情的流程变得更加简单。这导致 Web 应用程序建立在许多小部件上，这些部件更可靠，并且在需要时更易于维护。

微前端架构部署

微前端架构的部署涉及将独立开发的微前端应用集成到一个整体应用中，以便在用户访问时能够无缝地展现。以下是微前端架构的部署过程的一般步骤：

1. 项目打包
   每个微前端应用都由独立的团队进行开发，并拥有自己的代码库和构建过程。使用独立的构建工具，如Webpack、Parcel等，将每个微前端应用打包成独立的部署单元。并且，要有各自的版本管理机制。发布新版本时，确保生成能够独立运行的构建文件，并将构建文件部署到适当的环境。
2. 静态文件服务器
   将每个微前端应用的构建文件部署到 CDN 或静态文件服务器上。这有助于提高应用的加载速度，并允许不同部署单元之间共享一些通用资源。
3. 主应用引导
   主应用是整个微前端应用的宿主，负责加载和协调各个微前端应用。主应用在启动时需要能够动态加载其他微前端应用。这一般可以通过一种类似于导航菜单或路由配置的机制来完成。主应用在运行时根据用户的导航或其他条件动态加载相应的微前端应用。这可以通过使用浏览器的动态导入或其他模块加载机制来实现。
4. 路由和状态管理
   确保微前端应用之间的路由协调工作正常。主应用可能需要提供一些路由管理的机制，确保用户在导航时，微前端应用能够正确加载和卸载。如果微前端应用之间需要共享状态，确保主应用提供了一种合适的状态管理机制。这可以是使用全局状态管理库，如Redux，或者其他适当的解决方案。
5. 灰度发布
   如果可能，考虑使用灰度发布的方法逐步引入新版本的微前端应用。这可以降低潜在的生产环境问题和用户感知的风险。

以上步骤是一般的微前端部署流程，具体的实现方式会因架构和工具选择的不同而有所差异。在部署之前，最好进行充分的测试和验证，确保各个微前端应用能够协同工作并在生产环境中表现良好。

微前端开源案例

single-spa

single-spa是一个目前流行的开源微前端框架。它可以使用不同的前端框架（如React、Angular、Vue等）来开发独立的微前端应用。single-spa通过劫持路由的方式来做子应用之间的切换，接入方式要融合自身的路由。这里给出基于Vue3的构建部署过程：

1. 创建微应用项目：
   使用 Vue CLI 创建一个新的 Vue 3 微应用项目。

vue create micro-app-vue3

2. 升级 single-spa-vue 插件：
   在 Vue 3 中，需要使用 single-spa-vue@^2.0.0 版本。

npm install single-spa single-spa-vue@^2.0.0

3. 配置微应用项目：
   在微应用项目的 vue.config.js 文件中，配置 publicPath，确保它是微应用在单独部署时的路径。

module.exports = {
  publicPath: '/micro-app-vue3/',
};

4. 微应用注册：
   在微应用的入口文件（通常是 src/main.js）中，使用 single-spa-vue 注册微应用。

import { createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

const vueLifecycles = singleSpaVue(createApp, App);

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

5. 打包微应用：
   使用 Vue CLI 提供的构建命令将微应用打包。

npm run build

6. 主应用集成：
   在主应用中安装 single-spa 和 single-spa-vue，并注册微应用。

npm install single-spa single-spa-vue

在主应用的入口文件中，注册微应用。

import { registerApplication, start } from 'single-spa';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.use(/* 插件 */);

registerApplication(
  'micro-app-vue3',
  () => import('micro-app-vue3/main.js'), // 这里是微应用的入口文件路径
  (location) => location.pathname.startsWith('/micro-app-vue3')
);

start();

7. 启动主应用：
   在主应用中启动应用。

8. 测试和调试：
   进行整个微前端应用的测试和调试，确保微应用能够正确加载和卸载，并检查整个应用的路由协调等功能。

9. 部署：
   部署主应用和微应用，确保微应用可以通过主应用的入口地址被正确加载。

更详细的信息和指导可以前往single-spa-vue官方文档查看

Qiankun

Qiankun对single-spa进行了封装，解决了一些不足，相较于single-spa有以下优势。

• 更轻量：
  Qiankun 的核心库相对较小，更轻量

• 配置简单：
  对于单个微应用的接入，配置更简单

• 样式隔离好：
  Qiankun的Shadow DOM，避免了全局样式冲突

• 自动化注入应用间通信机制：
  支持 props、Vuex、Redux 等多种数据通信方式，方便应用之间传递数据

• 运行性能好：
  Qiankun 使用了微任务队列，在不同微应用之间切换更流畅

Qiankun的构建和部署与single-spa的相似，具体信息和指导可以前往Qiankun官方文档查看。

使用微前端的注意事项

在微前端实施时需要注意一些关键方面，以确保系统的可维护性、稳定性和性能。以下是在使用微前端架构时需要注意的一些关键方面：

• 跨域问题
  考虑到微前端应用可能在不同的域中运行，要处理好跨域问题。确保在架构中实施适当的安全性措施，防范潜在的安全风险。
• 性能问题
  微前端架构可能带来的性能影响，特别是在加载和初始化时。要采用懒加载和异步加载等技术来提高性能。
• 监控日志
  部署监控和日志系统，以便实时监测微前端应用的性能、错误和其他关键指标。及时发现并解决问题。

总结

微前端架构为前端开发提供了一种新的组织和管理前端应用的方式，同时克服了传统单体应用的一些局限性。通过合理应用这些原则和技术，团队能够构建出更加灵活、可维护的前端生态，提升整体开发和维护效率。