feat(mf): support lazy compilation

Author: 2heal1

crates/rspack_plugin_mf/src/sharing/consume_shared_runtime_module.rs

@@ -104,21 +104,35 @@ impl RuntimeModule for ConsumeSharedRuntimeModule {
         add_module(mid, chunk, &mut initial_consumes);
       }
     }
-    if module_id_to_consume_data_mapping.is_empty() {
-      return Ok("".to_string());
-    }
-    let module_id_to_consume_data_mapping = module_id_to_consume_data_mapping
-      .into_iter()
-      .map(|(k, v)| format!("{}: {}", json_stringify(&k), v))
-      .collect::<Vec<_>>()
-      .join(", ");
+    let module_id_to_consume_data_mapping = if module_id_to_consume_data_mapping.is_empty() {
+      "{}".to_string()
+    } else {
+      format!(
+        "{{{}}}",
+        module_id_to_consume_data_mapping
+          .into_iter()
+          .map(|(k, v)| format!("{}: {}", json_stringify(&k), v))
+          .collect::<Vec<_>>()
+          .join(", ")
+      )
+    };
+    let chunk_mapping = if chunk_to_module_mapping.is_empty() {
+      "{}".to_string()
+    } else {
+      json_stringify(&chunk_to_module_mapping)
+    };
+    let initial_consumes_json = if initial_consumes.is_empty() {
+      "[]".to_string()
+    } else {
+      json_stringify(&initial_consumes)
+    };
     let mut source = format!(
       r#"
-__webpack_require__.consumesLoadingData = {{ chunkMapping: {chunk_mapping}, moduleIdToConsumeDataMapping: {{ {module_to_consume_data_mapping} }}, initialConsumes: {initial_consumes} }};
+__webpack_require__.consumesLoadingData = {{ chunkMapping: {chunk_mapping}, moduleIdToConsumeDataMapping: {module_to_consume_data_mapping}, initialConsumes: {initial_consumes_json} }};
 "#,
-      chunk_mapping = json_stringify(&chunk_to_module_mapping),
+      chunk_mapping = chunk_mapping,
       module_to_consume_data_mapping = module_id_to_consume_data_mapping,
-      initial_consumes = json_stringify(&initial_consumes),
+      initial_consumes_json = initial_consumes_json,
     );
     if self.enhanced {
       if ChunkGraph::get_chunk_runtime_requirements(compilation, &chunk_ukey)

packages/rspack/package.json

@@ -67,7 +67,7 @@
     "zod-validation-error": "3.5.3"
   },
   "dependencies": {
-    "@module-federation/runtime-tools": "0.18.0",
+    "@module-federation/runtime-tools": "0.0.0-fix-lazy-comile-20250930092757",
     "@rspack/binding": "workspace:*",
     "@rspack/lite-tapable": "1.0.1"
   },

packages/rspack/src/container/ModuleFederationPlugin.ts

@@ -1,5 +1,6 @@
 import type { Compiler } from "../Compiler";
 import type { ExternalsType } from "../config";
+import { RuntimeGlobals } from "../RuntimeGlobals";
 import { getExternalsTypeSchema } from "../schema/config";
 import { isValidate } from "../schema/validate";
 import type { ModuleFederationPluginV1Options } from "./ModuleFederationPluginV1";
@@ -40,6 +41,24 @@ export class ModuleFederationPlugin {
 			...this._options,
 			enhanced: true
 		}).apply(compiler);
+
+		// inject ensureChunkHandlers if enable lazy compilation
+		if (compiler.options.lazyCompilation && this._options.remotes) {
+			compiler.hooks.thisCompilation.tap(
+				"CoreModuleFederationPlugin",
+				compilation => {
+					compilation.hooks.additionalTreeRuntimeRequirements.tap(
+						"CoreModuleFederationPlugin",
+						(chunk, set) => {
+							if (chunk.hasRuntime()) {
+								set.add(RuntimeGlobals.ensureChunk);
+								set.add(RuntimeGlobals.ensureChunkHandlers);
+							}
+						}
+					);
+				}
+			);
+		}
 	}
 }
 

packages/rspack/src/runtime/moduleFederationDefaultRuntime.js

@@ -159,6 +159,11 @@ module.exports = function () {
 			"chunkMapping",
 			() => remotesLoadingChunkMapping
 		);
+		early(
+			__webpack_require__.federation.bundlerRuntimeOptions.remotes,
+			"remoteInfos",
+			() => __module_federation_remote_infos__
+		);
 		early(
 			__webpack_require__.federation.bundlerRuntimeOptions.remotes,
 			"idToExternalAndNameMapping",
@@ -207,6 +212,12 @@ module.exports = function () {
 			__webpack_require__.federation.attachShareScopeMap(__webpack_require__);
 		}
 
+		if (!__webpack_require__.f) {
+			__webpack_require__.f = {};
+		}
+		if (!__webpack_require__.f.remotes) {
+			__webpack_require__.f.remotes = function () {};
+		}
 		override(__webpack_require__.f, "remotes", (chunkId, promises) =>
 			__webpack_require__.federation.bundlerRuntime.remotes({
 				chunkId,
@@ -221,6 +232,9 @@ module.exports = function () {
 				webpackRequire: __webpack_require__
 			})
 		);
+		if (!__webpack_require__.f.consumes) {
+			__webpack_require__.f.consumes = function () {};
+		}
 		override(__webpack_require__.f, "consumes", (chunkId, promises) =>
 			__webpack_require__.federation.bundlerRuntime.consumes({
 				chunkId,

pnpm-lock.yaml

@@ -0,0 +1,19 @@
+import { expect, test } from "@/fixtures";
+
+test("should load remote and shared success", async ({ page }) => {
+	// Click the button that triggers dynamic import
+	await page.waitForSelector('button:has-text("Click me")');
+	await page.getByText("Click me").click();
+
+	// Wait for the component to appear with a more reliable wait
+	await page.waitForSelector('div:has-text("RemoteComponent")');
+
+	// Check that the component was loaded and displayed
+	const RemoteComponentCount = await page.getByText("RemoteComponent").count();
+	expect(RemoteComponentCount).toBe(1);
+
+
+	// Check that the shared component was loaded and displayed
+	const SharedReactCount = await page.getByText("SharedReact").count();
+	expect(SharedReactCount).toBe(1);
+});

tests/e2e/cases/lazy-compilation/module-federation/index.test.ts

@@ -0,0 +1,63 @@
+const { rspack } = require("@rspack/core");
+const path = require('path');
+const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");
+
+/** @type { import('@rspack/core').RspackOptions } */
+module.exports = {
+	context: __dirname,
+	entry: "./src/index.jsx",
+	mode: "development",
+	devtool:false,
+	resolve: {
+		extensions: ["...", ".jsx"]
+	},
+	module: {
+			rules: [
+			{
+				test: /\.(jsx?|tsx?)$/,
+				use: [
+					{
+						loader: "builtin:swc-loader",
+						options: {
+							jsc: {
+								parser: {
+									syntax: "typescript",
+									tsx: true
+								},
+								transform: {
+									react: {
+										runtime: "automatic",
+										development: true,
+										refresh: true,
+									}
+								},
+							},
+						}
+					},
+				]
+			}
+		]
+	},
+	plugins: [new rspack.HtmlRspackPlugin({ template: "./src/index.html" }), new rspack.container.ModuleFederationPlugin({
+		name:"host",
+		remotes: {
+			remote: "remote@http://localhost:5679/remoteEntry.js"
+		},
+		shared: {
+			react: {},
+			'react-dom': {}
+		},
+		runtimePlugins: [require.resolve('./runtimePlugin.js')]
+	}),
+		new ReactRefreshPlugin(),
+
+],
+	lazyCompilation:true,
+	devServer: {
+		hot: true,
+		port: 5678,
+		devMiddleware: {
+			writeToDisk: true
+		}
+	}
+};

tests/e2e/cases/lazy-compilation/module-federation/rspack.config.js

@@ -0,0 +1,15 @@
+module.exports = function () {
+	let component;
+  return {
+    name: 'proxy-remote',
+    async errorLoadRemote() {
+			if(!component){
+				component = document.createElement("div");
+				component.textContent = "RemoteComponent";
+				document.body.appendChild(component);
+			}
+
+			return ()=>component;
+    },
+  };
+}

tests/e2e/cases/lazy-compilation/module-federation/runtimePlugin.js

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+	<React.StrictMode>
+		<button type="button" onClick={() => {
+			import("./remote-entry.js");
+			import("./share-entry.js");
+		}}>
+			Click me
+		</button>
+	</React.StrictMode>
+);
+

tests/e2e/cases/lazy-compilation/module-federation/src/bootstrap.jsx

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>