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

package/lib/prefetch/ResourceHintPlugin.js

@@ -6,23 +6,60 @@
 
 const { RawSource } = require("webpack-sources");
 const ModuleFilenameHelpers = require("../ModuleFilenameHelpers");
+const {
+	ASSET_URL_TYPE,
+	JAVASCRIPT_TYPE
+} = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
 const URLDependency = require("../dependencies/URLDependency");
-const ResourceHintRuntimeModule = require("./ResourceHintRuntimeModule");
-const StartupAssetHintRuntimeModule = require("./StartupAssetHintRuntimeModule");
+const WorkerDependency = require("../dependencies/WorkerDependency");
+const lazyModule = require("../util/lazyModule");
+const memoize = require("../util/memoize");
+const {
+	PUBLIC_PATH_AUTO,
+	PUBLIC_PATH_FULL_HASH
+} = require("../util/publicPathPlaceholder");
+const { guessAsAttribute } = require("./parseResourceHintOptions");
 const parseResourceHintOptions = require("./parseResourceHintOptions");
 
-/** @typedef {import("../Compilation")} Compilation */
-/** @typedef {import("../Compiler")} Compiler */
-/** @typedef {import("../Module")} Module */
-/** @typedef {import("../../declarations/WebpackOptions").ResourceHintsInitial} ResourceHintsConfig */
-/** @typedef {import("../../declarations/WebpackOptions").ResourceHintsOptions} ResourceHintsOptions */
-/** @typedef {import("../../declarations/WebpackOptions").UrlHintRule} UrlHintRule */
-/** @typedef {import("../dependencies/HtmlEntryDependency").HtmlResourceHint} HtmlResourceHint */
-/** @typedef {import("../dependencies/HtmlEntryDependency").HtmlResourceHintContext} HtmlResourceHintContext */
-/** @typedef {import("./parseResourceHintOptions").ResourceHintOptions} ResourceHintOptions */
+/** @import Chunk from "../Chunk" */
+/** @import ChunkGraph from "../ChunkGraph" */
+/** @import CodeGenerationResults from "../CodeGenerationResults" */
+/** @import Compilation from "../Compilation" */
+/** @import Compiler from "../Compiler" */
+/** @import Module, { RuntimeRequirements } from "../Module" */
+
+/**
+ * The attributes a `<link>` carries besides its href and `as`.
+ * @typedef {object} StartupHintAttributes
+ * @property {("low" | "high" | "auto" | undefined)=} fetchPriority
+ * @property {string=} type
+ * @property {string=} media
+ */
+
+/**
+ * One asset a chunk hints at startup, merged across every reference to it.
+ * @typedef {object} AssetHintEntry
+ * @property {Module} assetModule the asset the `<link>` points at
+ * @property {Module} originModule the chunk module the reference was written in, which is what a baked href is relative to
+ * @property {string} request the original request, for guessing the `as` attribute
+ * @property {boolean} preload preload rather than prefetch
+ * @property {("low" | "high" | "auto" | undefined)} fetchPriority
+ * @property {(string | undefined)} as
+ * @property {(string | undefined)} type
+ * @property {(string | undefined)} media
+ */
+/**
+ * @import {
+ * 	ResourceHintsInitial as ResourceHintsConfig,
+ * 	ResourceHintsOptions,
+ * 	UrlHintRule
+ * } from "../../declarations/WebpackOptions"
+ */
+/** @import { HtmlResourceHint } from "../dependencies/HtmlEntryDependency" */
+/** @import { ResourceHintOptions } from "./parseResourceHintOptions" */
 
 /**
  * @typedef {object} ResolvedResourceHints
@@ -90,6 +127,19 @@ const getPublicPathOrigin = (compilation) => {
  * @property {(entryName: string) => EntrypointHint[]} getEntrypointHints resolved `<link>`-shaped descriptors for the given entry — auto initial-graph hints plus URL asset hints, then filtered / rewritten through the user function (when `output.resourceHints` is a function). Reads via `stats.entrypoints[name].resourceHints`.
  */
 
+// only a build that actually emits a resource hint needs these
+const getResourceHintRuntimeModule = lazyModule(() =>
+	require("./ResourceHintRuntimeModule")
+);
+const getStartupAssetHintRuntimeModule = lazyModule(() =>
+	require("./StartupAssetHintRuntimeModule")
+);
+// only reached once a build has an html module, so a js-only build never
+// pays for the html generator this drags in
+const getHtmlEntryDependency = memoize(() =>
+	require("../dependencies/HtmlEntryDependency")
+);
+
 const PLUGIN_NAME = "ResourceHintPlugin";
 
 /** @type {WeakMap<Compilation, CompilationResolver>} */
@@ -100,6 +150,57 @@ const compilationResolvers = new WeakMap();
 // magic comments still work — they route through `applyParsedHints`.
 const DEFAULT_ASSETS_EXCLUDE_REGEXP = /\.(?:webmanifest|pdf|txt)(?:\?.*)?$/i;
 
+// Initial-graph auto hints target JS chunk output files only.
+const JS_CHUNK_FILE_REGEXP = /\.m?jsx?$/i;
+
+/**
+ * True for the URL-referenced-asset deps that can carry resource-hint flags.
+ * Type guard so callers keep the narrowed union without re-listing the classes.
+ * @param {import("../Dependency")} dep dependency
+ * @returns {dep is URLDependency | CssUrlDependency | HtmlSourceDependency} whether it is a URL asset dep
+ */
+const isUrlAssetDep = (dep) =>
+	dep instanceof URLDependency ||
+	dep instanceof CssUrlDependency ||
+	dep instanceof HtmlSourceDependency;
+
+/**
+ * Entry chunk name for a hint's `hostChunks` (Vite's `hostId`); the id is a
+ * stable fallback for unnamed chunks.
+ * @param {import("../Chunk")} chunk chunk
+ * @returns {string} name or stringified id
+ */
+const chunkHostName = (chunk) => chunk.name || String(chunk.id);
+
+/**
+ * Walk `chunks` × their modules × dependencies and yield each distinct
+ * URL-asset module carrying a prefetch/preload flag, deduping targets within a
+ * single call. One shared walk for the entrypoint-hint and HTML-hint passes,
+ * which would otherwise each re-implement the same 4-level nesting.
+ * @param {Compilation} compilation compilation
+ * @param {Iterable<import("../Chunk")>} chunks chunks to scan
+ * @returns {IterableIterator<{ dep: URLDependency | CssUrlDependency | HtmlSourceDependency, target: Module, chunk: import("../Chunk") }>} hinted assets
+ */
+function* iterateHintedUrlAssets(compilation, chunks) {
+	const { chunkGraph, moduleGraph } = compilation;
+	/** @type {WeakSet<Module>} */
+	const seen = new WeakSet();
+	for (const chunk of chunks) {
+		for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
+			const deps = module.dependencies;
+			if (!deps) continue;
+			for (const dep of deps) {
+				if (!isUrlAssetDep(dep)) continue;
+				if (!dep.prefetch && !dep.preload) continue;
+				const target = moduleGraph.getModule(dep);
+				if (!target || seen.has(target)) continue;
+				seen.add(target);
+				yield { dep, target, chunk };
+			}
+		}
+	}
+}
+
 /**
  * Merge the matching `UrlHintRule`s for a request. Rules match by
  * `test`/`include`/`exclude` (omit all three → matches everything); later
@@ -238,13 +339,13 @@ const collectEntrypointHints = (compilation, entryName, hints) => {
 		for (const chunk of entrypoint.chunks) {
 			if (chunk === entryChunk) continue;
 			for (const file of chunk.files) {
-				if (!/\.m?jsx?$/i.test(file)) continue;
+				if (!JS_CHUNK_FILE_REGEXP.test(file)) continue;
 				const href = publicPath + file;
 				/** @type {EntrypointHint} */
 				const h = {
 					rel,
 					href,
-					hostChunks: [chunk.name || String(chunk.id)]
+					hostChunks: [chunkHostName(chunk)]
 				};
 				if (rel === "preload") h.as = "script";
 				push(h);
@@ -256,45 +357,28 @@ const collectEntrypointHints = (compilation, entryName, hints) => {
 	// runtime via `dynamicImportPrefetch/Preload` parser options).
 	/** @type {Set<import("../Chunk")>} */
 	const chunkSet = new Set(entrypoint.chunks);
-	const rt = entrypoint.getRuntimeChunk();
-	if (rt) chunkSet.add(rt);
-	/** @type {WeakSet<Module>} */
-	const seenAssets = new WeakSet();
-	for (const chunk of chunkSet) {
-		for (const m of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
-			if (!m.dependencies) continue;
-			for (const d of m.dependencies) {
-				if (
-					!(d instanceof URLDependency) &&
-					!(d instanceof CssUrlDependency) &&
-					!(d instanceof HtmlSourceDependency)
-				) {
-					continue;
-				}
-				if (!d.prefetch && !d.preload) continue;
-				const t = compilation.moduleGraph.getModule(d);
-				if (!t || seenAssets.has(t)) continue;
-				seenAssets.add(t);
-				const buildInfo =
-					/** @type {{ filename?: string }} */
-					(t.buildInfo);
-				if (!buildInfo || !buildInfo.filename) continue;
-				const asAttr =
-					d.asAttribute ||
-					ResourceHintRuntimeModule.guessAsAttribute(d.request);
-				/** @type {EntrypointHint} */
-				const h = {
-					rel: d.preload ? "preload" : "prefetch",
-					href: publicPath + buildInfo.filename,
-					hostChunks: [chunk.name || String(chunk.id)]
-				};
-				if (asAttr) h.as = asAttr;
-				if (d.typeAttribute) h.type = d.typeAttribute;
-				if (d.mediaAttribute) h.media = d.mediaAttribute;
-				if (d.fetchPriority) h.fetchPriority = d.fetchPriority;
-				push(h);
-			}
-		}
+	const runtimeChunk = entrypoint.getRuntimeChunk();
+	if (runtimeChunk) chunkSet.add(runtimeChunk);
+	for (const { dep, target, chunk } of iterateHintedUrlAssets(
+		compilation,
+		chunkSet
+	)) {
+		const buildInfo =
+			/** @type {{ filename?: string }} */
+			(target.buildInfo);
+		if (!buildInfo || !buildInfo.filename) continue;
+		const asAttribute = dep.asAttribute || guessAsAttribute(dep.request);
+		/** @type {EntrypointHint} */
+		const h = {
+			rel: dep.preload ? "preload" : "prefetch",
+			href: publicPath + buildInfo.filename,
+			hostChunks: [chunkHostName(chunk)]
+		};
+		if (asAttribute) h.as = asAttribute;
+		if (dep.typeAttribute) h.type = dep.typeAttribute;
+		if (dep.mediaAttribute) h.media = dep.mediaAttribute;
+		if (dep.fetchPriority) h.fetchPriority = dep.fetchPriority;
+		push(h);
 	}
 	// `hostType`: `"html"` iff the entrypoint has an extracted HTML page
 	// (any `HtmlEntryDependency` with elementKind `script`/`script-module` on
@@ -302,14 +386,13 @@ const collectEntrypointHints = (compilation, entryName, hints) => {
 	// `stats.entrypoints[name].resourceHints` see `"js"`.
 	let hostType = /** @type {"html" | "js"} */ ("js");
 
-	const HtmlEntryDependency = require("../dependencies/HtmlEntryDependency");
-
 	outer: for (const module of compilation.modules) {
 		if (!module.getSourceTypes || !module.getSourceTypes().has("html")) {
 			continue;
 		}
 		const presDeps = module.presentationalDependencies;
 		if (!presDeps) continue;
+		const HtmlEntryDependency = getHtmlEntryDependency();
 		for (const dep of presDeps) {
 			if (
 				dep instanceof HtmlEntryDependency &&
@@ -331,6 +414,214 @@ const collectEntrypointHints = (compilation, entryName, hints) => {
 	);
 };
 
+/**
+ * Renders the `<link>` calls a chunk fires at startup, for every asset and worker
+ * chunk it references with a resource hint. Run while runtime requirements are still
+ * open, so what an href reads is added to `set` rather than assumed: an href spelled
+ * as a literal leaves `.p` and `.u` out of the chunk entirely.
+ * @param {Chunk} chunk the chunk the calls are emitted into
+ * @param {Compilation} compilation the compilation
+ * @param {ChunkGraph} chunkGraph the chunk graph
+ * @param {CodeGenerationResults} codeGenerationResults the code generation results
+ * @param {RuntimeRequirements} set the chunk's runtime requirements
+ * @returns {string[]} one call per hinted asset, in emission order
+ */
+const collectStartupAssetHintLines = (
+	chunk,
+	compilation,
+	chunkGraph,
+	codeGenerationResults,
+	set
+) => {
+	const { moduleGraph, runtimeTemplate } = compilation;
+	const resolver =
+		/** @type {CompilationResolver} */
+		(compilationResolvers.get(compilation));
+	/** @type {string[]} */
+	const lines = [];
+
+	/**
+	 * @param {string} fn the `<link>` helper
+	 * @param {string} href the href expression
+	 * @param {string} as the `as` attribute
+	 * @param {StartupHintAttributes} attributes the remaining attributes
+	 * @returns {void}
+	 */
+	const push = (fn, href, as, attributes) => {
+		set.add(fn);
+		lines.push(
+			`${fn}(${href}, ${JSON.stringify(as)}, ${
+				attributes.type ? JSON.stringify(attributes.type) : "undefined"
+			}, ${attributes.media ? JSON.stringify(attributes.media) : "undefined"}, ${
+				attributes.fetchPriority
+					? JSON.stringify(attributes.fetchPriority)
+					: "undefined"
+			});`
+		);
+	};
+
+	// The analyzable worker form can't wrap its own href without losing the literal
+	// specifier, so its `<link>` fires here — keyed by chunk, hence a separate pass.
+	/** @type {Set<string | number>} */
+	const seenWorkerChunks = new Set();
+	for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
+		for (const block of module.blocks) {
+			for (const dep of block.dependencies) {
+				if (!(dep instanceof WorkerDependency)) continue;
+				const hint = dep.options.resourceHint;
+				if (!hint || (!hint.preload && !hint.prefetch)) continue;
+				const group = chunkGraph.getBlockChunkGroup(block);
+				if (!group) continue;
+				const workerChunk =
+					/** @type {import("../Entrypoint")} */
+					(group).getEntrypointChunk();
+				if (workerChunk.id === null || seenWorkerChunks.has(workerChunk.id)) {
+					continue;
+				}
+				seenWorkerChunks.add(workerChunk.id);
+				// The same specifier the `new Worker(...)` call site bakes, asked of the
+				// same module, so the two agree on whether a literal is spellable.
+				const specifier = runtimeTemplate.supportsAnalyzable(
+					"url",
+					chunkGraph,
+					module
+				)
+					? runtimeTemplate._getAnalyzableChunkSpecifier(
+							dep.options.publicPath,
+							workerChunk,
+							module,
+							chunkGraph,
+							set
+						)
+					: null;
+				// Without one the call site keeps the runtime form, where it wraps its own
+				// href — firing the `<link>` here too would emit the call twice.
+				if (specifier === null) continue;
+				push(
+					hint.preload
+						? RuntimeGlobals.preloadAsset
+						: RuntimeGlobals.prefetchAsset,
+					`${runtimeTemplate.importMetaUrl(specifier)}.href`,
+					hint.as || "script",
+					hint
+				);
+			}
+		}
+	}
+
+	// Dedupe per asset module so two references can't emit two `<link>`s: `preload`
+	// wins over `prefetch`, and the last explicit attribute override sticks.
+	/** @type {Map<string, AssetHintEntry>} */
+	const perAsset = new Map();
+	for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
+		const deps =
+			/** @type {{ dependencies?: import("../Dependency")[] }} */
+			(module).dependencies;
+		if (!deps) continue;
+		for (const dep of deps) {
+			if (!isUrlAssetDep(dep)) continue;
+			if (!dep.prefetch && !dep.preload) continue;
+			const assetModule = moduleGraph.getModule(dep);
+			if (!assetModule) continue;
+			// Already a `<link>` in the html `<head>` emitted by `HtmlEntryDependency`,
+			// so the runtime hint would leave the DOM with two tags for one url.
+			if (resolver.isHtmlHinted(assetModule)) continue;
+			const key = assetModule.identifier();
+			const urlDep =
+				/** @type {URLDependency & Partial<CssUrlDependency> & Partial<HtmlSourceDependency>} */
+				(dep);
+			const existing = perAsset.get(key);
+			if (existing) {
+				if (dep.preload) existing.preload = true;
+				if (dep.fetchPriority) existing.fetchPriority = dep.fetchPriority;
+				if (urlDep.asAttribute) existing.as = urlDep.asAttribute;
+				if (urlDep.typeAttribute) existing.type = urlDep.typeAttribute;
+				if (urlDep.mediaAttribute) existing.media = urlDep.mediaAttribute;
+			} else {
+				perAsset.set(key, {
+					assetModule: /** @type {Module} */ (assetModule),
+					originModule: module,
+					request: dep.request,
+					preload: Boolean(dep.preload),
+					fetchPriority: dep.fetchPriority,
+					as: urlDep.asAttribute,
+					type: urlDep.typeAttribute,
+					media: urlDep.mediaAttribute
+				});
+			}
+		}
+	}
+
+	for (const entry of perAsset.values()) {
+		const { assetModule } = entry;
+		let href;
+		// An asset with a javascript wrapper exposes its url through it; one without has
+		// no `__webpack_modules__` entry to require.
+		if (assetModule.getSourceTypes().has(JAVASCRIPT_TYPE)) {
+			href = runtimeTemplate.moduleRaw({
+				chunkGraph,
+				module: assetModule,
+				request: entry.request,
+				runtimeRequirements: set,
+				weak: false
+			});
+		} else {
+			const has = codeGenerationResults.has(assetModule, chunk.runtime);
+			const urlData = has
+				? codeGenerationResults.getData(assetModule, chunk.runtime, "url")
+				: undefined;
+			const resolved = urlData && urlData[ASSET_URL_TYPE];
+			// A generator `publicPath` overrides `output.publicPath`, so prefer it; only the
+			// two placeholders below are still unresolved when this runs.
+			const templated =
+				typeof resolved === "string" &&
+				(resolved.includes(PUBLIC_PATH_AUTO) ||
+					resolved.includes(PUBLIC_PATH_FULL_HASH));
+			if (typeof resolved === "string" && !templated) {
+				href = JSON.stringify(resolved);
+			} else {
+				const filename = has
+					? codeGenerationResults.getData(
+							assetModule,
+							chunk.runtime,
+							"filename"
+						)
+					: undefined;
+				if (typeof filename !== "string") continue;
+				// The literal the `new URL()` call site bakes, asked of the same module —
+				// but written into a runtime module, which no `eval` devtool wraps.
+				const specifier = runtimeTemplate.supportsAnalyzable(
+					"url-runtime",
+					chunkGraph,
+					entry.originModule
+				)
+					? runtimeTemplate.getAnalyzableAssetUrl(
+							entry.originModule,
+							chunkGraph,
+							filename,
+							chunk.runtime
+						)
+					: null;
+				if (specifier !== null) {
+					href = `${runtimeTemplate.importMetaUrl(specifier)}.href`;
+				} else {
+					set.add(RuntimeGlobals.publicPath);
+					href = `${RuntimeGlobals.publicPath} + ${JSON.stringify(filename)}`;
+				}
+			}
+		}
+		push(
+			entry.preload
+				? RuntimeGlobals.preloadAsset
+				: RuntimeGlobals.prefetchAsset,
+			href,
+			entry.as || guessAsAttribute(entry.request),
+			entry
+		);
+	}
+	return lines;
+};
+
 /**
  * Adds runtime support for `__webpack_require__.PA` / `__webpack_require__.LA`,
  * the helpers that inject `<link rel="prefetch">` / `<link rel="preload">`
@@ -447,8 +738,6 @@ class ResourceHintPlugin {
 	apply(compiler) {
 		const hints = this._hints;
 
-		const HtmlEntryDependency = require("../dependencies/HtmlEntryDependency");
-
 		compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
 			// Lazy-computed on first access — walk every HTML module's
 			// `HtmlEntryDependency`s, resolve each named entry, and collect
@@ -475,6 +764,7 @@ class ResourceHintPlugin {
 					// they don't affect module resolution, only rendering.
 					const presDeps = module.presentationalDependencies;
 					if (!presDeps) continue;
+					const HtmlEntryDependency = getHtmlEntryDependency();
 					for (const dep of presDeps) {
 						if (
 							!(dep instanceof HtmlEntryDependency) ||
@@ -493,33 +783,16 @@ class ResourceHintPlugin {
 						const chunks = new Set(entrypoint.chunks);
 						const entry = entrypoint.getEntrypointChunk();
 						if (entry) chunks.add(entry);
-						const rt = entrypoint.getRuntimeChunk();
-						if (rt) chunks.add(rt);
+						const runtimeChunk = entrypoint.getRuntimeChunk();
+						if (runtimeChunk) chunks.add(runtimeChunk);
 						/** @type {HtmlHintedAsset[]} */
 						const hinted = [];
-						/** @type {WeakSet<Module>} */
-						const seen = new WeakSet();
-						for (const c of chunks) {
-							for (const m of compilation.chunkGraph.getChunkModulesIterable(
-								c
-							)) {
-								if (!m.dependencies) continue;
-								for (const d of m.dependencies) {
-									if (
-										!(d instanceof URLDependency) &&
-										!(d instanceof CssUrlDependency) &&
-										!(d instanceof HtmlSourceDependency)
-									) {
-										continue;
-									}
-									if (!d.prefetch && !d.preload) continue;
-									const t = compilation.moduleGraph.getModule(d);
-									if (!t || seen.has(t)) continue;
-									seen.add(t);
-									anyHtmlHinted.add(t);
-									hinted.push({ module: t, dep: d });
-								}
-							}
+						for (const { dep: assetDep, target } of iterateHintedUrlAssets(
+							compilation,
+							chunks
+						)) {
+							anyHtmlHinted.add(target);
+							hinted.push({ module: target, dep: assetDep });
 						}
 						// Multiple HtmlEntryDeps may share an entryName (e.g. a
 						// `<script>` and a `<link rel="modulepreload">` for the
@@ -554,61 +827,28 @@ class ResourceHintPlugin {
 				getEntrypointHints: (entryName) =>
 					collectEntrypointHints(compilation, entryName, hints)
 			});
-			// CSS `url(...)` and HTML `<img src>` / `<link href>` deps store
-			// hint flags but their dep templates don't run for the JS
-			// output, so we need to lift those flags into the JS chunk's
-			// runtime requirements ourselves. Iterate only css/html modules
-			// (pure-JS chunks skip the walk entirely).
+			// Rendered here, not in the runtime module: requirements are still open, so a
+			// literal href costs no `.p`/`.u`, and async chunks are reached as well.
 			compilation.hooks.additionalChunkRuntimeRequirements.tap(
 				PLUGIN_NAME,
-				(chunk, set, { chunkGraph }) => {
-					if (hints === "none") return;
-					let hasPrefetch = false;
-					let hasPreload = false;
-					for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
-						const deps =
-							/** @type {{ dependencies?: import("../Dependency")[] }} */
-							(module).dependencies;
-						if (!deps) continue;
-						for (const dep of deps) {
-							if (
-								!(dep instanceof CssUrlDependency) &&
-								!(dep instanceof HtmlSourceDependency)
-							) {
-								continue;
-							}
-							if (dep.prefetch) hasPrefetch = true;
-							if (dep.preload) hasPreload = true;
-							if (hasPrefetch && hasPreload) break;
-						}
-						if (hasPrefetch && hasPreload) break;
-					}
-					// Attach the startup-hint runtime module to *this* chunk
-					// (covering async chunks too) — `runtimeRequirementInTree`
-					// alone would only attach it to the runtime chunk, so a
-					// hinted `new URL(...)` in an async chunk would never
-					// fire its `<link>` injection. We add it whenever this
-					// chunk already pulls in `startupAssetHints` (via JS
-					// `URLDependency` template) or whenever CSS / HTML lifts
-					// it in here.
-					if (
-						hasPrefetch ||
-						hasPreload ||
-						set.has(RuntimeGlobals.startupAssetHints)
-					) {
-						set.add(RuntimeGlobals.startupAssetHints);
-						// CSS-only asset modules aren't in JS `__webpack_modules__`,
-						// so the startup-hint runtime falls back to
-						// `__webpack_require__.p + "filename"`. Make sure
-						// `publicPath` is in this chunk's runtime.
-						set.add(RuntimeGlobals.publicPath);
-						if (hasPrefetch) set.add(RuntimeGlobals.prefetchAsset);
-						if (hasPreload) set.add(RuntimeGlobals.preloadAsset);
-						compilation.addRuntimeModule(
-							chunk,
-							new StartupAssetHintRuntimeModule()
-						);
-					}
+				(chunk, set, { chunkGraph, codeGenerationResults }) => {
+					// Browser markup, and no DOM to put it in — the call sites skip their
+					// hints under build-time execution too (`URLDependency`).
+					if (hints === "none" || chunkGraph.buildTimeExecution) return;
+					const lines = collectStartupAssetHintLines(
+						chunk,
+						compilation,
+						chunkGraph,
+						codeGenerationResults,
+						set
+					);
+					if (lines.length === 0) return;
+					set.add(RuntimeGlobals.startupAssetHints);
+					compilation.addLazyRuntimeModule(
+						chunk,
+						getStartupAssetHintRuntimeModule,
+						(Ctor) => new Ctor(lines)
+					);
 				}
 			);
 			for (const [rel, runtimeGlobal] of /** @type {const} */ ([
@@ -618,9 +858,10 @@ class ResourceHintPlugin {
 				compilation.hooks.runtimeRequirementInTree
 					.for(runtimeGlobal)
 					.tap(PLUGIN_NAME, (chunk) => {
-						compilation.addRuntimeModule(
+						compilation.addLazyRuntimeModule(
 							chunk,
-							new ResourceHintRuntimeModule(rel)
+							getResourceHintRuntimeModule,
+							(Ctor) => new Ctor(rel)
 						);
 					});
 			}

package/lib/prefetch/ResourceHintRuntimeModule.js

@@ -9,6 +9,7 @@ const Compilation = require("../Compilation");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
+const { guessAsAttribute } = require("./parseResourceHintOptions");
 
 /**
  * @typedef {object} ResourceHintRuntimeModulePluginHooks
@@ -19,27 +20,6 @@ const Template = require("../Template");
 /** @type {WeakMap<Compilation, ResourceHintRuntimeModulePluginHooks>} */
 const compilationHooksMap = new WeakMap();
 
-/**
- * Maps a request/filename to the value of the `<link>` `as` attribute. Best
- * effort — falls back to `"fetch"` when the type cannot be guessed. Pattern
- * matches against the path part, ignoring any query string suffix.
- * @param {string} request request/filename
- * @returns {string} value for the `as` attribute
- */
-const guessAsAttribute = (request) => {
-	if (/\.(png|jpe?g|gif|svg|webp|avif|bmp|ico|tiff?)(\?.*)?$/i.test(request)) {
-		return "image";
-	}
-	if (/\.(woff2?|ttf|otf|eot)(\?.*)?$/i.test(request)) return "font";
-	if (/\.css(\?.*)?$/i.test(request)) return "style";
-	if (/\.[cm]?jsx?(\?.*)?$/i.test(request)) return "script";
-	if (/\.[cm]?tsx?(\?.*)?$/i.test(request)) return "script";
-	if (/\.(mp3|wav|flac|aac|m4a|ogg|oga)(\?.*)?$/i.test(request)) return "audio";
-	if (/\.(mp4|webm|mkv|mov|m4v|ogv|avi)(\?.*)?$/i.test(request)) return "video";
-	if (/\.vtt(\?.*)?$/i.test(request)) return "track";
-	return "fetch";
-};
-
 class ResourceHintRuntimeModule extends RuntimeModule {
 	/**
 	 * @param {Compilation} compilation the compilation