本文介绍了将一个 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 框架，用于组合多个单页应用。它可以将不同的应用加载到同一个页面上，并处理应用之间的路由和状态管理。
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。
注意事项：
- 确保父应用和子应用共享相同的 React 和 ReactDOM 版本，以避免冲突。
- 使用 Suspense 组件处理异步加载组件时的加载状态。
- 配置合适的 publicPath，确保资源文件能够正确加载。
总结
微前端是一种强大的架构模式，可以帮助开发者构建大型、模块化的前端应用。通过将应用拆分成更小、更易于管理和部署的独立模块，可以提高开发效率、降低维护成本，并实现技术栈的解耦。选择合适的微前端方案，并根据实际情况进行调整，是成功实施微前端的关键。
