fix: compressibility of modules while retaining portability (#20287)

dmichon-msft · web-flow · commit 03440e28a613 · 2026-01-12T19:12:31.000+03:00
diff --git a/.changeset/soft-tools-appear.md b/.changeset/soft-tools-appear.md
@@ -0,0 +1,5 @@
+---
+"webpack": patch
+---
+
+Fix compressibility of modules while retaining portability.
diff --git a/lib/asset/AssetModulesPlugin.js b/lib/asset/AssetModulesPlugin.js
@@ -12,7 +12,7 @@ const {
 	ASSET_MODULE_TYPE_RESOURCE,
 	ASSET_MODULE_TYPE_SOURCE
 } = require("../ModuleTypeConstants");
-const { compareModulesByIdOrIdentifier } = require("../util/comparators");
+const { compareModulesByFullName } = require("../util/comparators");
 const createSchemaValidation = require("../util/create-schema-validation");
 const memoize = require("../util/memoize");
 
@@ -202,7 +202,7 @@ class AssetModulesPlugin {
 					const modules = chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
 						ASSET_MODULE_TYPE,
-						compareModulesByIdOrIdentifier(chunkGraph)
+						compareModulesByFullName(compilation.compiler)
 					);
 					if (modules) {
 						for (const module of modules) {
diff --git a/lib/css/CssModulesPlugin.js b/lib/css/CssModulesPlugin.js
@@ -35,7 +35,7 @@ const CssImportDependency = require("../dependencies/CssImportDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const { compareModulesByIdOrIdentifier } = require("../util/comparators");
+const { compareModulesByFullName } = require("../util/comparators");
 const createSchemaValidation = require("../util/create-schema-validation");
 const createHash = require("../util/createHash");
 const { getUndoPath } = require("../util/identifier");
@@ -632,8 +632,8 @@ class CssModulesPlugin {
 			return modulesByChunkGroup[0].list.reverse();
 		}
 
-		const boundCompareModulesByIdOrIdentifier = compareModulesByIdOrIdentifier(
-			compilation.chunkGraph
+		const boundCompareModulesByFullName = compareModulesByFullName(
+			compilation.compiler
 		);
 
 		/**
@@ -646,10 +646,7 @@ class CssModulesPlugin {
 				return b.length === 0 ? 0 : 1;
 			}
 			if (b.length === 0) return -1;
-			return boundCompareModulesByIdOrIdentifier(
-				a[a.length - 1],
-				b[b.length - 1]
-			);
+			return boundCompareModulesByFullName(a[a.length - 1], b[b.length - 1]);
 		};
 
 		modulesByChunkGroup.sort(compareModuleLists);
@@ -732,7 +729,7 @@ class CssModulesPlugin {
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
 						CSS_IMPORT_TYPE,
-						compareModulesByIdOrIdentifier(chunkGraph)
+						compareModulesByFullName(compilation.compiler)
 					)
 				),
 				compilation
@@ -744,7 +741,7 @@ class CssModulesPlugin {
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
 						CSS_TYPE,
-						compareModulesByIdOrIdentifier(chunkGraph)
+						compareModulesByFullName(compilation.compiler)
 					)
 				),
 				compilation
diff --git a/lib/javascript/JavascriptModulesPlugin.js b/lib/javascript/JavascriptModulesPlugin.js
@@ -32,7 +32,7 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
 const { last, someInIterable } = require("../util/IterableHelpers");
 const StringXor = require("../util/StringXor");
-const { compareModulesByIdOrIdentifier } = require("../util/comparators");
+const { compareModulesByFullName } = require("../util/comparators");
 const {
 	RESERVED_NAMES,
 	addScopeSymbols,
@@ -747,11 +747,11 @@ class JavascriptModulesPlugin {
 	 * @returns {Source} the rendered source
 	 */
 	renderChunk(renderContext, hooks) {
-		const { chunk, chunkGraph } = renderContext;
+		const { chunk, chunkGraph, runtimeTemplate } = renderContext;
 		const modules = chunkGraph.getOrderedChunkModulesIterableBySourceType(
 			chunk,
 			JAVASCRIPT_TYPE,
-			compareModulesByIdOrIdentifier(chunkGraph)
+			compareModulesByFullName(runtimeTemplate.compilation.compiler)
 		);
 		const allModules = modules ? [...modules] : [];
 		let strictHeader;
@@ -838,7 +838,7 @@ class JavascriptModulesPlugin {
 			...(chunkGraph.getOrderedChunkModulesIterableBySourceType(
 				chunk,
 				JAVASCRIPT_TYPE,
-				compareModulesByIdOrIdentifier(chunkGraph)
+				compareModulesByFullName(runtimeTemplate.compilation.compiler)
 			) || [])
 		];
 
diff --git a/lib/util/comparators.js b/lib/util/comparators.js
@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { getFullModuleName } = require("../ids/IdHelpers");
 const { compareRuntime } = require("./runtime");
 
 /** @typedef {import("../Chunk")} Chunk */
@@ -13,6 +14,7 @@ const { compareRuntime } = require("./runtime");
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../ChunkGraph").ModuleId} ModuleId */
 /** @typedef {import("../ChunkGroup")} ChunkGroup */
+/** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Dependency").DependencyLocation} DependencyLocation */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../dependencies/HarmonyImportSideEffectDependency")} HarmonyImportSideEffectDependency */
@@ -316,6 +318,19 @@ const compareModulesByIdOrIdentifier = (chunkGraph, a, b) => {
 	return compareIds(a.identifier(), b.identifier());
 };
 
+/**
+ * Compare modules by their full name. This differs from comparing by identifier in that the values have been normalized to be relative to the compiler context.
+ * @param {{ context: string; root: object; }} compiler the compiler, used for context and cache
+ * @param {Module} a module
+ * @param {Module} b module
+ * @returns {-1 | 0 | 1} compare result
+ */
+const compareModulesByFullName = (compiler, a, b) => {
+	const aName = getFullModuleName(a, compiler.context, compiler.root);
+	const bName = getFullModuleName(b, compiler.context, compiler.root);
+	return compareIds(aName, bName);
+};
+
 /**
  * @param {ChunkGraph} chunkGraph the chunk graph
  * @param {Chunk} a chunk
@@ -590,6 +605,11 @@ module.exports.compareIterables = compareIterables;
 
 module.exports.compareLocations = compareLocations;
 
+/** @type {ParameterizedComparator<Compiler, Module>} */
+module.exports.compareModulesByFullName = createCachedParameterizedComparator(
+	compareModulesByFullName
+);
+
 /** @type {ParameterizedComparator<ChunkGraph, Module>} */
 module.exports.compareModulesById =
 	createCachedParameterizedComparator(compareModulesById);
diff --git a/lib/wasm-async/AsyncWebAssemblyModulesPlugin.js b/lib/wasm-async/AsyncWebAssemblyModulesPlugin.js
@@ -11,7 +11,7 @@ const Generator = require("../Generator");
 const { tryRunOrWebpackError } = require("../HookWebpackError");
 const { WEBASSEMBLY_MODULE_TYPE_ASYNC } = require("../ModuleTypeConstants");
 const WebAssemblyImportDependency = require("../dependencies/WebAssemblyImportDependency");
-const { compareModulesByIdOrIdentifier } = require("../util/comparators");
+const { compareModulesByFullName } = require("../util/comparators");
 const memoize = require("../util/memoize");
 
 /** @typedef {import("webpack-sources").Source} Source */
@@ -139,7 +139,7 @@ class AsyncWebAssemblyModulesPlugin {
 
 					for (const module of chunkGraph.getOrderedChunkModulesIterable(
 						chunk,
-						compareModulesByIdOrIdentifier(chunkGraph)
+						compareModulesByFullName(compiler)
 					)) {
 						if (module.type === WEBASSEMBLY_MODULE_TYPE_ASYNC) {
 							const filenameTemplate = outputOptions.webassemblyModuleFilename;
diff --git a/lib/wasm-sync/WebAssemblyModulesPlugin.js b/lib/wasm-sync/WebAssemblyModulesPlugin.js
@@ -13,7 +13,7 @@ const {
 const { WEBASSEMBLY_MODULE_TYPE_SYNC } = require("../ModuleTypeConstants");
 const WebAssemblyExportImportedDependency = require("../dependencies/WebAssemblyExportImportedDependency");
 const WebAssemblyImportDependency = require("../dependencies/WebAssemblyImportDependency");
-const { compareModulesByIdOrIdentifier } = require("../util/comparators");
+const { compareModulesByFullName } = require("../util/comparators");
 const memoize = require("../util/memoize");
 const WebAssemblyInInitialChunkError = require("./WebAssemblyInInitialChunkError");
 
@@ -89,7 +89,7 @@ class WebAssemblyModulesPlugin {
 
 					for (const module of chunkGraph.getOrderedChunkModulesIterable(
 						chunk,
-						compareModulesByIdOrIdentifier(chunkGraph)
+						compareModulesByFullName(compiler)
 					)) {
 						if (module.type === WEBASSEMBLY_MODULE_TYPE_SYNC) {
 							const filenameTemplate = outputOptions.webassemblyModuleFilename;
diff --git a/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap b/test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
@@ -58,16 +58,6 @@ export const __webpack_esm_id__ = \\"foo\\";
 export const __webpack_esm_ids__ = [\\"foo\\"];
 export const __webpack_esm_modules__ = {
 
-/***/ 125
-/*!***********************!*\\\\
-  !*** css ./style.css ***!
-  \\\\***********************/
-() {
-
-
-
-/***/ },
-
 /***/ 353
 /*!****************!*\\\\
   !*** ./foo.js ***!
@@ -88,6 +78,16 @@ it(\\"The dependOn chunk must be loaded before the common chunk.\\", async () =>
 });
 
 
+/***/ },
+
+/***/ 125
+/*!***********************!*\\\\
+  !*** css ./style.css ***!
+  \\\\***********************/
+() {
+
+
+
 /***/ }
 
 };
diff --git a/test/__snapshots__/ConfigTestCases.basictest.js.snap b/test/__snapshots__/ConfigTestCases.basictest.js.snap
@@ -58,16 +58,6 @@ export const __webpack_esm_id__ = \\"foo\\";
 export const __webpack_esm_ids__ = [\\"foo\\"];
 export const __webpack_esm_modules__ = {
 
-/***/ 125
-/*!***********************!*\\\\
-  !*** css ./style.css ***!
-  \\\\***********************/
-() {
-
-
-
-/***/ },
-
 /***/ 353
 /*!****************!*\\\\
   !*** ./foo.js ***!
@@ -88,6 +78,16 @@ it(\\"The dependOn chunk must be loaded before the common chunk.\\", async () =>
 });
 
 
+/***/ },
+
+/***/ 125
+/*!***********************!*\\\\
+  !*** css ./style.css ***!
+  \\\\***********************/
+() {
+
+
+
 /***/ }
 
 };
diff --git a/test/configCases/optimization/issue-19184/index.js b/test/configCases/optimization/issue-19184/index.js
@@ -1,10 +1,14 @@
-it("should have module ids defined in sorted order", function() {
+it("should have module ids defined in sorted order", function () {
+	const ids = [];
 	for (var i = 1; i <= 5; i++) {
-		var unusedModuleId = require("./files/file" + i + ".js");
+		var moduleId = require("./files/file" + i + ".js");
+		ids[i - 1] = moduleId;
 	}
 
-	const moduleIds = Object.keys(__webpack_modules__);
+	const expectedIds = new Set(ids);
 
-	const sortedIds = moduleIds.slice().sort();
-	expect(moduleIds).toEqual(sortedIds);
+	const moduleIds = Object.keys(__webpack_modules__).filter((id) =>
+		expectedIds.has(id)
+	);
+	expect(moduleIds).toEqual(ids);
 });
diff --git a/types.d.ts b/types.d.ts
@@ -19449,6 +19449,10 @@ declare namespace exports {
 				a: DependencyLocation,
 				b: DependencyLocation
 			) => 0 | 1 | -1;
+			export let compareModulesByFullName: ParameterizedComparator<
+				Compiler,
+				Module
+			>;
 			export let compareModulesById: ParameterizedComparator<
 				ChunkGraph,
 				Module

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"webpack": patch
 +---
++
 +Fix compressibility of modules while retaining portability.