Skip to content

Commit 279d597

Browse files
author
nyqykk
committed
docs: add en doc
1 parent 686350b commit 279d597

File tree

4 files changed

+177
-1
lines changed

4 files changed

+177
-1
lines changed

‎website/docs/en/guide/_meta.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,10 @@
88
"type": "dir",
99
"name": "basic",
1010
"label": "Basic"
11+
},
12+
{
13+
"type": "dir",
14+
"name": "advanced",
15+
"label": "Advanced"
1116
}
1217
]

‎website/docs/en/guide/advanced/_meta.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
["module-federation"]

‎website/docs/en/guide/advanced/module-federation.mdx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
# Module Federation
2+
3+
This chapter will introduce how to quickly build Module Federation products in Rslib
4+
5+
## Glossary
6+
7+
Module Federation is a JavaScript application divide-and-conquer architecture pattern (similar to server-side microservices) that allows you to share code and resources between multiple JavaScript applications (or Micro-Frontend).
8+
9+
## Usage scenarios
10+
11+
Module federation has some typical usage scenarios, including:
12+
13+
Allows independent applications (called "Micro-Frontend" in the Micro-Frontend architecture) to share modules without having to recompile the entire application.
14+
Different teams work on different parts of the same application without having to recompile the entire application.
15+
Dynamic code loading and sharing between applications at runtime.
16+
Module federation can help you:
17+
18+
- Reduce code duplication
19+
- Improve code maintainability
20+
- Reduce the overall size of the application
21+
- Improve application performance
22+
23+
## Quick access
24+
25+
First install the Module Federation Rsbuild Plugin (Rslib is built on Rsbuild)
26+
27+
import { PackageManagerTabs } from '@theme';
28+
29+
<PackageManagerTabs
30+
command={{
31+
npm: 'npm add @module-federation/rsbuild-plugin --save-dev',
32+
yarn: 'yarn add @module-federation/rsbuild-plugin --save-dev',
33+
pnpm: 'pnpm add @module-federation/rsbuild-plugin --save-dev',
34+
bun: 'bun add @module-federation/rsbuild-plugin --save-dev',
35+
}}
36+
/>
37+
38+
Add the plugin to the `rslib.config.ts` file
39+
40+
```ts title='rslib.config.ts'
41+
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
42+
import { pluginReact } from '@rsbuild/plugin-react';
43+
import { defineConfig } from '@rslib/core';
44+
45+
export default defineConfig({
46+
lib: [
47+
// ... other format
48+
{
49+
format: 'mf',
50+
output: {
51+
distPath: {
52+
root: './dist/mf',
53+
},
54+
// add your assetPrefix here
55+
assetPrefix: 'http://localhost:3001/mf',
56+
},
57+
plugins: [
58+
pluginModuleFederation({
59+
name: 'rslib_provider',
60+
exposes: {
61+
// add expose here
62+
},
63+
// can not add 'remote' here, because you may build 'esm' or 'cjs' assets in one build.
64+
// if you want the rslib package use remote module, please see below.
65+
shared: {
66+
react: {
67+
singleton: true,
68+
},
69+
'react-dom': {
70+
singleton: true,
71+
},
72+
},
73+
}),
74+
],
75+
},
76+
],
77+
plugins: [pluginReact()],
78+
});
79+
```
80+
81+
In this way, we have completed the integration of Rslib Module as a producer. After the construction is completed, we can see that the mf directory has been added to the product, and consumers can directly consume this package
82+
83+
In the above example we added a new `format: 'mf'` , which will help you add an additional Module Federation product, while also configuring the format of `cjs` and `esm` , which does not conflict.
84+
85+
However, if you want this Rslib Module to consume other producers at the same time, do not use the build configuration `remote` parameter, because in other formats, this may cause errors, please refer to the example below using the Module Federation runtime
86+
87+
## Consume other Module Federation modules
88+
89+
Because there are multiple formats in Rslib, if you configure the `remote` parameter to consume other modules during construction, it may not work properly in all formats. It is recommended to access through the [Module Federation Runtime](https://module-federation.io/guide/basic/runtime.html)
90+
91+
First install the runtime dependencies
92+
93+
<PackageManagerTabs
94+
command={{
95+
npm: 'npm add @module-federation/enhanced --save',
96+
yarn: 'yarn add @module-federation/enhanced --save',
97+
pnpm: 'pnpm add @module-federation/enhanced --save',
98+
bun: 'bun add @module-federation/enhanced --save',
99+
}}
100+
/>
101+
102+
Then consume other Module Federation modules at runtime, for example
103+
104+
```ts
105+
import { init, loadRemote } from '@module-federation/rsbuild-plugin/runtime';
106+
import { Suspense, createElement, lazy } from 'react';
107+
108+
init({
109+
name: 'rslib_provider',
110+
remotes: [
111+
{
112+
name: 'mf_remote',
113+
entry: 'http://localhost:3002/mf-manifest.json',
114+
},
115+
],
116+
});
117+
118+
export const Counter: React.FC = () => {
119+
return (
120+
<div>
121+
<Suspense fallback={<div>loading</div>}>
122+
{createElement(
123+
lazy(
124+
() =>
125+
loadRemote('mf_remote') as Promise<{
126+
default: React.FC;
127+
}>,
128+
),
129+
)}
130+
</Suspense>
131+
</div>
132+
);
133+
};
134+
```
135+
136+
This ensures that modules can be loaded as expected in multiple formats
137+
138+
## FAQs
139+
140+
If the Rslib producer is built with build, this means that the `process.env.NODE_ENV` of the producer is `production` . If the consumer is started in dev mode at this time,
141+
Due to the shared loading policy of Module Federation being `version-first` by default, there may be problems loading into different modes of react and react-dom (e.g. react in development mode, react-dom in production mode).
142+
You can set up [shareStrategy](https://module-federation.io/configure/sharestrategy) at the consumer to solve this problem, but make sure you fully understand this configuration
143+
144+
```ts
145+
pluginModuleFederation({
146+
// ...
147+
shareStrategy: 'loaded-first',
148+
}),
149+
```
150+
151+
## Reference examples
152+
153+
[Rslib Module Federation Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)
154+
155+
- `mf-host`: Rsbuild App Consumer
156+
- `mf-react-component`: Rslib Module, which is both a producer and a consumer, provides the module to the `mf-host` as a producer, and consumes the `mf-remote`
157+
- `mf-remote`: Rsbuild App Producer

‎website/docs/zh/guide/advanced/module-federation.mdx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default defineConfig({
5252
root: './dist/mf',
5353
},
5454
// add your assetPrefix here
55-
// assetPrefix: 'http://localhost:3001/mf',
55+
assetPrefix: 'http://localhost:3001/mf',
5656
},
5757
plugins: [
5858
pluginModuleFederation({
@@ -135,6 +135,19 @@ export const Counter: React.FC = () => {
135135

136136
这样可以保证在多种 format 中都能按预期进行加载模块
137137

138+
## 常见问题
139+
140+
如果 Rslib 生产者是通过 build 构建的，这意味着生产者的 `process.env.NODE_ENV` 是 `production`。如果这时消费者是 dev 模式启动的，
141+
由于 Module Federation 的 shared 加载策略默认是 `version-first`，可能会出现加载到不同模式的 react 和 react-dom 的问题（例如 development 模式的 react，production 模式的 react-dom）。
142+
这时可以在消费者处设置 [shareStrategy](https://module-federation.io/configure/sharestrategy) 来解决这个问题，但请确保您充分了解这个配置
143+
144+
```ts
145+
pluginModuleFederation({
146+
// ...
147+
shareStrategy: 'loaded-first',
148+
}),
149+
```
150+
138151
## 参考例子
139152

140153
[Rslib Module Federation Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)

0 commit comments

Comments
 (0)