refactor: use length as id instead of module id for lazy compilation (#10855)

Author: JSerFeng

packages/rspack-test-tools/etc/test-tools.api.md

@@ -1646,6 +1646,7 @@ export type TTestConfig<T extends ECompilerType> = {
     modules?: Record<string, Object>;
     timeout?: number;
     concurrent?: boolean;
+    snapshotContent?(content: string): string;
     checkSteps?: boolean;
 };
 

packages/rspack-test-tools/src/processor/hot-step.ts

@@ -226,7 +226,12 @@ export class HotSnapshotProcessor<
 			}
 		}
 
-		const replaceContent = (str: string) => {
+		const replaceContent = (rawStr: string) => {
+			let str = rawStr;
+			const replaceContentConfig = context.getTestConfig().snapshotContent;
+			if (replaceContentConfig) {
+				str = replaceContentConfig(str);
+			}
 			return normalizePlaceholder(
 				Object.entries(hashes)
 					.reduce((str, [raw, replacement]) => {

packages/rspack-test-tools/src/processor/snapshot.ts

@@ -68,11 +68,16 @@ export class SnapshotProcessor<
 		const snapshotFileFilter =
 			this._snapshotOptions.snapshotFileFilter ||
 			((file: string) => file.endsWith(".js") && !file.includes("runtime.js"));
+
 		const fileContents = Object.entries(compilation.assets)
 			.filter(([file]) => snapshotFileFilter(file))
 			.map(([file, source]) => {
 				const tag = path.extname(file).slice(1) || "txt";
-				const content = this.serializeEachFile(source.source().toString());
+				let content = this.serializeEachFile(source.source().toString());
+				const testConfig = context.getTestConfig();
+				if (testConfig.snapshotContent) {
+					content = testConfig.snapshotContent(content);
+				}
 
 				return `\`\`\`${tag} title=${file}\n${content}\n\`\`\``;
 			});

packages/rspack-test-tools/src/type.ts

@@ -220,6 +220,7 @@ export type TTestConfig<T extends ECompilerType> = {
 	modules?: Record<string, Object>;
 	timeout?: number;
 	concurrent?: boolean;
+	snapshotContent?(content: string): string;
 
 	// Only valid for Hot tests
 	checkSteps?: boolean;

packages/rspack-test-tools/tests/hotCases/lazy-compilation/context/__snapshots__/web/1.snap.txt

@@ -10,7 +10,7 @@
 - Bundle: modules_module_js_lazy-compilation-proxy.chunk.CURRENT_HASH.js
 - Manifest: main.LAST_HASH.hot-update.json, size: 69
 - Update: main.LAST_HASH.hot-update.js, size: 582
-- Update: modules_demo_js_lazy-compilation-proxy.LAST_HASH.hot-update.js, size: 1590
+- Update: modules_demo_js_lazy-compilation-proxy.LAST_HASH.hot-update.js, size: 1430
 
 ## Manifest
 
@@ -79,7 +79,7 @@ self["webpackHotUpdate"]("modules_demo_js_lazy-compilation-proxy", {
   \*********************************************************************************************************************/
 (function (module, __unused_webpack_exports, __webpack_require__) {
 var client = __webpack_require__("../../../../../rspack/hot/lazy-compilation-web.js?http%3A%2F%2Flocalhost%3APORT%2Flazy-compilation-using-");
-var data = "<TEST_TOOLS_ROOT>/dist/helper/loaders/hot-update.js%3F%3FruleSet%5B1%5D.rules%5B0%5D.use%5B0%5D!<TEST_TOOLS_ROOT>/tests/hotCases/lazy-compilation/context/modules/demo.js"
+var data = __LAZY_ID__
         module.exports = __webpack_require__.e(/*! import() */ "modules_demo_js").then(__webpack_require__.bind(__webpack_require__, /*! ./modules/demo.js */ "./modules/demo.js"));
         if (module.hot) {
           module.hot.accept();

packages/rspack-test-tools/tests/hotCases/lazy-compilation/context/__snapshots__/web/2.snap.txt

@@ -11,7 +11,7 @@
 - Bundle: modules_module_js_lazy-compilation-proxy.chunk.CURRENT_HASH.js
 - Manifest: main.LAST_HASH.hot-update.json, size: 71
 - Update: main.LAST_HASH.hot-update.js, size: 582
-- Update: modules_module_js_lazy-compilation-proxy.LAST_HASH.hot-update.js, size: 1610
+- Update: modules_module_js_lazy-compilation-proxy.LAST_HASH.hot-update.js, size: 1448
 
 ## Manifest
 
@@ -80,7 +80,7 @@ self["webpackHotUpdate"]("modules_module_js_lazy-compilation-proxy", {
   \***********************************************************************************************************************/
 (function (module, __unused_webpack_exports, __webpack_require__) {
 var client = __webpack_require__("../../../../../rspack/hot/lazy-compilation-web.js?http%3A%2F%2Flocalhost%3APORT%2Flazy-compilation-using-");
-var data = "<TEST_TOOLS_ROOT>/dist/helper/loaders/hot-update.js%3F%3FruleSet%5B1%5D.rules%5B0%5D.use%5B0%5D!<TEST_TOOLS_ROOT>/tests/hotCases/lazy-compilation/context/modules/module.js"
+var data = __LAZY_ID__
         module.exports = __webpack_require__.e(/*! import() */ "modules_module_js").then(__webpack_require__.bind(__webpack_require__, /*! ./modules/module.js */ "./modules/module.js"));
         if (module.hot) {
           module.hot.accept();

packages/rspack-test-tools/tests/hotCases/lazy-compilation/context/test.config.js

@@ -1,4 +1,12 @@
+const RE = /var data = "\d*"/g;
+
 module.exports = {
 	documentType: "fake",
-	checkSteps: false
+	checkSteps: false,
+	snapshotContent(
+		/**@type {string} */
+		content
+	) {
+		return content.replaceAll(RE, "var data = __LAZY_ID__");
+	}
 };

packages/rspack-test-tools/tests/hotCases/lazy-compilation/module-test/__snapshots__/web/1.snap.txt

@@ -10,7 +10,7 @@
 - Bundle: moduleB_js.chunk.CURRENT_HASH.js
 - Manifest: main.LAST_HASH.hot-update.json, size: 64
 - Update: main.LAST_HASH.hot-update.js, size: 182
-- Update: moduleA_js_lazy-compilation-proxy.LAST_HASH.hot-update.js, size: 1559
+- Update: moduleA_js_lazy-compilation-proxy.LAST_HASH.hot-update.js, size: 1392
 
 ## Manifest
 
@@ -64,7 +64,7 @@ self["webpackHotUpdate"]("moduleA_js_lazy-compilation-proxy", {
   \*********************************************************************************************************************/
 (function (module, __unused_webpack_exports, __webpack_require__) {
 var client = __webpack_require__("../../../../../rspack/hot/lazy-compilation-web.js?http%3A%2F%2Flocalhost%3APORT%2Flazy-compilation-using-");
-var data = "<TEST_TOOLS_ROOT>/dist/helper/loaders/hot-update.js%3F%3FruleSet%5B1%5D.rules%5B0%5D.use%5B0%5D!<TEST_TOOLS_ROOT>/tests/hotCases/lazy-compilation/module-test/moduleA.js"
+var data = "0"
         module.exports = __webpack_require__.e(/*! import() */ "moduleA_js").then(__webpack_require__.bind(__webpack_require__, /*! ./moduleA.js */ "./moduleA.js"));
         if (module.hot) {
           module.hot.accept();

packages/rspack/src/builtin-plugin/lazy-compilation/middleware.ts

@@ -56,18 +56,28 @@ export const lazyCompilationMiddleware = (
 			options.prefix = `${prefix}__${i++}`;
 			const activeModules = new Map<string, boolean>();
 			const filesByKey = new Map<string, string>();
+			const indexToModule = new Map();
+			const moduleToIndex = new Map();
 
 			middlewareByCompiler.set(
 				options.prefix,
 				lazyCompilationMiddlewareInternal(
 					compiler,
+					indexToModule,
 					activeModules,
 					filesByKey,
 					options.prefix
 				)
 			);
 
-			applyPlugin(c, options, activeModules, filesByKey);
+			applyPlugin(
+				c,
+				moduleToIndex,
+				indexToModule,
+				options,
+				activeModules,
+				filesByKey
+			);
 		}
 
 		const keys = [...middlewareByCompiler.keys()];
@@ -89,15 +99,25 @@ export const lazyCompilationMiddleware = (
 
 	const activeModules: Map<string, boolean> = new Map();
 	const filesByKey: Map<string, string> = new Map();
+	const indexToMap = new Map();
+	const moduleToIndex = new Map();
 
 	const options = {
 		...compiler.options.experiments.lazyCompilation
 	};
-	applyPlugin(compiler, options, activeModules, filesByKey);
+	applyPlugin(
+		compiler,
+		moduleToIndex,
+		indexToMap,
+		options,
+		activeModules,
+		filesByKey
+	);
 
 	const lazyCompilationPrefix = options.prefix || LAZY_COMPILATION_PREFIX;
 	return lazyCompilationMiddlewareInternal(
 		compiler,
+		indexToMap,
 		activeModules,
 		filesByKey,
 		lazyCompilationPrefix
@@ -106,24 +126,26 @@ export const lazyCompilationMiddleware = (
 
 function applyPlugin(
 	compiler: Compiler,
+	moduleToIndex: Map<string, string>,
+	indexToModule: Map<string, string>,
 	options: LazyCompilationOptions,
 	activeModules: Map<string, boolean>,
 	filesByKey: Map<string, string>
 ) {
 	const plugin = new BuiltinLazyCompilationPlugin(
 		({ module, path }) => {
-			const key = encodeURIComponent(
-				module.replace(/\\/g, "/").replace(/@/g, "_")
-			)
-				// module identifier may contain query, bang(!) or split(|),
-				// should do our best to ensure it's the same with which comes
-				// from server url
-				.replace(/%(2F|3A|24|26|2B|2C|3B|3D)/g, decodeURIComponent);
+			let index = moduleToIndex.get(module);
+			if (index === undefined) {
+				index = moduleToIndex.size.toString();
+				moduleToIndex.set(module, index);
+				indexToModule.set(index, module);
+			}
+			const key = indexToModule.get(index)!;
 			filesByKey.set(key, path);
 			const active = activeModules.get(key) === true;
 			return {
 				client: `${options.client || getDefaultClient(compiler)}?${encodeURIComponent(getFullServerUrl(options))}`,
-				data: key,
+				data: index,
 				active
 			};
 		},
@@ -139,6 +161,7 @@ function applyPlugin(
 // used for reuse code, do not export this
 const lazyCompilationMiddlewareInternal = (
 	compiler: Compiler | MultiCompiler,
+	indexToModule: Map<string, string>,
 	activeModules: Map<string, boolean>,
 	filesByKey: Map<string, string>,
 	lazyCompilationPrefix: string
@@ -151,15 +174,16 @@ const lazyCompilationMiddlewareInternal = (
 			return next?.();
 		}
 
-		const keys = req.url.slice(lazyCompilationPrefix.length).split("@");
+		const indices = req.url.slice(lazyCompilationPrefix.length).split("@");
 		req.socket.setNoDelay(true);
 
 		res.setHeader("content-type", "text/event-stream");
 		res.writeHead(200);
 		res.write("\n");
 
 		const moduleActivated = [];
-		for (const key of keys) {
+		for (const index of indices) {
+			const key = indexToModule.get(index)!;
 			const oldValue = activeModules.get(key) ?? false;
 			activeModules.set(key, true);
 			if (!oldValue) {