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

微前端教程：使用 Single-SPA 构建模块化应用

news 来源：原创 2025/5/10 20:59:35

前言

微前端是一种新的前端架构理念，它允许我们将多个独立开发、独立部署的前端应用组合成一个大的应用。
使用微前端的主要好处是可以让不同的团队独立开发和维护应用的不同部分，从而提高开发效率和减少部署风险。而其中，Single-SPA 是一个非常流行的微前端框架，它能够帮助我们轻松实现微前端架构。

什么是 Single-SPA？

Single-SPA 的全称是 “Single Page Application”，它是一个前端微服务架构的 JavaScript 库。它允许我们在一个页面中运行多个框架（例如 React、Vue、Angular 等），并且能够动态加载和卸载这些框架。这意味着你可以在同一个应用中使用多种技术，并且可以逐步迁移旧技术到新技术，而无需一次性重写全部代码。

Single-SPA 的基本概念

在开始使用 Single-SPA 之前，我们需要了解几个基本概念：

Applications（应用）：这是我们要加载和卸载的微前端应用。
Parcels（包裹）：这是一些独立的代码片段，可以在应用内部进行动态加载和卸载。
Modules（模块）：这是一些公共的代码片段，可以在多个应用之间共享。

如何安装 Single-SPA

首先，我们需要安装 Single-SPA。这可以通过 npm 来完成：

npm install single-spa

创建一个简单的微前端应用

我们将创建两个简单的 React 应用，并使用 Single-SPA 将它们组合在一起。

创建 React 应用

首先，使用 Create React App 创建两个独立的应用：

npx create-react-app app1
npx create-react-app app2

配置 Single-SPA

在两个 React 应用中，我们需要安装 single-spa-react 包：

npm install single-spa-react

接下来，在每个应用的 src 目录下创建一个 root-config.js 文件，用于配置 Single-SPA：

import { registerApplication, start } from 'single-spa';
import { loadApp } from './loadApp';

registerApplication(
  'app1',
  () => loadApp('http://localhost:3001'),
  location => location.pathname.startsWith('/app1')
);

registerApplication(
  'app2',
  () => loadApp('http://localhost:3002'),
  location => location.pathname.startsWith('/app2')
);

start();

在这个配置文件中，我们注册了两个应用 app1 和 app2，并指定它们的入口 URL 和激活条件（URL 路径）。

配置每个应用的入口

接着，我们需要配置每个应用的入口文件。在 app1 的 src 目录下创建一个 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
});

export const { bootstrap, mount, unmount } = lifecycles;

同样地，在 app2 中创建相同的文件和配置：

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
});

export const { bootstrap, mount, unmount } = lifecycles;

启动应用

现在，我们需要启动两个 React 应用，并确保它们运行在不同的端口。你可以修改 package.json 文件中的 start 命令：

"scripts": {
  "start": "PORT=3001 react-scripts start"
}

和

"scripts": {
  "start": "PORT=3002 react-scripts start"
}

在两个终端分别运行：

npm start

最后，我们可以启动 Single-SPA 的主应用。创建一个新的项目用于加载这两个微前端应用，并在 public/index.html 中添加：

<script src="http://localhost:3001/static/js/bundle.js"></script>
<script src="http://localhost:3002/static/js/bundle.js"></script>
<script src="./root-config.js"></script>

优化和扩展

虽然我们已经成功构建了一个简单的微前端架构，但实际应用中可能会遇到更多复杂的场景和需求。接下来，我们将讨论一些优化和扩展的方法，使我们的微前端架构更加健壮和灵活。

1. 动态加载应用

在实际项目中，我们可能不希望所有应用在主应用加载时就全部加载完毕，这会增加初始加载时间。我们可以使用动态加载的方法，只有在需要时才加载对应的应用。

registerApplication(
  'app1',
  () => System.import('app1'),
  location => location.pathname.startsWith('/app1')
);

registerApplication(
  'app2',
  () => System.import('app2'),
  location => location.pathname.startsWith('/app2')
);

这里我们使用 System.import 来动态加载应用，确保只在需要时加载相应的代码。

2.共享依赖

在多个微前端应用中，某些库（如 React）可能会被重复加载，导致资源浪费和性能问题。我们可以通过配置 webpack 的 externals 来共享公共依赖。

例如，在应用的 webpack.config.js 中添加：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}

然后在 HTML 中引入这些外部依赖：

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

3.路由管理

由于我们使用多个独立的应用，路由管理也需要相应调整。建议使用每个应用各自的路由管理，并在主应用中配置顶层路由。

在主应用中：

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { start, registerApplication } from 'single-spa';

registerApplication(
  'app1',
  () => System.import('app1'),
  location => location.pathname.startsWith('/app1')
);

registerApplication(
  'app2',
  () => System.import('app2'),
  location => location.pathname.startsWith('/app2')
);

start();

const Root = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/app1" />
      <Route path="/app2" />
    </Switch>
  </BrowserRouter>
);

export default Root;

这样每个子应用可以继续使用自己熟悉的路由管理库，如 React Router 或 Vue Router。

4.状态管理

在微前端架构中，状态管理可能会变得复杂。每个微前端应用可以使用自己的状态管理工具（如 Redux 或 Vuex），但在一些情况下，我们可能需要共享全局状态。

一种解决方法是使用事件总线或者全局状态库，如 RxJS 或 MobX。

下面是使用 RxJS 共享状态的示例：

import { BehaviorSubject } from 'rxjs';

const globalState = new BehaviorSubject({});

export const setGlobalState = (newState) => {
  globalState.next(newState);
};

export const subscribeToGlobalState = (callback) => {
  return globalState.subscribe(callback);
};

然后在各个微前端应用中使用：

import { subscribeToGlobalState } from './globalState';

subscribeToGlobalState((state) => {
  // 在应用中响应全局状态变化
});

总结

通过以上步骤，我们已经成功使用 Single-SPA 创建了一个简单的微前端架构。我们可以在不同的团队中使用不同的技术栈进行开发，并将它们组合在一起成为一个大的应用。这种方法不仅提高了开发效率，还降低了技术迁移的风险。随着技术的发展，微前端将成为未来前端架构的重要组成部分。希望这篇教程能帮助你理解和使用 Single-SPA，开启你的微前端之旅！