将 React 应用嵌入另一个 React 应用：微前端方案与实践-js教程-PHP中文网

将 React 应用嵌入另一个 React 应用：微前端方案与实践

DDD

发布： 2025-09-16 18:38:01

原创

769人浏览过

将 react 应用嵌入另一个 react 应用：微前端方案与实践

本文介绍了将一个 React 应用（子应用）嵌入到另一个 React 应用（父应用）中的方法，避免使用 iframe。核心方案是采用微前端架构，将子应用构建为独立的模块，然后在父应用中动态加载和渲染。文章将探讨微前端的概念，并提供一些可行的框架和工具，帮助开发者实现 React 应用的集成。

将一个 React 应用嵌入到另一个 React 应用中，而不使用 iframe，是一个常见的需求，尤其是在构建大型、模块化的前端应用时。iframe 虽然简单易用，但存在诸多缺点，例如 SEO 不友好、通信复杂、样式隔离性差等。更好的解决方案是采用微前端架构。

什么是微前端？

微前端是一种类似于微服务的架构风格，它将前端应用拆分成更小、更易于管理和部署的独立模块。每个模块可以由不同的团队开发，使用不同的技术栈，最终组合成一个完整的应用。

微前端的核心思想是将大型前端应用分解为多个自治的、可独立部署的小型应用，这些小型应用可以在同一个页面上无缝集成。

立即学习“前端免费学习笔记（深入）”；

实现微前端的几种方案

实现微前端的方式有很多种，以下是一些常见的方案：

Web Components: 使用 Web Components 技术将子应用封装成自定义元素，然后在父应用中像普通 HTML 元素一样使用。这种方式的优点是技术栈无关，但需要处理组件之间的通信和状态管理。
Module Federation (Webpack 5): Module Federation 是 Webpack 5 提供的一项功能，允许不同的 Webpack 构建的应用共享代码和依赖。通过 Module Federation，可以将子应用构建为远程模块，然后在父应用中动态加载和使用。
Single-SPA: Single-SPA 是一个 JavaScript 框架，用于组合多个单页应用。它可以将不同的应用加载到同一个页面上，并处理应用之间的路由和状态管理。

AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情
Iframe (不推荐): 虽然不推荐，但在某些特定场景下，iframe 仍然可以作为一种快速的解决方案。但是，需要注意 iframe 带来的各种问题，并尽量避免使用。

使用 Module Federation 实现微前端的示例

以下是一个使用 Module Federation 实现微前端的简单示例：

子应用 (Child App):

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    port: 3001,
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
  output: {
    publicPath: 'auto',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'childApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ChildComponent': './src/ChildComponent',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

登录后复制

src/ChildComponent.jsx:

import React from 'react';

const ChildComponent = () => {
  return <h1>Hello from Child App!</h1>;
};

export default ChildComponent;

登录后复制

父应用 (Parent App):

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    port: 3000,
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
  output: {
    publicPath: 'auto',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'parentApp',
      remotes: {
        childApp: 'childApp@http://localhost:3001/remoteEntry.js',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

登录后复制

src/App.jsx:

import React, { Suspense } from 'react';

const ChildComponent = React.lazy(() => import('childApp/ChildComponent'));

const App = () => {
  return (
    <div>
      <h1>Parent App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <ChildComponent />
      </Suspense>
    </div>
  );
};

export default App;

登录后复制

在这个示例中，子应用暴露了一个名为 ChildComponent 的组件。父应用通过 Module Federation 加载子应用的 remoteEntry.js 文件，并动态地引入和渲染 ChildComponent。

注意事项：