拆分与重构——微前端

代码里的小猫咪

于 2025-04-14 09:00:00 发布

阅读量1.3k

点赞数 51

分类专栏：微前端文章标签：前端架构微前端

本文链接：https://blog.csdn.net/weixin_52648900/article/details/147123357

版权

微前端专栏收录该内容

1 篇文章

订阅专栏

什么是微前端？

微前端是一种架构模式，类似于微服务的理念，但它应用于前端开发。它的核心思想是将一个大型的前端应用拆分成多个小的独立应用（微应用），每个微应用都可以独立开发、部署和运行。

简单来说：微前端是一种把前端大项目拆成多个小项目独立开发的技术架构，就像后端的微服务那样。

举个🌰（理解拆分）

假设有一个电商后台系统，有这些功能页面：

订单管理
商品管理
财务管理
用户权限管理

传统方式：这几个功能写在一个 Vue 项目里，几百个页面、几万行代码，团队多人协作容易混乱、部署慢、上线风险大。

微前端方式：把每个功能拆成一个独立的小前端应用，比如：

order-app：订单管理
product-app：商品管理
finance-app：财务管理
user-app：权限管理

每个小应用可以独立开发、独立部署、甚至技术栈不同（比如订单用 Vue，商品用 React 都行）。

为什么要使用微前端？

团队独立性：不同的团队可以独立开发自己的微应用，使用自己熟悉的技术栈。
灵活性：微应用之间可以独立更新和部署，不会影响主应用。
适应多技术栈：在一个项目中可以使用不同的框架和库，比如 React、Vue、Angular 等。

微前端的架构

在微前端中，存在两个主要的角色：

主应用（Container App）：负责承载和加载多个微应用。
微应用（Micro App）：每个微应用负责自己的一部分功能，可以使用不同的技术栈。

             +----------------------+
             |     主应用（壳子）     |
             |----------------------|
             |   微应用加载/管理逻辑   |
             +----------------------+
                |        |        |
        +-------+        +--------+-------+
        |                             |     |
+---------------+         +------------------+
| 订单微应用     |         | 商品微应用        |
|（Vue 项目）    |         |（React 项目）     |
+---------------+         +------------------+

微前端如何实现呢？

Webpack Module Federation（Webpack 模块联邦）

🔍 这是最主流、现代的方式，适用于用 Webpack 构建的 Vue/React 项目

核心概念：让前端项目可以在运行时引入其他 Webpack 构建好的模块。

也就是说，A 应用运行时可以加载 B 应用导出的组件，并且像本地组件一样使用！

示例结构：

假设有两个前端项目：

main-app：主应用，负责加载别的微应用
order-app：订单管理微应用，暴露出一个页面模块

步骤1：配置微应用 order-app

// order-app/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'orderApp',
      filename: 'remoteEntry.js',  // 暴露的入口
      exposes: {
        './OrderPage': './src/pages/OrderPage',  // 暴露页面模块
      },
    }),
  ],
};

步骤2：配置主应用 main-app

// main-app/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'mainApp',
      remotes: {
        orderApp: 'orderApp@http://localhost:9001/remoteEntry.js',
      },
    }),
  ],
};

主应用中使用微应用的组件：

// main-app/src/App.tsx
import React, { Suspense, lazy } from 'react';

const OrderPage = lazy(() => import('orderApp/OrderPage'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OrderPage />
    </Suspense>
  );
}

Module Federation 优点：

支持 运行时加载 微应用；
可以 共享依赖（React/Vue 不重复打包）；
可以每个微应用独立部署，上线互不影响；

Web Components（原生技术，框架无关）

🔍 是浏览器支持的一种组件化标准，所有框架都能用（Vue/React/Angular）

核心概念：

Web Components 是原生浏览器提供的组件封装机制，它有三个核心能力：

Custom Elements：自定义标签<my-element>
Shadow DOM：样式和结构隔离
HTML Templates：模板定义

核心逻辑：

每个微应用暴露为一个自定义标签，例如：

<order-app></order-app>
<product-app></product-app>

主应用只要动态插入这些标签就能运行微应用，完全解耦。

举个 🌰：Vue 3 打包 Web Component

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      library: 'OrderApp',
      libraryTarget: 'window',
    },
  },
  chainWebpack: config => {
    config.plugins.delete('html');
  },
};

// main.js
import { createApp } from 'vue';
import OrderApp from './App.vue';

const app = createApp(OrderApp);
app.mount('#order-app'); // 主应用会加载这个元素

主应用集成 Web Component：

<script src="http://localhost:8081/order-app.js"></script>
<order-app></order-app>

注意事项

问题	说明	解决方案
样式冲突	多个微应用样式互相污染	使用 CSS Modules 或 Shadow DOM
多框架共存	Vue 与 React 同时运行可能冲突	保持技术边界、互不干扰
微应用加载慢	首屏性能差	使用懒加载、按需加载
路由冲突	主子应用都使用前端路由	采用 hash 模式或 base 配置隔离
共享依赖版本不同	微应用和主应用版本不一致	使用 Webpack shared 配置统一版本