webpack 5.108.4 → 5.109.0

package/lib/optimize/ModuleConcatenationPlugin.js

@@ -12,6 +12,9 @@ const Module = require("../Module");
 const ModuleGraph = require("../ModuleGraph");
 const { JAVASCRIPT_TYPE } = require("../ModuleSourceTypeConstants");
 const { STAGE_DEFAULT } = require("../OptimizationStages");
+const CommonJsSelfReferenceDependency = require("../dependencies/CommonJsSelfReferenceDependency");
+const HarmonyImportDependency = require("../dependencies/HarmonyImportDependency");
+const { ImportPhaseUtils } = require("../dependencies/ImportPhase");
 const { compareModulesByIdentifier } = require("../util/comparators");
 const {
 	filterRuntime,
@@ -26,6 +29,7 @@ const ConcatenatedModule = require("./ConcatenatedModule");
 /** @typedef {import("../Compilation")} Compilation */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
 /** @typedef {import("../RequestShortener")} RequestShortener */
 /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 
@@ -176,9 +180,16 @@ class ModuleConcatenationPlugin {
 					const relevantModules = [];
 					/** @type {Set<Module>} */
 					const possibleInners = new Set();
+					const concatenateModules =
+						compilation.options.optimization.concatenateModules;
 					const context = {
 						chunkGraph,
-						moduleGraph
+						moduleGraph,
+						// commonjs concatenation defaults to on; { commonjs: false } opts out
+						concatenateCommonJsModules:
+							typeof concatenateModules === "object"
+								? concatenateModules.commonjs !== false
+								: concatenateModules === true
 					};
 					const deferEnabled = compilation.options.experiments.deferImport;
 					logger.time("select relevant modules");
@@ -197,7 +208,6 @@ class ModuleConcatenationPlugin {
 							setBailoutReason(module, "Module is async");
 							continue;
 						}
-
 						// Must be in strict mode
 						if (!(/** @type {BuildInfo} */ (module.buildInfo).strict)) {
 							setBailoutReason(module, "Module is not in strict mode");
@@ -255,6 +265,16 @@ class ModuleConcatenationPlugin {
 							canBeRoot = false;
 						}
 
+						// A concatenated CommonJS module relies on the root's ESM export
+						// rendering, so it can only be an inner module
+						if (
+							module.type.startsWith("javascript/") &&
+							/** @type {BuildMeta} */
+							(module.buildMeta).exportsType !== "namespace"
+						) {
+							canBeRoot = false;
+						}
+
 						// Module must not be an entry point
 						if (chunkGraph.isEntryModule(module)) {
 							setInnerBailoutReason(module, "Module is an entry point");
@@ -561,6 +581,26 @@ class ModuleConcatenationPlugin {
 		});
 	}
 
+	/**
+	 * Checks whether the module `import defer`s a module already in the config.
+	 * @param {ModuleGraph} moduleGraph the module graph
+	 * @param {Module} module the candidate module
+	 * @param {ConcatConfiguration} config the concat configuration
+	 * @returns {boolean} true when a deferred import targets a module in the config
+	 */
+	_defersModuleIn(moduleGraph, module, config) {
+		for (const dep of module.dependencies) {
+			if (
+				dep instanceof HarmonyImportDependency &&
+				ImportPhaseUtils.isDefer(dep.phase)
+			) {
+				const target = moduleGraph.getModule(dep);
+				if (target && config.has(target)) return true;
+			}
+		}
+		return false;
+	}
+
 	/**
 	 * Returns the imported modules.
 	 * @param {Compilation} compilation the compilation
@@ -652,6 +692,26 @@ class ModuleConcatenationPlugin {
 			return module;
 		}
 
+		// A deferred import must stay a concatenation boundary: concatenating a
+		// module with a module it `import defer`s (a cycle) would erase the
+		// deferred namespace's lazy-evaluation and exotic-object semantics.
+		if (
+			compilation.options.experiments.deferImport &&
+			this._defersModuleIn(compilation.moduleGraph, module, config)
+		) {
+			/**
+			 * @param {RequestShortener} requestShortener request shortener
+			 * @returns {string} problem description
+			 */
+			const problem = (requestShortener) =>
+				`Module ${module.readableIdentifier(
+					requestShortener
+				)} imports a module in this configuration via import defer`;
+			statistics.incorrectDependency++;
+			failureCache.set(module, problem); // cache failures for performance
+			return problem;
+		}
+
 		// Module must be in the correct chunks
 		const missingChunks = config.rootChunks.filter(
 			(chunk) => !chunkGraph.isModuleInChunk(module, chunk)
@@ -792,7 +852,13 @@ class ModuleConcatenationPlugin {
 			const selected = connections.filter(
 				(connection) =>
 					!connection.dependency ||
-					!Dependency.canConcatenate(connection.dependency)
+					(!Dependency.canConcatenate(connection.dependency) &&
+						// exports self-references of a concatenated CommonJS module
+						// are rewritten in place, so they don't block concatenation
+						!(
+							originModule === module &&
+							connection.dependency instanceof CommonJsSelfReferenceDependency
+						))
 			);
 			if (selected.length > 0) {
 				nonHarmonyConnections.set(originModule, connections);

package/lib/optimize/SideEffectsFlagPlugin.js

@@ -13,7 +13,9 @@ const {
 } = require("../ModuleTypeConstants");
 const { STAGE_DEFAULT } = require("../OptimizationStages");
 const HarmonyExportImportedSpecifierDependency = require("../dependencies/HarmonyExportImportedSpecifierDependency");
+const HarmonyImportDependency = require("../dependencies/HarmonyImportDependency");
 const HarmonyImportSpecifierDependency = require("../dependencies/HarmonyImportSpecifierDependency");
+const { ImportPhaseUtils } = require("../dependencies/ImportPhase");
 const formatLocation = require("../util/formatLocation");
 const { CompilerHintNotationRegExp } = require("../util/magicComment");
 
@@ -48,6 +50,20 @@ const { CompilerHintNotationRegExp } = require("../util/magicComment");
 
 /** @typedef {Map<string, RegExp>} CacheItem */
 
+/**
+ * Whether a resolved re-export target is reached through an `import defer` edge.
+ * Such edges must not be collapsed by the side-effect-free barrel optimization:
+ * the source module has to keep being reached through the barrel's cached
+ * deferred namespace so deferred-namespace identity and evaluation semantics are
+ * preserved.
+ * @param {ModuleGraphConnection | undefined} connection the target connection
+ * @returns {boolean} true when the target connection is a deferred import
+ */
+const isDeferredTargetConnection = (connection) =>
+	connection !== undefined &&
+	connection.dependency instanceof HarmonyImportDependency &&
+	ImportPhaseUtils.isDefer(connection.dependency.phase);
+
 /** @type {WeakMap<Compiler, CacheItem>} */
 const globToRegexpCache = new WeakMap();
 
@@ -305,13 +321,14 @@ class SideEffectsFlagPlugin {
 								/** @type {BuildMeta} */
 								(parser.state.module.buildMeta).sideEffectFree = true;
 							} else {
-								const { loc, type } = sideEffectsStatement;
+								const type = sideEffectsStatement.type;
+								const loc = parser.getLocation(sideEffectsStatement);
 								moduleGraph
 									.getOptimizationBailout(parser.state.module)
 									.push(
 										() =>
 											`Statement (${type}) with side effects in source code at ${formatLocation(
-												/** @type {DependencyLocation} */ (loc)
+												loc
 											)}`
 									);
 							}
@@ -354,32 +371,34 @@ class SideEffectsFlagPlugin {
 						//  2. export function foo
 						//  3. export default function foo
 						// 	4. export default function / export default () => {} (anonymous)
-						parser.hooks.preStatement.tap(PLUGIN_NAME, (statement) => {
-							if (parser.scope.topLevelScope !== true) return;
-							if (statement.type !== "FunctionDeclaration") {
-								return;
-							}
-							const name = statement.id ? statement.id.name : "default";
-							if (
-								pureFunctionsFromOption &&
-								pureFunctionsFromOption.has(name)
-							) {
-								markPure(name);
-								return;
-							}
-							const commentsStart = parser.prevStatement
-								? /** @type {Range} */ (parser.prevStatement.range)[1]
-								: 0;
-							if (
-								hasNoSideEffectsNotation(
-									parser,
-									commentsStart,
-									/** @type {Range} */ (statement.range)[0]
-								)
-							) {
-								markPure(name);
-							}
-						});
+						parser.hooks.preStatementByType
+							.for("FunctionDeclaration")
+							.tap(PLUGIN_NAME, (statement) => {
+								if (parser.scope.topLevelScope !== true) return;
+								if (statement.type !== "FunctionDeclaration") {
+									return;
+								}
+								const name = statement.id ? statement.id.name : "default";
+								if (
+									pureFunctionsFromOption &&
+									pureFunctionsFromOption.has(name)
+								) {
+									markPure(name);
+									return;
+								}
+								const commentsStart = parser.prevStatement
+									? /** @type {Range} */ (parser.prevStatement.range)[1]
+									: 0;
+								if (
+									hasNoSideEffectsNotation(
+										parser,
+										commentsStart,
+										/** @type {Range} */ (statement.range)[0]
+									)
+								) {
+									markPure(name);
+								}
+							});
 
 						// Detect on variable declarations with function init
 						parser.hooks.preDeclarator.tap(PLUGIN_NAME, (decl, statement) => {
@@ -421,21 +440,23 @@ class SideEffectsFlagPlugin {
 						});
 
 						if (pureFunctionsFromOption) {
-							parser.hooks.blockPreStatement.tap(PLUGIN_NAME, (statement) => {
-								if (parser.scope.topLevelScope !== true) return;
-								if (
-									statement.type === "ExportDefaultDeclaration" &&
-									pureFunctionsFromOption.has("default")
-								) {
-									const decl = statement.declaration;
+							parser.hooks.blockPreStatementByType
+								.for("ExportDefaultDeclaration")
+								.tap(PLUGIN_NAME, (statement) => {
+									if (parser.scope.topLevelScope !== true) return;
 									if (
-										decl.type === "ArrowFunctionExpression" ||
-										decl.type === "FunctionExpression"
+										statement.type === "ExportDefaultDeclaration" &&
+										pureFunctionsFromOption.has("default")
 									) {
-										markPure("default");
+										const decl = statement.declaration;
+										if (
+											decl.type === "ArrowFunctionExpression" ||
+											decl.type === "FunctionExpression"
+										) {
+											markPure("default");
+										}
 									}
-								}
-							});
+								});
 						}
 
 						parser.hooks.isPure
@@ -500,6 +521,11 @@ class SideEffectsFlagPlugin {
 						/** @type {Set<Module>} */
 						const optimizedModules = new Set();
 
+						// Only defer builds must protect deferred re-export barrels;
+						// skip the per-target check entirely otherwise.
+						const deferEnabled =
+							compilation.options.experiments.deferImport === true;
+
 						// Re-export resolution is idempotent within a pass, so cache it
 						// per export info: a shared barrel imported by many modules
 						// resolves each name once instead of once per consumer.
@@ -581,13 +607,18 @@ class SideEffectsFlagPlugin {
 
 												exportInfo.moveTarget(
 													moduleGraph,
-													({ module }) =>
-														module.getSideEffectsConnectionState(
+													(candidate) =>
+														candidate.module.getSideEffectsConnectionState(
 															moduleGraph
 														) === false &&
+														// Keep a deferred re-export's barrel (see below).
+														(!deferEnabled ||
+															!isDeferredTargetConnection(
+																candidate.connection
+															)) &&
 														(Boolean(dep.name) ||
 															hasSingleStarReexport(
-																/** @type {Module} */ (module)
+																/** @type {Module} */ (candidate.module)
 															)),
 													({
 														module: newModule,
@@ -639,6 +670,18 @@ class SideEffectsFlagPlugin {
 											}
 											if (!target) continue;
 
+											// A deferred re-export must keep its side-effect-free
+											// barrel: collapsing it here would turn the cached
+											// deferred namespace (`.z`) into an eager import of the
+											// source module, breaking deferred-namespace identity
+											// and evaluation semantics.
+											if (
+												deferEnabled &&
+												isDeferredTargetConnection(target.connection)
+											) {
+												continue;
+											}
+
 											moduleGraph.updateModule(dep, target.module);
 											moduleGraph.updateParent(
 												dep,

package/lib/prefetch/ChunkPrefetchPreloadPlugin.js

@@ -66,6 +66,21 @@ class ChunkPrefetchPreloadPlugin {
 							new ChunkPreloadTriggerRuntimeModule(chunkMap.preload)
 						);
 					}
+					if (chunkMap.cssPreload) {
+						// CSS-only preload (`parser.javascript.dynamicImportCssPreload`):
+						// reuse `preloadChunk` — with no JS `preload` order the JS
+						// handler is never registered, so only the CSS `.s` handler
+						// fires (`<link rel="preload" as="style">`).
+						set.add(RuntimeGlobals.preloadChunk);
+						set.add(RuntimeGlobals.preloadChunkHandlers);
+						compilation.addRuntimeModule(
+							chunk,
+							new ChunkPreloadTriggerRuntimeModule(
+								chunkMap.cssPreload,
+								"cssPreload"
+							)
+						);
+					}
 				}
 			);
 			compilation.hooks.runtimeRequirementInTree

package/lib/prefetch/ChunkPreloadTriggerRuntimeModule.js

@@ -14,11 +14,14 @@ const Template = require("../Template");
 class ChunkPreloadTriggerRuntimeModule extends RuntimeModule {
 	/**
 	 * @param {ChunkChildIdsByOrdersMap} chunkMap map from chunk to chunks
+	 * @param {string=} handlerKey the `ensureChunkHandlers` key to install under (default `"preload"`); `"cssPreload"` preloads only the CSS handler so it stays CSS-only even when the build also registers a JS preload handler
 	 */
-	constructor(chunkMap) {
-		super("chunk preload trigger", RuntimeModule.STAGE_TRIGGER);
+	constructor(chunkMap, handlerKey = "preload") {
+		super(`chunk ${handlerKey} trigger`, RuntimeModule.STAGE_TRIGGER);
 		/** @type {ChunkChildIdsByOrdersMap} */
 		this.chunkMap = chunkMap;
+		/** @type {string} */
+		this.handlerKey = handlerKey;
 	}
 
 	/**
@@ -26,20 +29,28 @@ class ChunkPreloadTriggerRuntimeModule extends RuntimeModule {
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
-		const { chunkMap } = this;
+		const { chunkMap, handlerKey } = this;
 		const compilation = /** @type {Compilation} */ (this.compilation);
 		const { runtimeTemplate } = compilation;
-		const body = [
-			"var chunks = chunkToChildrenMap[chunkId];",
-			`Array.isArray(chunks) && chunks.map(${RuntimeGlobals.preloadChunk});`
-		];
+		// `cssPreload` calls only the CSS preload handler (`preloadChunkHandlers.s`)
+		// so it stays CSS-only regardless of a JS preload handler registered
+		// elsewhere; plain `preload` fans out to every handler via `preloadChunk`.
+		const body =
+			handlerKey === "cssPreload"
+				? [
+						`var handler = ${RuntimeGlobals.preloadChunkHandlers}.s;`,
+						"var chunks = chunkToChildrenMap[chunkId];",
+						"if (handler && Array.isArray(chunks)) chunks.forEach(handler);"
+					]
+				: [
+						"var chunks = chunkToChildrenMap[chunkId];",
+						`Array.isArray(chunks) && chunks.map(${RuntimeGlobals.preloadChunk});`
+					];
 		return Template.asString([
-			Template.asString([
-				`var chunkToChildrenMap = ${JSON.stringify(chunkMap, null, "\t")};`,
-				`${
-					RuntimeGlobals.ensureChunkHandlers
-				}.preload = ${runtimeTemplate.basicFunction("chunkId", body)};`
-			])
+			`var chunkToChildrenMap = ${JSON.stringify(chunkMap, null, "\t")};`,
+			`${
+				RuntimeGlobals.ensureChunkHandlers
+			}.${handlerKey} = ${runtimeTemplate.basicFunction("chunkId", body)};`
 		]);
 	}
 }