当前位置：首页 > news >正文

微前端架构学习笔记

news 2025/7/18 22:29:41

前言

之前遇到过一个需求，有两个项目分别由两个不同的部门负责，不同技术栈，不同代码仓库：

A 项目是官网，负责展示产品亮点等信息，有多个入口可以进入 B 项目中的不同页面。
B 项目是业务线，负责处理具体的功能，可以跳转到 A 项目中登录/注册等。

现在想在这样跨域的两个项目之间，仅通过两个客户端，如何传递客户从 A 项目中上传的文件，使得 B 项目可以接收文件再处理后续的业务逻辑。

因为并未引入微前端方案，最终通过传递文件的 DataURL + IndexedDB 的方式来实现。

跑题一点，每个文件都可以生成 DataURL 和 BlobURL，在这篇文章中不展开讲了，之后会更新一篇文章记录两者的使用。

最终决定使用 DataURL 的原因是，涉及到链接跳转的动作，会导致 BlobURL 丢失。

如果引入了微前端的方案，那么这个问题就很好解决，下面将详细记录微前端相关的笔记。

1.什么是微前端？

微前端（Micro Frontends）是一种将前端应用程序拆分成多个较小、独立、可管理的部分的架构方法。

图片来源于micro-app官网

微前端借鉴微服务架构（Micro Services），将一个前端应用程序拆分成多个子应用，子应用可以分别独立开发、测试、部署和维护。

微前端平台

single-spa

将多个独立的单页面应用组合到一个父应用中的微前端框架

特点

无框架限制

        对于 React，可以使用 single-spa-react

        对于 Vue，可以使用 single-spa-vue

        对于 Angular，可以使用 single-spa-angular

可以与其他微前端框架（如 qiankun）结合使用
主应用与子应用无耦合，每个子应用都可以独立加载和卸载

缺点

配置较为繁琐，需要开发者手动管理每个子应用的生命周期和加载

        要求子应用暴露三个生命周期方法（bootstrap、mount、unmount），并且需要对子应用的入口进行适当的修改。

适用场景

需要多种前端技术栈共存的项目
可以与现有的应用逐步迁移到微前端架构中

以 Vue3.0 为例，借用 single-spa-vue
npm install vue@next single-spa-vue
目录结构
my-micro-frontend/
├── dist/                      # 构建后的输出
├── public/
│   └── index.html             # 主页面，包含单页面应用入口
├── src/
│   ├── main.ts                # 主应用，加载子应用
│   ├── vue-app.ts             # 子应用生命周期方法
│   ├── vue-app.vue            # Vue 3 组件
├── tsconfig.json              # TypeScript 配置
├── webpack.config.js (or vite.config.ts)
└── package.json
配置子应用
// vue-app.vue
<template><div id="app"><h1>Vue 3 Micro Frontend</h1><p>This is a micro frontend app rendered using Vue 3 and Single-spa!</p></div>
</template><script setup lang="ts">
/*** 这个组件通过 single-spa 在主应用中渲染*/
</script>
在 vue-app.ts 中，使用 singleSpaVue 暴露 bootstrap、mount 和 unmount 方法。
// vue-app.ts
import { createApp, App as VueApp } from "vue";
import { singleSpaVue } from "single-spa-vue";
import App from "./App.vue";// 定义 Single-spa 生命周期方法的类型
const vueLifecycles = singleSpaVue({createApp,appOptions: {render: (h: any) => h(App), // 渲染根组件},
});// 暴露 Single-spa 所需的生命周期方法
export const bootstrap: (props: any) => Promise<void> = vueLifecycles.bootstrap;
export const mount: (props: any) => Promise<void> = vueLifecycles.mount;
export const unmount: (props: any) => Promise<void> = vueLifecycles.unmount;
配置主应用

主应用负责注册子应用并启动 single-spa，不需要直接渲染 Vue 应用。在主应用中不需要手动调用 createApp(App).mount('#app')，都由 single-spa-vue 管理。
// main.ts
import { registerApplication, start } from "single-spa";// 注册 Vue 子应用
registerApplication("vue-app", // 子应用名称() => import("./vue-app.ts"), // 动态导入子应用生命周期方法(location) => location.pathname.startsWith("/vue-app") // 激活条件
);// 启动 single-spa
start();
配置 Webpack 或 Vite
// webpack.config.js
const path = require("path");module.exports = {entry: "./src/main.ts",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",publicPath: "/",},resolve: {extensions: [".ts", ".js", ".vue", ".json"],alias: {vue: "vue/dist/vue.esm-bundler.js",},},module: {rules: [{test: /\.ts$/,loader: "ts-loader",exclude: /node_modules/,},{test: /\.vue$/,loader: "vue-loader",},],},plugins: [new (require("vue-loader").VueLoaderPlugin)(),],devServer: {historyApiFallback: true,},
};
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],build: {target: "esnext",outDir: "dist",lib: {entry: "src/vue-app.ts",name: "VueApp",fileName: "vue-app",formats: ["es"],},rollupOptions: {external: ["vue"],},},
});
qiankun

基于 single-spa 的微前端实现库，提供了更易用的 API

特点

无框架限制
支持按需加载子应用，支持懒加载、动态加载
提供沙箱机制，可以隔离不同微前端应用的全局状态
支持使用插件系统来扩展功能

缺点

封装了 single-spa，因此继承了对子应用的生命周期管理

适用场景

适合已有单页面应用架构，并计划迁移或拆分成多个微前端应用的场景

MicroApp

基于 WebComponent 的微前端框架，使用原生浏览器支持的 Web Component 标准来封装和管理微前端应用

特点

将每个微前端应用封装为 Web Component，子应用能够更好地与其他应用隔离
Web Component 是原生浏览器技术，MicroApp 不依赖任何前端框架
支持自定义生命周期函数，能精细控制子应用的加载、渲染、销毁等过程

缺点

Web Component 在不同浏览器的兼容性可能会存在差异
对开发者来说，需要一定的 Web Component 知识

适用场景

适合希望轻量化的微前端架构，或者不希望依赖第三方框架的场景
对应用的封装性和隔离性有较高要求的场景

Module federation

Webpack 5 引入的一个新特性，允许将一个应用的模块动态加载到另一个应用中。

特点

能够共享模块，比如 React 和 Vue 等常用依赖，避免重复加载
可以按需加载子应用，并支持运行时动态决定要加载哪些模块
不依赖框架，是直接基于 Webpack 的构建系统

缺点

配置复杂，需要对 Webpack 的运行机制有较深入的了解
很少提供封装好的 API，开发者需要更多的手动管理

适用场景

适合已经使用 Webpack 的项目，特别是对微前端的集成要求较高的场景

2.微前端的架构实现方式

1）基于 URL 路由

通过 URL 路由来加载不同的微前端子应用

假设有一个电商平台，主应用是一个统一的首页展示，而不同的页面（如产品详情页、用户中心、购物车等）分别由不同的子应用负责。

使用主应用中的路由管理器来控制子应用的加载和渲染。
主应用的路由会根据 URL 地址来决定展示哪个子应用的页面。

// 主应用路由配置示例
const routes = [{ path: '/products', component: ProductApp },{ path: '/cart', component: CartApp },{ path: '/user', component: UserApp }
];

2）基于 Web Components

使用 Web Components 技术来将不同的子应用封装成独立的组件。这样可以确保每个子应用的样式和功能相互隔离，避免冲突。

假设有一个新闻网站，主应用展示统一的导航栏和布局，而每个新闻分类（如国内新闻、国际新闻、科技新闻）由不同的微前端子应用负责。

每个子应用作为一个独立的 Web Component 封装，主应用直接通过 <my-product-app></my-product-app> 这样的标签来加载和渲染。
Web Components 提供了封装功能，避免了样式和脚本冲突。

基础写法

// 子应用：ProductApp 使用 Web Components 封装
class ProductApp extends HTMLElement {connectedCallback() {this.innerHTML = `<div>Product List</div>`;}
}customElements.define('my-product-app', ProductApp);// 主应用直接使用 Web Component
<my-product-app></my-product-app>

复杂结构写法

// 定义子应用组件 ProductApp
class ProductApp extends HTMLElement {constructor() {super();this.attachShadow({ mode: 'open' }); // 使用 Shadow DOM，避免样式污染}connectedCallback() {this.render();}render() {const template = document.createElement('template');template.innerHTML = `<style>.product-list {color: #333;font-size: 16px;}.product-item {margin: 10px 0;}</style><div class="product-list"><div class="product-item">Product 1</div><div class="product-item">Product 2</div><div class="product-item">Product 3</div></div>`;// 将模板内容插入 Shadow DOMthis.shadowRoot.appendChild(template.content.cloneNode(true));}
}// 注册自定义元素
customElements.define('my-product-app', ProductApp);

// 在主应用中
<my-product-app></my-product-app>

通过 Shadow DOM 进行样式隔离，也可以使用外部样式表。Shadow DOM 有两个主要好处：

样式封装：子应用的样式不会影响到主应用或其他子应用。
DOM 隔离：确保子应用的内部结构和样式不会被外部应用干扰。

使用外部样式表

class ProductApp extends HTMLElement {constructor() {super();this.attachShadow({ mode: 'open' });}connectedCallback() {this.render();}render() {// 引入外部样式const link = document.createElement('link');link.rel = 'stylesheet';link.href = 'styles.css'; // 外部 CSS 文件// 模板内容const template = document.createElement('template');template.innerHTML = `<div class="product-list"><div class="product-item">Product 1</div><div class="product-item">Product 2</div><div class="product-item">Product 3</div></div>`;// 将样式和模板添加到 Shadow DOMthis.shadowRoot.appendChild(link);this.shadowRoot.appendChild(template.content.cloneNode(true));}
}

3）基于 JavaScript 动态加载

使用 JavaScript 动态加载工具（如 Webpack）来按需加载不同的子应用。

假设有一个在线教育平台，主应用加载时并不加载所有课程内容，而是按需加载不同课程模块。

在主应用中通过 import() 动态加载子应用的 JavaScript 模块。

// 使用 Webpack 动态加载子应用
const loadCourseApp = () => {import(/* webpackChunkName: "course-app" */ './course-app').then(module => {module.renderCoursePage();}).catch(err => {console.error('Error loading course app:', err);});
};

4）基于 iFrame

每个子应用运行在一个独立的 iFrame 中，彼此之间无任何依赖。

假设有一个跨域的企业管理平台，不同的部门使用不同的子系统（如人事管理、财务管理等），每个部门的系统是独立的。

每个子应用运行在独立的 iFrame 中，iFrame 嵌入到主应用页面中。
可以完全隔离不同的子系统，避免了跨域和样式冲突的问题。

<!-- 主应用使用 iFrame 嵌入子应用 -->
<iframe src="https://example.com/finance" width="100%" height="500px"></iframe>
<iframe src="https://example.com/hr" width="100%" height="500px"></iframe>