๐ก Rsbuild Ultra-Fast Frontend Build Setup with โ Executive Summary
Technical architectural analysis, practical configuration manifests, and deployment instructions for Rsbuild Ultra-Fast Frontend Build Setup with.
For ModuleFederation-Enhanced
Producer (Provider, Remote)
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 3000,
},
dev: {
// It is necessary to configure assetPrefix, and in the production build, you need to configure output.assetPrefix
assetPrefix: 'http://localhost:3000',
},
tools: {
rspack: (config, { appendPlugins }) => {
// You need to set a unique value that is not equal to other applications
config.output!.uniqueName = 'federation_provider';
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_provider',
exposes: {
'./button': './src/Button.tsx',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});Consumer (Host)
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 2000,
},
tools: {
rspack: (config, { appendPlugins }) => {
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_consumer',
remotes: {
federation_provider: 'federation_provider@http://localhost:3000/mf-manifest.json',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});For ModuleFederation
Remote
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mfConfig } from './module-federation.config';
export default defineConfig({
plugins: [pluginReact()],
server: {
port: 3002,
},
moduleFederation: {
options: mfConfig,
},
});Remote โ module-federation.config.ts
bash
import { dependencies } from './package.json';
import type { Rspack } from '@rsbuild/core';
export const mfConfig: Rspack.ModuleFederationPluginOptions = {
name: 'remote',
exposes: {
'./Button': './src/Button',
},
filename: 'remoteEntry.js',
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies.react,
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom'],
},
},
};Host
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mfConfig } from './module-federation.config';
export default defineConfig({
plugins: [pluginReact()],
server: {
port: 3000,
},
moduleFederation: {
options: mfConfig,
},
});Host โ module-federation.config.ts
bash
import { dependencies } from './package.json';
import type { Rspack } from '@rsbuild/core';
export const mfConfig: Rspack.ModuleFederationPluginOptions = {
name: 'host',
remotes: {
remote: 'remote@http://localhost:3002/remoteEntry.js',
},
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies.react,
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom'],
},
},
};
Leave a Reply