@depup/webpack 5.109.2-depup.0 → 5.110.1-depup.0

package/lib/performance/RedundantDynamicImportsPlugin.js

@@ -0,0 +1,225 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Alexander Akait @alexander-akait
+*/
+
+"use strict";
+
+const AsyncDependenciesBlock = require("../AsyncDependenciesBlock");
+const Entrypoint = require("../Entrypoint");
+const RedundantDynamicImportWarning = require("../errors/RedundantDynamicImportWarning");
+const { compareStrings } = require("../util/comparators");
+const formatLocation = require("../util/formatLocation");
+
+/** @import { PerformanceOptions } from "../../declarations/WebpackOptions" */
+/** @import Chunk from "../Chunk" */
+/** @import ChunkGroup from "../ChunkGroup" */
+/** @import Compiler from "../Compiler" */
+/** @import DependenciesBlock from "../DependenciesBlock" */
+/** @import Module from "../Module" */
+
+const PLUGIN_NAME = "RedundantDynamicImportsPlugin";
+
+// Enough to name the offenders without printing every call site.
+const MAX_REPORTED_IMPORTS = 5;
+
+class RedundantDynamicImportsPlugin {
+	/**
+	 * Creates an instance of RedundantDynamicImportsPlugin.
+	 * @param {PerformanceOptions} options the plugin options
+	 */
+	constructor(options) {
+		/** @type {PerformanceOptions["hints"]} */
+		this.hints = options.hints;
+	}
+
+	/**
+	 * Applies the plugin by registering its hooks on the compiler.
+	 * @param {Compiler} compiler the compiler instance
+	 * @returns {void}
+	 */
+	apply(compiler) {
+		const hints = this.hints;
+
+		if (!hints) return;
+
+		compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+			compilation.hooks.afterSeal.tap(PLUGIN_NAME, () => {
+				const { chunkGraph, moduleGraph, requestShortener } = compilation;
+				/** @type {string[]} */
+				const descriptions = [];
+
+				/**
+				 * The chunks certain to be loaded when `chunk` runs: itself, plus what
+				 * every entrypoint able to reach it brings. Entrypoints are alternative
+				 * load paths, so they are intersected — one that carries the target says
+				 * nothing about a page that loads another. A shared runtime name is not
+				 * enough either: with `runtimeChunk: "single"` two entrypoints share one
+				 * runtime while neither loads the other's initial chunks.
+				 * @param {Chunk} chunk the chunk the importer runs in
+				 * @returns {Set<Chunk>} the chunks loaded before it runs
+				 */
+				const computeLoadedChunks = (chunk) => {
+					const chunks = new Set([chunk]);
+					/** @type {Set<ChunkGroup>} */
+					const entrypoints = new Set();
+					/** @type {Set<ChunkGroup>} */
+					const queue = new Set(chunk.groupsIterable);
+
+					for (const group of queue) {
+						// An entrypoint is a load path in itself and carries nothing of
+						// what reaches it: an async one — a worker — starts from its own
+						// chunks, however much the module spawning it had loaded.
+						if (group.isInitial() || group instanceof Entrypoint) {
+							entrypoints.add(group);
+							continue;
+						}
+
+						// Only initial chunks are certain: an async ancestor is loaded on
+						// the path taken, and a group can be reached by several.
+						for (const parent of group.getParents()) queue.add(parent);
+					}
+
+					if (entrypoints.size === 0) return chunks;
+
+					/** @type {Set<Chunk> | undefined} */
+					let common;
+
+					for (const entrypoint of entrypoints) {
+						/** @type {Set<Chunk>} */
+						const loaded = new Set();
+						/** @type {Set<ChunkGroup>} */
+						const chain = new Set([entrypoint]);
+
+						// An entrypoint reached through `dependOn` is loaded first too, so
+						// within one path they add up rather than cancel each other out.
+						for (const group of chain) {
+							for (const member of group.chunks) loaded.add(member);
+							for (const parent of group.getParents()) chain.add(parent);
+						}
+
+						if (common === undefined) {
+							common = loaded;
+							continue;
+						}
+
+						for (const member of common) {
+							if (!loaded.has(member)) common.delete(member);
+						}
+					}
+
+					for (const member of /** @type {Set<Chunk>} */ (common)) {
+						chunks.add(member);
+					}
+
+					return chunks;
+				};
+
+				// The answer depends on the chunk alone, and every module sharing one
+				// asks the same question. Dropped with the hook it is built in.
+				/** @type {Map<Chunk, Set<Chunk>>} */
+				const loadedChunks = new Map();
+
+				/**
+				 * @param {Chunk} chunk the chunk the importer runs in
+				 * @returns {Set<Chunk>} the chunks loaded before it runs
+				 */
+				const getLoadedChunks = (chunk) => {
+					let loaded = loadedChunks.get(chunk);
+
+					if (loaded === undefined) {
+						loaded = computeLoadedChunks(chunk);
+						loadedChunks.set(chunk, loaded);
+					}
+
+					return loaded;
+				};
+
+				/**
+				 * @param {DependenciesBlock} block the block to walk
+				 * @param {Module} importer the module the block belongs to
+				 * @param {Set<Chunk>[]} contexts what is loaded in each place it runs
+				 * @returns {void}
+				 */
+				const walk = (block, importer, contexts) => {
+					for (const nested of block.blocks) {
+						if (nested instanceof AsyncDependenciesBlock) {
+							for (const dependency of nested.dependencies) {
+								const target = moduleGraph.getModule(dependency);
+
+								if (!target) continue;
+
+								// Redundant only where it is redundant everywhere: a shared
+								// importer still defers for an entry that lacks the target.
+								let redundant = true;
+
+								for (const loaded of contexts) {
+									let present = false;
+
+									for (const chunk of chunkGraph.getModuleChunksIterable(
+										target
+									)) {
+										if (loaded.has(chunk)) {
+											present = true;
+											break;
+										}
+									}
+
+									if (!present) {
+										redundant = false;
+										break;
+									}
+								}
+
+								if (!redundant) continue;
+
+								descriptions.push(
+									`${importer.readableIdentifier(requestShortener)}${
+										nested.loc ? ` ${formatLocation(nested.loc)}` : ""
+									} imports ${target.readableIdentifier(requestShortener)}`
+								);
+							}
+						}
+
+						walk(nested, importer, contexts);
+					}
+				};
+
+				for (const module of compilation.modules) {
+					if (module.blocks.length === 0) continue;
+
+					/** @type {Set<Chunk>[]} */
+					const contexts = [];
+
+					for (const chunk of chunkGraph.getModuleChunksIterable(module)) {
+						contexts.push(getLoadedChunks(chunk));
+					}
+
+					if (contexts.length === 0) continue;
+
+					walk(module, module, contexts);
+				}
+
+				if (descriptions.length === 0) return;
+
+				// Module order is not stable across runtimes, so the reported subset
+				// would otherwise differ between them.
+				descriptions.sort(compareStrings);
+
+				const warning = new RedundantDynamicImportWarning(
+					descriptions.slice(0, MAX_REPORTED_IMPORTS)
+				);
+
+				if (hints === "error") {
+					compilation.errors.push(warning);
+				} else if (hints === "stats") {
+					compilation.hints.push(warning);
+				} else {
+					compilation.warnings.push(warning);
+				}
+			});
+		});
+	}
+}
+
+module.exports = RedundantDynamicImportsPlugin;

package/lib/performance/RuntimeInLargeChunkWarning.js

@@ -0,0 +1,27 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Alexander Akait @alexander-akait
+*/
+
+"use strict";
+
+const WebpackError = require("../errors/WebpackError");
+
+class RuntimeInLargeChunkWarning extends WebpackError {
+	/**
+	 * Creates an instance of RuntimeInLargeChunkWarning.
+	 * @param {string[]} entrypoints names of the entrypoints carrying the runtime
+	 */
+	constructor(entrypoints) {
+		super(
+			`webpack performance recommendations: \nThe runtime is part of the initial chunk of ${entrypoints.join(
+				", "
+			)}. It describes every other chunk, so a change anywhere in the build rewrites these assets and clients download them again.\nSet 'optimization.runtimeChunk' to emit the runtime as its own chunk.\nFor more info visit https://webpack.js.org/configuration/optimization/#optimizationruntimechunk`
+		);
+
+		/** @type {string} */
+		this.name = "RuntimeInLargeChunkWarning";
+	}
+}
+
+module.exports = RuntimeInLargeChunkWarning;

package/lib/performance/ScopeHoistingBailoutsPlugin.js

@@ -0,0 +1,164 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Alexander Akait @alexander-akait
+*/
+
+"use strict";
+
+const ScopeHoistingBailoutsWarning = require("../errors/ScopeHoistingBailoutsWarning");
+const {
+	BAILOUT_PREFIX,
+	REJECTED_PREFIX
+} = require("../optimize/ModuleConcatenationPlugin");
+const { compareStrings } = require("../util/comparators");
+const getModuleSize = require("./getModuleSize");
+
+/** @import { PerformanceOptions } from "../../declarations/WebpackOptions" */
+/** @import Compiler from "../Compiler" */
+/** @import Module from "../Module" */
+/** @import RequestShortener from "../RequestShortener" */
+/**
+ * @import {
+ * 	ScopeHoistingBailoutGroup
+ * } from "../errors/ScopeHoistingBailoutsWarning"
+ */
+
+const PLUGIN_NAME = "ScopeHoistingBailoutsPlugin";
+
+// Reasons repeat far more than they differ, so a few name the problem.
+const MAX_REPORTED_REASONS = 5;
+
+// Enough per reason to recognize the offenders without listing every module.
+const MAX_REPORTED_NAMES = 3;
+
+// A source position makes two identical reasons look like two problems.
+const POSITION_REGEXP = / at \d+:\d+-\d+$/;
+
+/**
+ * The module's own reasons for staying out of a scope, without the ones it
+ * only carries because something it imports bailed out.
+ * @param {(string | ((requestShortener: RequestShortener) => string))[]} bailouts what the module graph recorded
+ * @param {RequestShortener} requestShortener the request shortener
+ * @returns {string[]} the reasons, stripped of their prefix and position
+ */
+const getOwnReasons = (bailouts, requestShortener) => {
+	/** @type {string[]} */
+	const reasons = [];
+
+	for (const bailout of bailouts) {
+		const message =
+			typeof bailout === "function" ? bailout(requestShortener) : bailout;
+
+		if (!message.startsWith(BAILOUT_PREFIX)) continue;
+
+		const reason = message.slice(BAILOUT_PREFIX.length);
+
+		// One root lists every module it could not take in; each of those
+		// modules reports the same problem itself.
+		if (reason.startsWith(REJECTED_PREFIX)) continue;
+
+		reasons.push(reason.replace(POSITION_REGEXP, ""));
+	}
+
+	return reasons;
+};
+
+class ScopeHoistingBailoutsPlugin {
+	/**
+	 * Creates an instance of ScopeHoistingBailoutsPlugin.
+	 * @param {PerformanceOptions} options the plugin options
+	 */
+	constructor(options) {
+		/** @type {PerformanceOptions["hints"]} */
+		this.hints = options.hints;
+	}
+
+	/**
+	 * Applies the plugin by registering its hooks on the compiler.
+	 * @param {Compiler} compiler the compiler instance
+	 * @returns {void}
+	 */
+	apply(compiler) {
+		const hints = this.hints;
+
+		if (!hints) return;
+
+		compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+			// After seal: a module that was hoisted is gone from `modules` by now,
+			// absorbed into the concatenation that took it.
+			compilation.hooks.afterSeal.tap(PLUGIN_NAME, () => {
+				const { chunkGraph, moduleGraph, requestShortener } = compilation;
+				/** @type {Map<string, { size: number, name: string }[]>} */
+				const byReason = new Map();
+				/** @type {Set<Module>} */
+				const affected = new Set();
+
+				for (const module of compilation.modules) {
+					// One webpack left out was never a candidate.
+					if (chunkGraph.getNumberOfModuleChunks(module) === 0) continue;
+
+					const reasons = getOwnReasons(
+						moduleGraph.getOptimizationBailout(module),
+						requestShortener
+					);
+
+					if (reasons.length === 0) continue;
+
+					affected.add(module);
+
+					const entry = {
+						name: module.readableIdentifier(requestShortener),
+						size: getModuleSize(module)
+					};
+
+					for (const reason of new Set(reasons)) {
+						const modules = byReason.get(reason);
+
+						if (modules === undefined) {
+							byReason.set(reason, [entry]);
+						} else {
+							modules.push(entry);
+						}
+					}
+				}
+
+				if (affected.size === 0) return;
+
+				/** @type {ScopeHoistingBailoutGroup[]} */
+				const groups = [];
+
+				for (const [reason, modules] of byReason) {
+					// Ties break by name: module order is not stable across runtimes.
+					modules.sort(
+						(a, b) => b.size - a.size || compareStrings(a.name, b.name)
+					);
+
+					groups.push({
+						reason,
+						count: modules.length,
+						names: modules.slice(0, MAX_REPORTED_NAMES).map((m) => m.name)
+					});
+				}
+
+				groups.sort(
+					(a, b) => b.count - a.count || compareStrings(a.reason, b.reason)
+				);
+
+				const warning = new ScopeHoistingBailoutsWarning(
+					groups.slice(0, MAX_REPORTED_REASONS),
+					affected.size
+				);
+
+				if (hints === "error") {
+					compilation.errors.push(warning);
+				} else if (hints === "stats") {
+					compilation.hints.push(warning);
+				} else {
+					compilation.warnings.push(warning);
+				}
+			});
+		});
+	}
+}
+
+module.exports = ScopeHoistingBailoutsPlugin;

package/lib/performance/SizeLimitsPlugin.js

@@ -5,24 +5,40 @@
 
 "use strict";
 
+const RuntimeGlobals = require("../RuntimeGlobals");
+const RuntimeModule = require("../RuntimeModule");
 const { find } = require("../util/SetHelpers");
+const { compareStrings } = require("../util/comparators");
 const AssetsOverSizeLimitWarning = require("./AssetsOverSizeLimitWarning");
 const EntrypointsOverSizeLimitWarning = require("./EntrypointsOverSizeLimitWarning");
 const NoAsyncChunksWarning = require("./NoAsyncChunksWarning");
+const RuntimeInLargeChunkWarning = require("./RuntimeInLargeChunkWarning");
+const getModuleSize = require("./getModuleSize");
 
-/** @typedef {import("webpack-sources").Source} Source */
-/** @typedef {import("../../declarations/WebpackOptions").PerformanceOptions} PerformanceOptions */
-/** @typedef {import("../ChunkGroup")} ChunkGroup */
-/** @typedef {import("../Compilation").Asset} Asset */
-/** @typedef {import("../Compiler")} Compiler */
-/** @typedef {import("../Entrypoint")} Entrypoint */
-/** @typedef {import("../errors/WebpackError")} WebpackError */
+/** @import { Source } from "webpack-sources" */
+/** @import { PerformanceOptions } from "../../declarations/WebpackOptions" */
+/** @import Chunk from "../Chunk" */
+/** @import ChunkGraph from "../ChunkGraph" */
+/** @import ChunkGroup from "../ChunkGroup" */
+/** @import Compilation, { Asset } from "../Compilation" */
+/** @import Compiler from "../Compiler" */
+/** @import Module from "../Module" */
+/** @import Entrypoint from "../Entrypoint" */
+/** @import WebpackError from "../errors/WebpackError" */
+
+/**
+ * Defines the module details type used by this module.
+ * @typedef {object} ModuleDetails
+ * @property {string} name
+ * @property {number} size
+ */
 
 /**
  * Defines the asset details type used by this module.
  * @typedef {object} AssetDetails
  * @property {string} name
  * @property {number} size
+ * @property {ModuleDetails[]=} modules
  */
 
 /**
@@ -41,6 +57,108 @@ const isOverSizeLimitSet = new WeakSet();
 /** @type {AssetFilter} */
 const excludeSourceMap = (name, source, info) => !info.development;
 
+// Runtime globals whose generated code describes the other chunks, so the chunk
+// holding them is rewritten whenever anything else in the build changes.
+const BUILD_WIDE_RUNTIME_GLOBALS = [
+	RuntimeGlobals.getChunkScriptFilename,
+	RuntimeGlobals.getChunkCssFilename,
+	RuntimeGlobals.getChunkUpdateScriptFilename,
+	RuntimeGlobals.getFullHash,
+	RuntimeGlobals.getUpdateManifestFilename
+];
+
+/**
+ * Tells whether an entrypoint ships its runtime inside a chunk that also carries
+ * modules, and that runtime describes the rest of the build. Only then does
+ * `optimization.runtimeChunk` win anything.
+ * @param {ChunkGraph} chunkGraph the chunk graph
+ * @param {Entrypoint} entrypoint an entrypoint
+ * @returns {boolean} true when splitting the runtime off would keep the chunk stable
+ */
+const hasEmbeddedRuntime = (chunkGraph, entrypoint) => {
+	const runtimeChunk = entrypoint.getRuntimeChunk();
+	if (!runtimeChunk) return false;
+	// A chunk of its own carries the runtime modules and nothing else. Asking each
+	// module beats counting, which depends on runtime modules being counted twice.
+	let carriesCode = false;
+	for (const module of chunkGraph.getChunkModulesIterable(runtimeChunk)) {
+		if (!(module instanceof RuntimeModule)) {
+			carriesCode = true;
+			break;
+		}
+	}
+	if (!carriesCode) return false;
+	// The tree requirements are the ones the emitted runtime modules answer to.
+	const runtimeRequirements =
+		chunkGraph.getTreeRuntimeRequirements(runtimeChunk);
+	// A global nothing here names stays silent, so a new one costs a hint, not a wrong one.
+	return BUILD_WIDE_RUNTIME_GLOBALS.some((runtimeGlobal) =>
+		runtimeRequirements.has(runtimeGlobal)
+	);
+};
+
+// Enough to point at the culprit without turning the hint into a report.
+const MAX_REPORTED_MODULES = 3;
+
+/**
+ * Names the largest modules inside each oversized asset. "This file is too big"
+ * is only actionable once you know what fills it.
+ * @param {Compilation} compilation the compilation
+ * @param {AssetDetails[]} assetsOverSizeLimit the oversized assets, annotated in place
+ * @returns {void}
+ */
+const addLargestModules = (compilation, assetsOverSizeLimit) => {
+	const { chunkGraph, requestShortener } = compilation;
+	/** @type {Map<string, Chunk[]>} */
+	const chunksByFile = new Map();
+
+	for (const chunk of compilation.chunks) {
+		// A chunk emitting several files (javascript plus extracted css, …) gives
+		// no way to tell which module ended up in which, so it names none.
+		if (chunk.files.size !== 1) continue;
+
+		for (const file of chunk.files) {
+			const chunks = chunksByFile.get(file);
+
+			if (chunks === undefined) {
+				chunksByFile.set(file, [chunk]);
+			} else {
+				chunks.push(chunk);
+			}
+		}
+	}
+
+	for (const asset of assetsOverSizeLimit) {
+		const chunks = chunksByFile.get(asset.name);
+
+		// An asset a loader or plugin emitted belongs to no chunk, so nothing
+		// describes its contents; likewise one whose chunk emits several files.
+		if (chunks === undefined) continue;
+
+		/** @type {Set<Module>} */
+		const seen = new Set();
+		/** @type {ModuleDetails[]} */
+		const modules = [];
+
+		for (const chunk of chunks) {
+			for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
+				if (seen.has(module)) continue;
+				seen.add(module);
+				modules.push({
+					name: module.readableIdentifier(requestShortener),
+					size: getModuleSize(module)
+				});
+			}
+		}
+
+		if (modules.length === 0) continue;
+
+		// Ties break by name: which modules finish first is not stable.
+		modules.sort((a, b) => b.size - a.size || compareStrings(a.name, b.name));
+		asset.modules = modules.slice(0, MAX_REPORTED_MODULES);
+	}
+};
+
 const PLUGIN_NAME = "SizeLimitsPlugin";
 
 module.exports = class SizeLimitsPlugin {
@@ -132,6 +250,8 @@ module.exports = class SizeLimitsPlugin {
 
 			/** @type {EntrypointDetails[]} */
 			const entrypointsOverLimit = [];
+			/** @type {string[]} */
+			const entrypointsWithEmbeddedRuntime = [];
 			for (const [name, entry] of compilation.entrypoints) {
 				const size = getEntrypointSize(entry);
 
@@ -142,6 +262,9 @@ module.exports = class SizeLimitsPlugin {
 						files: entry.getFiles().filter(fileFilter)
 					});
 					isOverSizeLimitSet.add(entry);
+					if (hasEmbeddedRuntime(compilation.chunkGraph, entry)) {
+						entrypointsWithEmbeddedRuntime.push(name);
+					}
 				}
 			}
 
@@ -151,6 +274,7 @@ module.exports = class SizeLimitsPlugin {
 				// 3. No Async Chunks
 				// if !1, then 2, if !2 return
 				if (assetsOverSizeLimit.length > 0) {
+					addLargestModules(compilation, assetsOverSizeLimit);
 					warnings.push(
 						new AssetsOverSizeLimitWarning(
 							assetsOverSizeLimit,
@@ -177,8 +301,16 @@ module.exports = class SizeLimitsPlugin {
 						warnings.push(new NoAsyncChunksWarning());
 					}
 
+					if (entrypointsWithEmbeddedRuntime.length > 0) {
+						warnings.push(
+							new RuntimeInLargeChunkWarning(entrypointsWithEmbeddedRuntime)
+						);
+					}
+
 					if (hints === "error") {
 						compilation.errors.push(...warnings);
+					} else if (hints === "stats") {
+						compilation.hints.push(...warnings);
 					} else {
 						compilation.warnings.push(...warnings);
 					}