webpack 5.108.2 → 5.108.4

package/lib/Compilation.js

@@ -1394,10 +1394,7 @@ BREAKING CHANGE: Asset processing hooks in Compilation has been merged into a si
 		this._unsafeCachePredicate =
 			typeof unsafeCache === "function" ? unsafeCache : () => true;
 
-		/**
-		 * @private
-		 * @type {LazyBarrelController}
-		 */
+		/** @type {LazyBarrelController} */
 		this._lazyBarrelController = new LazyBarrelController(this);
 	}
 

package/lib/FlagDependencyExportsPlugin.js

@@ -7,6 +7,7 @@
 
 const asyncLib = require("neo-async");
 const Queue = require("./util/Queue");
+const createHash = require("./util/createHash");
 
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./DependenciesBlock")} DependenciesBlock */
@@ -16,12 +17,32 @@ const Queue = require("./util/Queue");
 /** @typedef {import("./ExportsInfo")} ExportsInfo */
 /** @typedef {import("./ExportsInfo").ExportInfoName} ExportInfoName */
 /** @typedef {import("./ExportsInfo").RestoreProvidedData} RestoreProvidedData */
+/** @typedef {import("../declarations/WebpackOptions").HashFunction} HashFunction */
+/** @typedef {import("./LazyBarrel")} LazyBarrelController */
 /** @typedef {import("./Module")} Module */
 /** @typedef {import("./Module").BuildInfo} BuildInfo */
 
 const PLUGIN_NAME = "FlagDependencyExportsPlugin";
 const PLUGIN_LOGGER_NAME = `webpack.${PLUGIN_NAME}`;
 
+/** @typedef {{ etag: string, data: RestoreProvidedData }} MemCacheEntry */
+
+/**
+ * @param {Module} module the module
+ * @param {LazyBarrelController} lazyBarrelController the compilation's lazy barrel controller
+ * @param {HashFunction} hashFunction hash function for long keys
+ * @returns {string} the hash
+ */
+const getLazyRequestsHash = (module, lazyBarrelController, hashFunction) => {
+	const lazyKeys = lazyBarrelController.getLazyRequests(module);
+	if (!lazyKeys) return "";
+	const joined = [...lazyKeys].join("|");
+	if (joined.length < 100) return joined;
+	const hash = createHash(hashFunction);
+	hash.update(joined);
+	return /** @type {string} */ (hash.digest("hex"));
+};
+
 class FlagDependencyExportsPlugin {
 	/**
 	 * Applies the plugin by registering its hooks on the compiler.
@@ -32,6 +53,8 @@ class FlagDependencyExportsPlugin {
 		compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
 			const moduleGraph = compilation.moduleGraph;
 			const cache = compilation.getCache(PLUGIN_NAME);
+			const lazyBarrelController = compilation._lazyBarrelController;
+			const hashFunction = compilation.outputOptions.hashFunction;
 			compilation.hooks.finishModules.tapAsync(
 				PLUGIN_NAME,
 				(modules, callback) => {
@@ -80,16 +103,28 @@ class FlagDependencyExportsPlugin {
 								return callback();
 							}
 							const memCache = moduleMemCaches && moduleMemCaches.get(module);
-							const memCacheValue = memCache && memCache.get(this);
-							if (memCacheValue !== undefined) {
+							/** @type {MemCacheEntry | undefined} */
+							const memCacheEntry = memCache && memCache.get(this);
+							const hash = getLazyRequestsHash(
+								module,
+								lazyBarrelController,
+								hashFunction
+							);
+							// validated by the still-lazy request keys: reference-change
+							// detection cannot invalidate the mem cache when the un-lazied
+							// connections are unsafe-cached (they are skipped when comparing
+							// references)
+							if (memCacheEntry !== undefined && memCacheEntry.etag === hash) {
 								statRestoredFromMemCache++;
-								exportsInfo.restoreProvided(memCacheValue);
+								exportsInfo.restoreProvided(memCacheEntry.data);
 								return callback();
 							}
+							const buildHash = /** @type {string} */ (
+								/** @type {BuildInfo} */ (module.buildInfo).hash
+							);
 							cache.get(
 								module.identifier(),
-								/** @type {BuildInfo} */
-								(module.buildInfo).hash,
+								hash ? `${buildHash}|${hash}` : buildHash,
 								(err, result) => {
 									if (err) return callback(err);
 
@@ -421,13 +456,25 @@ class FlagDependencyExportsPlugin {
 										.getRestoreProvidedData();
 									const memCache =
 										moduleMemCaches && moduleMemCaches.get(module);
+									const hash = getLazyRequestsHash(
+										module,
+										lazyBarrelController,
+										hashFunction
+									);
 									if (memCache) {
-										memCache.set(this, cachedData);
+										/** @type {MemCacheEntry} */
+										const entry = {
+											etag: hash,
+											data: cachedData
+										};
+										memCache.set(this, entry);
 									}
+									const buildHash = /** @type {string} */ (
+										/** @type {BuildInfo} */ (module.buildInfo).hash
+									);
 									cache.store(
 										module.identifier(),
-										/** @type {BuildInfo} */
-										(module.buildInfo).hash,
+										hash ? `${buildHash}|${hash}` : buildHash,
 										cachedData,
 										callback
 									);

package/lib/LazyBarrel.js

@@ -68,7 +68,7 @@ class LazyBarrelInfo {
 		this._requestToDepGroup = new Map();
 		/** @type {Set<string> | undefined} locally provided export names */
 		this._terminalIds = undefined;
-		/** @type {Set<string> | undefined} request keys of star re-exports */
+		/** @type {Set<string> | undefined} requests of star re-exports */
 		this._fallbackRequests = undefined;
 	}
 
@@ -125,6 +125,14 @@ class LazyBarrelInfo {
 		return this._requestToDepGroup.size === 0;
 	}
 
+	/**
+	 * Returns the requests of the still-lazy groups.
+	 * @returns {Iterable<string>} still-lazy requests
+	 */
+	getLazyRequests() {
+		return this._requestToDepGroup.keys();
+	}
+
 	/**
 	 * Drops the export-name lookups once no group stays deferred; they only serve
 	 * to find still-deferred groups, so keeping them per module wastes memory.
@@ -202,13 +210,32 @@ class LazyBarrelController {
 	}
 
 	/**
-	 * Releases all per-module deferral state. Lazy barrel only acts while the
-	 * module graph is built, so the bookkeeping is dead weight once make is done.
+	 * Releases all per-module deferral state. The last consumer is
+	 * `FlagDependencyExportsPlugin`'s cache key during `finishModules`, so the
+	 * bookkeeping is dead weight once sealing starts.
 	 */
 	clear() {
 		this._modules = new WeakMap();
 	}
 
+	/**
+	 * requests of the re-export targets `module` still keeps lazy.
+	 * `FlagDependencyExportsPlugin` folds them into its provided-exports cache
+	 * key, so a barrel whose built targets differ from a cached run does not
+	 * reuse that run's stale exports.
+	 * @param {Module} module the module
+	 * @returns {Iterable<string> | undefined} still-lazy requests, if any
+	 */
+	getLazyRequests(module) {
+		const factoryMeta = module.factoryMeta;
+		if (factoryMeta === undefined || !factoryMeta.sideEffectFree) return;
+		const state = this._modules.get(module);
+		if (state === undefined) return;
+		const info = state.lazyBarrelInfo;
+		if (info === undefined || info.isEmpty()) return;
+		return info.getLazyRequests();
+	}
+
 	/**
 	 * Classifies the re-export dependencies of a side-effect-free module (lazy barrel)
 	 * into deferrable groups and marks the deferred ones.

package/lib/NormalModule.js

@@ -254,12 +254,10 @@ const walkSideEffectsIterative = (rootMod, moduleGraph, ctx) => {
 							state = false;
 						} else if (refModule.factoryMeta.sideEffectFree === false) {
 							state = true;
-						} else if (
-							!(
-								refModule.buildMeta !== undefined &&
-								refModule.buildMeta.sideEffectFree
-							)
-						) {
+						} else if (!(
+							refModule.buildMeta !== undefined &&
+							refModule.buildMeta.sideEffectFree
+						)) {
 							state = true;
 						} else if (refModule._isEvaluatingSideEffects) {
 							ctx.circular = true;
@@ -276,12 +274,10 @@ const walkSideEffectsIterative = (rootMod, moduleGraph, ctx) => {
 							descended = true;
 							break;
 						}
-					} else if (
-						!(
-							refModule.buildMeta !== undefined &&
-							refModule.buildMeta.sideEffectFree
-						)
-					) {
+					} else if (!(
+						refModule.buildMeta !== undefined &&
+						refModule.buildMeta.sideEffectFree
+					)) {
 						state = true;
 					} else if (refModule._isEvaluatingSideEffects) {
 						ctx.circular = true;

package/lib/config/defaults.js

@@ -1729,9 +1729,9 @@ const applyOutputDefaults = (
 		if (tp) {
 			if (tp.global) return "global";
 			if (tp.globalThis) return "globalThis";
-			// For universal target (i.e. code can be run in browser/node/worker etc.)
-			// `tp.module` is unset for a version-less universal target, so key off ESM output
-			if (tp.web === null && tp.node === null && output.module) {
+			// Universal target (web + node) with no reported accessor: `globalThis`
+			// is the only one defined everywhere (`null` = mixed support → `self`).
+			if (tp.web === null && tp.node === null && tp.globalThis === undefined) {
 				return "globalThis";
 			}
 		}

package/lib/css/CssGenerator.js

@@ -48,7 +48,8 @@ const CSS_TYPE_PREFIX = `${CSS_TYPE}/`;
 /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
 /** @typedef {import("../Dependency")} Dependency */
 /** @typedef {import("../DependencyTemplate").CssData} CssData */
-/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} CssDependencyTemplateContext */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
@@ -191,28 +192,39 @@ class CssGenerator extends Generator {
 
 	/**
 	 * Processes the provided module.
-	 * @param {NormalModule} module the current module
 	 * @param {Dependency} dependency the dependency to generate
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
 	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext & { cssData: CssData }} generateContext the render context
+	 * @param {DependencyTemplateContext & { cssData: CssData, type: string }} templateContext the template context (shared across all dependencies of the module)
 	 * @returns {void}
 	 */
-	sourceDependency(module, dependency, initFragments, source, generateContext) {
+	sourceDependency(dependency, source, templateContext) {
 		const constructor =
 			/** @type {DependencyConstructor} */
 			(dependency.constructor);
-		const template = generateContext.dependencyTemplates.get(constructor);
+		const template = templateContext.dependencyTemplates.get(constructor);
 		if (!template) {
 			throw new Error(
 				`No template for dependency: ${dependency.constructor.name}`
 			);
 		}
 
-		/** @type {DependencyTemplateContext} */
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * Processes the provided module.
+	 * @param {NormalModule} module the module to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
+	 * @returns {void}
+	 */
+	sourceModule(module, initFragments, source, generateContext) {
+		// Only `dependency` varies across `template.apply` calls, so one context
+		// (and one lazy `chunkInitFragments` getter) serves the whole module.
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
-		/** @type {DependencyTemplateContext} */
+		/** @type {CssDependencyTemplateContext} */
 		const templateContext = {
 			runtimeTemplate: generateContext.runtimeTemplate,
 			dependencyTemplates: generateContext.dependencyTemplates,
@@ -244,37 +256,13 @@ class CssGenerator extends Generator {
 			}
 		};
 
-		template.apply(dependency, source, templateContext);
-	}
-
-	/**
-	 * Processes the provided module.
-	 * @param {NormalModule} module the module to generate
-	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
-	 * @param {ReplaceSource} source the current replace source which can be modified
-	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
-	 * @returns {void}
-	 */
-	sourceModule(module, initFragments, source, generateContext) {
 		for (const dependency of module.dependencies) {
-			this.sourceDependency(
-				module,
-				dependency,
-				initFragments,
-				source,
-				generateContext
-			);
+			this.sourceDependency(dependency, source, templateContext);
 		}
 
 		if (module.presentationalDependencies !== undefined) {
 			for (const dependency of module.presentationalDependencies) {
-				this.sourceDependency(
-					module,
-					dependency,
-					initFragments,
-					source,
-					generateContext
-				);
+				this.sourceDependency(dependency, source, templateContext);
 			}
 		}
 	}
@@ -623,10 +611,13 @@ class CssGenerator extends Generator {
 
 		let hasJs = false;
 		let hasCssText = false;
+		// Uncached per call (#20800) — the common link case stops scanning once
+		// js is seen; `hasCssText` only matters for exports-only / non-link.
+		const needsCssText = this._exportsOnly || exportType !== "link";
 		const connections = this._moduleGraph.getIncomingConnections(module);
 
 		for (const connection of connections) {
-			if (hasJs && hasCssText) break;
+			if (hasJs && (hasCssText || !needsCssText)) break;
 			if (
 				exportType === "link" &&
 				connection.dependency instanceof CssImportDependency
@@ -704,15 +695,15 @@ class CssGenerator extends Generator {
 					}
 					return 0;
 				}
-				const exports = cssData.exports;
-				/** @type {Record<string, string>} */
-				const exportsObj = {};
-				for (const [key, value] of exports) {
-					exportsObj[key] = value;
+				// `JSON.stringify({...exports}).length` computed entry-wise, without
+				// materializing the object or the full string.
+				let length = 2 + (cssData.exports.size - 1);
+				for (const [key, value] of cssData.exports) {
+					length +=
+						JSON.stringify(key).length + 1 + JSON.stringify(value).length;
 				}
-				const stringifiedExports = JSON.stringify(exportsObj);
 
-				return stringifiedExports.length + 42;
+				return length + 42;
 			}
 			case CSS_TEXT_TYPE:
 			case CSS_TYPE: {

package/lib/css/CssModulesPlugin.js

@@ -133,6 +133,42 @@ const getCssInjectStyleRuntimeModule = memoize(() =>
  */
 const publicPathPlaceholderPlans = new WeakMap();
 
+/**
+ * Memoized inheritance chain per module, revalidated against its source
+ * fields — `updateCacheModule` reassigns them on watch rebuilds.
+ * @type {WeakMap<CssModule, { cssLayer: CssModule["cssLayer"], supports: CssModule["supports"], media: CssModule["media"], inheritance: CssModule["inheritance"], chain: Inheritance }>}
+ */
+const moduleInheritanceCache = new WeakMap();
+
+/**
+ * Gets the memoized inheritance chain of a css module.
+ * @param {CssModule} module css module
+ * @returns {Inheritance} inheritance chain including the module's own entry
+ */
+const getModuleInheritance = (module) => {
+	const entry = moduleInheritanceCache.get(module);
+	if (
+		entry !== undefined &&
+		entry.cssLayer === module.cssLayer &&
+		entry.supports === module.supports &&
+		entry.media === module.media &&
+		entry.inheritance === module.inheritance
+	) {
+		return entry.chain;
+	}
+	/** @type {Inheritance} */
+	const chain = [[module.cssLayer, module.supports, module.media]];
+	if (module.inheritance) chain.push(...module.inheritance);
+	moduleInheritanceCache.set(module, {
+		cssLayer: module.cssLayer,
+		supports: module.supports,
+		media: module.media,
+		inheritance: module.inheritance,
+		chain
+	});
+	return chain;
+};
+
 /**
  * Locate the public-path placeholders in a materialized module source.
  * @param {string} content materialized module source
@@ -857,55 +893,55 @@ class CssModulesPlugin {
 			return this.getModulesInOrder(chunk, modules, compilation);
 		};
 
-		return /** @type {CssModule[]} */ ([
-			...orderModules(
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					CSS_IMPORT_TYPE,
-					compareModulesByFullName(compilation.compiler)
-				)
-			),
-			...orderModules(
-				chunkGraph.getOrderedChunkModulesIterableBySourceType(
-					chunk,
-					CSS_TYPE,
-					compareModulesByFullName(compilation.compiler)
-				)
-			).map((module) => {
+		const comparator = compareModulesByFullName(compilation.compiler);
+		const importModules = orderModules(
+			chunkGraph.getOrderedChunkModulesIterableBySourceType(
+				chunk,
+				CSS_IMPORT_TYPE,
+				comparator
+			)
+		);
+		const cssModules = orderModules(
+			chunkGraph.getOrderedChunkModulesIterableBySourceType(
+				chunk,
+				CSS_TYPE,
+				comparator
+			)
+		);
+		for (const module of cssModules) {
+			if (
+				typeof (
+					/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
+				) !== "undefined"
+			) {
 				if (
-					typeof (
+					typeof charset !== "undefined" &&
+					charset !==
 						/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
-					) !== "undefined"
 				) {
-					if (
-						typeof charset !== "undefined" &&
-						charset !==
+					const err = new WebpackError(
+						`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
+							compilation.requestShortener
+						)} (in chunk ${chunk.name || chunk.id}) specifies "${
 							/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
-					) {
-						const err = new WebpackError(
-							`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
-								compilation.requestShortener
-							)} (in chunk ${chunk.name || chunk.id}) specifies "${
-								/** @type {CssModuleBuildInfo} */ (module.buildInfo).charset
-							}", but "${charset}" was expected, all modules must use the same character set`
-						);
+						}", but "${charset}" was expected, all modules must use the same character set`
+					);
 
-						err.chunk = chunk;
-						err.module = module;
-						err.hideStack = true;
+					err.chunk = chunk;
+					err.module = module;
+					err.hideStack = true;
 
-						compilation.warnings.push(err);
-					}
+					compilation.warnings.push(err);
+				}
 
-					if (typeof charset === "undefined") {
-						charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
-							.charset;
-					}
+				if (typeof charset === "undefined") {
+					charset = /** @type {CssModuleBuildInfo} */ (module.buildInfo)
+						.charset;
 				}
+			}
+		}
 
-				return module;
-			})
-		]);
+		return /** @type {CssModule[]} */ ([...importModules, ...cssModules]);
 	}
 
 	/**
@@ -920,11 +956,7 @@ class CssModulesPlugin {
 			renderContext;
 		const cacheEntry = moduleFactoryCache.get(moduleSourceContent);
 
-		/** @type {Inheritance} */
-		const inheritance = [[module.cssLayer, module.supports, module.media]];
-		if (module.inheritance) {
-			inheritance.push(...module.inheritance);
-		}
+		const inheritance = getModuleInheritance(module);
 
 		/** @type {CachedSource} */
 		let source;
@@ -932,14 +964,8 @@ class CssModulesPlugin {
 			cacheEntry &&
 			cacheEntry.undoPath === undoPath &&
 			cacheEntry.hash === hash &&
-			cacheEntry.inheritance.length === inheritance.length &&
-			cacheEntry.inheritance.every(([layer, supports, media], i) => {
-				const item = inheritance[i];
-				if (Array.isArray(item)) {
-					return layer === item[0] && supports === item[1] && media === item[2];
-				}
-				return false;
-			})
+			// Memoized per module, so identity implies equal entries.
+			cacheEntry.inheritance === inheritance
 		) {
 			source = cacheEntry.source;
 		} else {