微前端：面向大型应用的开发架构——深入理解 React，第 10 天
📅
| 特点 | 单体前端 | 微前端 |
|---|---|---|
代码库 | 一个大型代码库 | 多个较小的代码库 |
开发 | 所有团队在同一代码库中工作 | 各团队在独立的代码库中工作 |
部署 | 以整个应用为单位部署 | 各微应用可独立部署 |
技术栈 | 单一技术栈，难以更换 | 可以使用不同技术栈，便于逐步更换 |
团队结构 | 按职能划分的团队，或一个大型团队 | 按业务领域或功能划分的自主团队 |
耦合程度 | 较高，改动影响范围大 | 较低，改动影响范围有限 |
复杂性 | 初期较低，规模扩大后迅速上升 | 初期配置较复杂，单个微应用较简单 |
// Remote 앱 (예: 'profileApp')의 webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require('./package.json').dependencies; // 공유 의존성 버전 관리
module.exports = {
// ... 기타 설정 ...
plugins: [
new ModuleFederationPlugin({
name: 'profileApp', // Remote 앱의 고유 이름
filename: 'remoteEntry.js', // Host가 참조할 진입점 파일
exposes: {
// 외부에 노출할 모듈 경로 매핑 ('./UserProfile' 키로 접근)
'./UserProfile': './src/UserProfile',
},
shared: { // 공유할 의존성 설정
...deps, // package.json의 모든 의존성 공유 (간단 예시)
react: { singleton: true, requiredVersion: deps.react },
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
},
}),
],
};// Host 앱 (예: 'containerApp')의 webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require('./package.json').dependencies;
module.exports = {
// ... 기타 설정 ...
plugins: [
new ModuleFederationPlugin({
name: 'containerApp',
remotes: {
// 사용할 Remote 앱 정보 등록 (profileApp@http://localhost:3001/remoteEntry.js)
profileApp: 'profileApp@http://localhost:3001/remoteEntry.js',
},
shared: { // 공유할 의존성 설정 (Remote와 동일하게)
...deps,
react: { singleton: true, requiredVersion: deps.react },
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
},
}),
],
};// Host 앱의 컴포넌트에서 Remote 컴포넌트 사용
import React, { lazy, Suspense } from 'react';
const RemoteUserProfile = lazy(() => import('profileApp/UserProfile'));
function App() {
return (
<div>
<h1>컨테이너 앱</h1>
<Suspense fallback="Loading Profile...">
<RemoteUserProfile />
</Suspense>
</div>
);
}containerApp 就能像使用自身代码一样加载 profileApp 暴露的 UserProfile 组件，同时避免重复加载 React 等共享库。问：什么是 Webpack Module Federation？它解决了微前端中的哪些问题？ 答：它允许多个独立构建的 Webpack 应用在运行时动态共享代码。在微前端中，可以用它在微应用之间共享组件，避免重复加载公共库。
Module Federation 在内部利用依赖图管理共享模块与版本。Single-SPA 可以用类似哈希表的路由表，将 URL 映射到微应用。
下一篇将介绍如何在前端有效处理 API 通信与管理异步操作。从比较 Axios 与 Fetch，到 AbortController 和 GraphQL 客户端，一起看看不同的 API 通信方式。