微前端架构

lishihuan大约 5 分钟

微前端架构

一、什么是微前端

微前端是将前端应用拆分成多个独立的子应用（子模块），每个子应用可以由不同的团队独立开发、测试、部署。它是微服务open in new window架构在前端领域的延伸，目标是让前端架构更具模块化、可扩展性和灵活性。

实现方式：

  • 基于微前端框架：如 Single-SPA 和 Qiankun 等框架，可以将多个独立的前端应用集成到一个主平台中。每个子应用独立开发和部署，且主平台通过框架动态加载这些子应用。
  • 模块化开发：将平台的不同功能模块拆分成多个子模块，使用技术（如 Webpack Module Federation 或 SystemJS）动态加载这些模块。每个子模块独立开发、更新，并通过 API 与主平台交互。

微前端架构的优点：

  1. 团队独立性：不同团队可以独立开发和发布自己的应用，减少了跨团队协调的难度。
  2. 技术栈独立性：不同的子应用可以使用不同的技术栈，例如一个子应用使用 Vue 2，另一个使用 Vue 3，甚至其他框架如 React。
  3. 按需加载：微前端允许按需加载子应用，提高了页面加载速度和性能。
  4. 可维护性和可扩展性：子应用可以独立进行升级和维护，支持按模块进行扩展。

微前端架构的挑战：

  1. 子应用间的通信：如何处理主应用与子应用之间的数据共享和事件通信。
  2. UI 一致性：如何保持主应用和各个子应用的界面一致性，尤其是使用不同前端框架时。
  3. 性能优化：多个子应用加载可能会影响性能，需要通过技术手段优化加载和资源管理。

二、常见的微前端框架

  • Qiankun：Qiankun 官方open in new window（基于 Single-SPA 的微前端框架）
    • 支持 React、Vue、Angular 等不同框架的子应用。
    • 自动化的生命周期管理，按需加载子应用。
    • 支持子应用的独立部署。
  • Single-SPA：Single-SPA 官方open in new window
    • 用于将多个框架整合在一个页面中，可以同时运行多个子应用。
    • 兼容 React、Vue、Angular 等多个框架。
  • Module Federation：Webpack 5 提供的模块联邦功能，支持多个应用之间共享依赖，减少重复加载资源。

三、微前端架构的开发与部署流程

1. 项目初始化

  • 创建一个主应用，并使用 Qiankun 注册和加载多个子应用。
  • 每个子应用可以是独立的 Vue、React 或 Angular 应用，拥有自己的路由、生命周期和构建配置。

2. 开发主应用和子应用

  • 主应用：负责加载、卸载子应用，提供共享的公共组件和样式。
  • 子应用：每个子应用独立开发，可以使用不同的技术栈和框架，暴露必要的生命周期钩子（如 bootstrap、mount 和 unmount）。

3. 配置微前端框架

  • 配置主应用通过 registerApplication 注册子应用。
  • 配置子应用通过 Qiankun 提供的生命周期钩子来暴露和管理自己的加载、卸载。

4. 部署

  • 每个子应用独立部署，通常是部署到不同的路径（如 /vue2-app、/vue3-app）。
  • 主应用通过 URL 动态加载子应用，通常通过 Webpack 或其他打包工具优化资源加载。

5. 主应用与子应用的集成

  • 在主应用中配置正确的路由和 URL，确保主应用能够加载不同路径的子应用。
  • 确保子应用的资源路径（如 JS、CSS 文件）在不同的环境下（如开发环境、生产环境）都能正确加载。

四、实现 Demo

下面是一个简单的 Qiankun 微前端架构的 Demo，包括一个主应用和两个子应用：一个使用 Vue 2，一个使用 Vue 3。

1. 创建主应用（Vue 3）

使用 Vue CLI 创建 Vue 3 主应用，并安装 Qiankun：

vue create main-app
cd main-app
npm install qiankun

在 src/main.js 配置主应用：

import { createApp } from 'vue';
import App from './App.vue';
import { registerApplication, start } from 'qiankun';

const app = createApp(App);

// 注册子应用
registerApplication(
  'vue2-app',
  () => import('vue2-app/main'),
  location => location.pathname.startsWith('/vue2')
);

registerApplication(
  'vue3-app',
  () => import('vue3-app/main'),
  location => location.pathname.startsWith('/vue3')
);

start();

app.mount('#app');

2. 创建 Vue 2 子应用

使用 Vue CLI 创建 Vue 2 子应用，并安装 Qiankun：

vue create vue2-app
cd vue2-app
npm install qiankun

在 src/main.js 配置 Vue 2 子应用：

import Vue from 'vue';
import App from './App.vue';
import { setPublicPath } from 'systemjs-webpack-interop';

setPublicPath('vue2-app'); // 设置 publicPath

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

if (window.__POWERED_BY_QIANKUN__) {
  window['vue2-app'] = {
    bootstrap: () => {},
    mount: () => {
      new Vue({
        render: h => h(App),
      }).$mount('#app');
    },
    unmount: () => {},
  };
}

3. 创建 Vue 3 子应用

使用 Vue CLI 创建 Vue 3 子应用，并安装 Qiankun：

vue create vue3-app
cd vue3-app
npm install qiankun

在 src/main.js 配置 Vue 3 子应用：

import { createApp } from 'vue';
import App from './App.vue';
import { setPublicPath } from 'systemjs-webpack-interop';

setPublicPath('vue3-app'); // 设置 publicPath

const app = createApp(App);

app.mount('#app');

if (window.__POWERED_BY_QIANKUN__) {
  window['vue3-app'] = {
    bootstrap: () => {},
    mount: () => {
      app.mount('#app');
    },
    unmount: () => {
      app.unmount();
    },
  };
}

4. 配置 Webpack 或 Vue CLI

确保子应用的构建设置 publicPath 为 auto，以确保它们可以正确加载：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue2-app/' : '/',
  configureWebpack: {
    output: {
      publicPath: 'auto',
    },
  },
};

5. 启动应用

  • 启动主应用：npm run serve 或 yarn serve
  • 启动 Vue 2 子应用：npm run serve 或 yarn serve
  • 启动 Vue 3 子应用：npm run serve 或 yarn serve

6. 部署与集成

  • 主应用和子应用可以部署到不同的服务器，确保子应用通过路径（如 /vue2-app 和 /vue3-app）能够被正确访问。
  • 在主应用的 registerApplication 配置中指定正确的 URL 路径。

五、总结

微前端架构通过 Qiankun 或 Single-SPA 等框架实现，允许将前端应用拆分成多个独立的子应用，每个子应用可以由独立的团队开发和部署。通过这种架构，可以实现更灵活的开发流程，提高系统的可维护性和可扩展性。

通过上面的 Demo，你可以了解如何从创建、开发到部署实现微前端架构，并能把 Vue 2 和 Vue 3 子应用集成在一个主应用中。