Umi Qiankun：微前端架构的实践与探索

在现代前端开发中，随着应用规模的不断扩大，单体应用的维护和扩展变得越来越困难。微前端架构应运而生，它将一个大型前端应用拆分为多个独立的子应用，每个子应用可以独立开发、部署和运行。Umi 和 Qiankun 是阿里巴巴开源的两个前端工具，它们为微前端架构的实现提供了强大的支持。本文将深入探讨 Umi 和 Qiankun 的原理、使用场景以及如何在实际项目中应用它们。

1. 微前端架构的背景与挑战

微前端架构的核心理念是将一个大型前端应用拆分为多个独立的子应用，每个子应用可以独立开发、部署和运行。这种架构的优势在于：

独立开发与部署：每个子应用可以由不同的团队独立开发和部署，减少了团队之间的耦合。 技术栈无关：不同的子应用可以使用不同的技术栈，例如 React、Vue、Angular 等。 增量升级：可以逐步将老的应用替换为新的子应用，而不需要一次性重构整个应用。

然而，微前端架构也带来了一些挑战：

子应用之间的通信：如何实现子应用之间的数据共享和通信。 路由管理：如何管理子应用之间的路由跳转。 样式隔离：如何避免子应用之间的样式冲突。 性能优化：如何优化子应用的加载和运行性能。 2. Umi 与 Qiankun 简介 2.1 Umi

Umi 是一个可插拔的企业级前端应用框架，它提供了路由、状态管理、构建工具等一系列功能，帮助开发者快速构建前端应用。Umi 的核心特性包括：

约定式路由：Umi 支持约定式路由，开发者只需要按照约定的目录结构组织代码，Umi 会自动生成路由配置。 插件机制：Umi 提供了丰富的插件机制，开发者可以通过插件扩展 Umi 的功能。 开箱即用：Umi 内置了 Webpack、Babel 等工具，开发者无需配置即可使用。 2.2 Qiankun

Qiankun 是一个基于 Single-SPA 的微前端解决方案，它提供了子应用的加载、卸载、样式隔离、沙箱隔离等功能。Qiankun 的核心特性包括：

子应用加载：Qiankun 提供了子应用的加载和卸载机制，支持子应用的动态加载。 样式隔离：Qiankun 通过 Shadow DOM 或 CSS 选择器前缀的方式实现子应用的样式隔离。 沙箱隔离：Qiankun 通过 Proxy 或 iframe 的方式实现子应用的 JavaScript 沙箱隔离。 通信机制：Qiankun 提供了子应用之间的通信机制，支持通过事件、状态管理等方式进行通信。 3. Umi 与 Qiankun 的集成

在实际项目中，Umi 和 Qiankun 可以很好地集成在一起，实现微前端架构。以下是 Umi 和 Qiankun 集成的基本步骤：

3.1 创建主应用

首先，我们需要创建一个 Umi 项目作为主应用。可以通过以下命令创建一个新的 Umi 项目：

$ mkdir main-app $ cd main-app $ yarn create @umijs/umi-app

然后，安装 Qiankun 插件：

$ yarn add @umijs/plugin-qiankun

在 config/config.ts 中配置 Qiankun 插件：

export default { qiankun: { master: { apps: [ { name: sub-app, entry: //localhost:8001, }, ], }, }, }; 3.2 创建子应用

接下来，我们创建一个 Umi 项目作为子应用。可以通过以下命令创建一个新的 Umi 项目：

$ mkdir sub-app $ cd sub-app $ yarn create @umijs/umi-app

然后，安装 Qiankun 插件：

$ yarn add @umijs/plugin-qiankun

在 config/config.ts 中配置 Qiankun 插件：

export default { qiankun: { slave: {}, }, }; 3.3 启动应用

启动主应用和子应用：

# 启动主应用 $ cd main-app $ yarn start # 启动子应用 $ cd sub-app $ yarn start

此时，访问主应用的路由时，Qiankun 会自动加载子应用。

4. 子应用之间的通信

在微前端架构中，子应用之间的通信是一个重要的需求。Qiankun 提供了多种通信机制，包括事件、状态管理等。

4.1 事件通信

Qiankun 提供了 initGlobalState 方法，用于在子应用之间共享状态。以下是一个简单的示例：

在主应用中初始化全局状态：

import { initGlobalState } from qiankun; const actions = initGlobalState({ count: 0 }); actions.onGlobalStateChange((state, prev) => { console.log(主应用监听状态变化:, state, prev); }); setTimeout(() => { actions.setGlobalState({ count: 1 }); }, 3000);

在子应用中监听状态变化：

import { useModel } from umi; export default () => { const { count } = useModel(@@qiankunStateFromMaster); return <div>子应用接收到的状态: {count}</div>; }; 4.2 状态管理

除了事件通信，Qiankun 还支持通过状态管理库（如 Redux、MobX）进行子应用之间的通信。可以在主应用中创建一个全局的 Redux store，然后将 store 传递给子应用。

5. 样式隔离与沙箱隔离

Qiankun 通过 Shadow DOM 或 CSS 选择器前缀的方式实现子应用的样式隔离。默认情况下，Qiankun 使用 CSS 选择器前缀的方式，可以通过配置 sandbox 选项启用 Shadow DOM。

export default { qiankun: { master: { sandbox: true, }, }, };

对于 JavaScript 沙箱隔离，Qiankun 提供了 sandbox 选项，可以通过配置 sandbox 选项启用沙箱隔离。

export default { qiankun: { master: { sandbox: true, }, }, }; 6. 性能优化

在微前端架构中，子应用的加载和运行性能是一个重要的考虑因素。Qiankun 提供了多种性能优化手段，包括：

按需加载：Qiankun 支持子应用的按需加载，可以在路由切换时动态加载子应用。 预加载：Qiankun 支持子应用的预加载，可以在主应用启动时预加载子应用的资源。 缓存：Qiankun 支持子应用的缓存，可以在子应用卸载时保留其状态和 DOM 结构。 7. 实际项目中的应用

在实际项目中，Umi 和 Qiankun 可以应用于多种场景，例如：

大型企业应用：将企业应用拆分为多个子应用，每个子应用由不同的团队独立开发和部署。 多租户系统：为不同的租户提供不同的子应用，实现租户之间的隔离。 增量升级：逐步将老的应用替换为新的子应用，而不需要一次性重构整个应用。 8. 总结

Umi 和 Qiankun 为微前端架构的实现提供了强大的支持，它们通过子应用的加载、卸载、样式隔离、沙箱隔离等功能，帮助开发者构建可维护、可扩展的前端应用。在实际项目中，Umi 和 Qiankun 可以应用于多种场景，解决大型前端应用的开发和维护难题。随着微前端架构的不断发展，Umi 和 Qiankun 将继续为前端开发者提供更多的可能性。