feat: allow external modules place in async chunks in some case (#20632)

hai-x · web-flow · commit 40023cb3764d · 2026-03-13T15:02:16.000+03:00
diff --git a/lib/ExternalModule.js b/lib/ExternalModule.js
@@ -5,6 +5,7 @@
 
 "use strict";
 
+const { SyncBailHook } = require("tapable");
 const { OriginalSource, RawSource } = require("webpack-sources");
 const ConcatenationScope = require("./ConcatenationScope");
 const EnvironmentNotSupportAsyncWarning = require("./EnvironmentNotSupportAsyncWarning");
@@ -629,6 +630,14 @@ const getSourceForDefaultCase = (optional, request, runtimeTemplate) => {
 /** @typedef {Record<string, string | string[]>} RequestRecord */
 /** @typedef {string | string[] | RequestRecord} ExternalModuleRequest */
 
+/**
+ * @typedef {object} ExternalModuleHooks
+ * @property {SyncBailHook<[Chunk, Compilation], boolean>} chunkCondition
+ */
+
+/** @type {WeakMap<Compilation, ExternalModuleHooks>} */
+const compilationHooksMap = new WeakMap();
+
 class ExternalModule extends Module {
 	/**
 	 * @param {ExternalModuleRequest} request request
@@ -650,6 +659,21 @@ class ExternalModule extends Module {
 		this.dependencyMeta = dependencyMeta;
 	}
 
+	/**
+	 * @param {Compilation} compilation the compilation
+	 * @returns {ExternalModuleHooks} the attached hooks
+	 */
+	static getCompilationHooks(compilation) {
+		let hooks = compilationHooksMap.get(compilation);
+		if (hooks === undefined) {
+			hooks = {
+				chunkCondition: new SyncBailHook(["chunk", "compilation"])
+			};
+			compilationHooksMap.set(compilation, hooks);
+		}
+		return hooks;
+	}
+
 	/**
 	 * @returns {SourceTypes} types available (do not mutate)
 	 */
@@ -679,12 +703,21 @@ class ExternalModule extends Module {
 	/**
 	 * @param {Chunk} chunk the chunk which condition should be checked
 	 * @param {Compilation} compilation the compilation
-	 * @returns {boolean} true, if the chunk is ok for the module
+	 * @returns {boolean} true if the module can be placed in the chunk
 	 */
-	chunkCondition(chunk, { chunkGraph }) {
-		return this.externalType === "css-import"
-			? true
-			: chunkGraph.getNumberOfEntryModules(chunk) > 0;
+	chunkCondition(chunk, compilation) {
+		const { chunkCondition } = ExternalModule.getCompilationHooks(compilation);
+		const condition = chunkCondition.call(chunk, compilation);
+		if (condition !== undefined) return condition;
+
+		const type = this._resolveExternalType(this.externalType);
+
+		// For `import()` externals, keep them in the initial chunk to avoid loading
+		// them asynchronously twice and to improve runtime performance.
+		if (["css-import", "module"].includes(type)) {
+			return true;
+		}
+		return compilation.chunkGraph.getNumberOfEntryModules(chunk) > 0;
 	}
 
 	/**
diff --git a/lib/Module.js b/lib/Module.js
@@ -1095,7 +1095,7 @@ class Module extends DependenciesBlock {
 	/**
 	 * @param {Chunk} chunk the chunk which condition should be checked
 	 * @param {Compilation} compilation the compilation
-	 * @returns {boolean} true, if the chunk is ok for the module
+	 * @returns {boolean} true if the module can be placed in the chunk
 	 */
 	chunkCondition(chunk, compilation) {
 		return true;
diff --git a/lib/container/ContainerReferencePlugin.js b/lib/container/ContainerReferencePlugin.js
@@ -5,6 +5,7 @@
 
 "use strict";
 
+const ExternalModule = require("../ExternalModule");
 const ExternalsPlugin = require("../ExternalsPlugin");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const FallbackDependency = require("./FallbackDependency");
@@ -135,6 +136,17 @@ class ContainerReferencePlugin {
 						set.add(RuntimeGlobals.shareScopeMap);
 						compilation.addRuntimeModule(chunk, new RemoteRuntimeModule());
 					});
+
+				const { chunkCondition } =
+					ExternalModule.getCompilationHooks(compilation);
+
+				// External modules issued by remote modules should be placed in entry chunks
+				// to ensure they are loaded and initialize first
+				chunkCondition.tap(
+					PLUGIN_NAME,
+					(chunk, compilation) =>
+						compilation.chunkGraph.getNumberOfEntryModules(chunk) > 0
+				);
 			}
 		);
 	}
diff --git a/lib/container/FallbackModule.js b/lib/container/FallbackModule.js
@@ -79,7 +79,7 @@ class FallbackModule extends Module {
 	/**
 	 * @param {Chunk} chunk the chunk which condition should be checked
 	 * @param {Compilation} compilation the compilation
-	 * @returns {boolean} true, if the chunk is ok for the module
+	 * @returns {boolean} true if the module can be placed in the chunk
 	 */
 	chunkCondition(chunk, { chunkGraph }) {
 		return chunkGraph.getNumberOfEntryModules(chunk) > 0;
diff --git a/test/configCases/externals/module-externals-in-async-chunk/chunk.js b/test/configCases/externals/module-externals-in-async-chunk/chunk.js
@@ -0,0 +1,5 @@
+import external from "external";
+import external2 from "external2";
+
+export const readFile = external.readFile;
+export const readFileSync = external2.readFileSync;
diff --git a/test/configCases/externals/module-externals-in-async-chunk/index.js b/test/configCases/externals/module-externals-in-async-chunk/index.js
@@ -0,0 +1,20 @@
+it("Should place externals into its own chunks when externalsType is module", function (done) {
+	var fs = require("fs");
+
+	expect(__webpack_modules__["external"]).toBeUndefined();
+	expect(__webpack_modules__["external2"]).toBeUndefined();
+	expect(__webpack_modules__["external3"]).toBeDefined();
+
+	import(/* webpackChunkName: 'async' */ "./chunk").then((ns) => {
+		expect(__webpack_modules__["external"]).toBeDefined();
+		expect(__webpack_modules__["external2"]).toBeDefined();
+		expect(ns.readFileSync).toBe(fs.readFileSync);
+		expect(ns.readFile).toBe(fs.readFile);
+
+		import("external3").then((ns) => {
+			expect(ns.writeFile).toBe(fs.writeFile);
+
+			done();
+		});
+	});
+});
diff --git a/test/configCases/externals/module-externals-in-async-chunk/test.filter.js b/test/configCases/externals/module-externals-in-async-chunk/test.filter.js
@@ -0,0 +1,5 @@
+"use strict";
+
+const supportsRequireInModule = require("../../../helpers/supportsRequireInModule");
+
+module.exports = () => supportsRequireInModule();
diff --git a/test/configCases/externals/module-externals-in-async-chunk/webpack.config.js b/test/configCases/externals/module-externals-in-async-chunk/webpack.config.js
@@ -0,0 +1,19 @@
+"use strict";
+
+/** @type {import("../../../../").Configuration} */
+module.exports = {
+	externals: {
+		external: "fs",
+		external2: "node:fs",
+		external3: "fs"
+	},
+	externalsType: "module-import",
+	experiments: {
+		outputModule: true
+	},
+	output: { chunkFilename: "[name].mjs" },
+	optimization: {
+		moduleIds: "named",
+		concatenateModules: false
+	}
+};
diff --git a/types.d.ts b/types.d.ts
@@ -5711,6 +5711,7 @@ declare class ExternalModule extends Module {
 		unsafeCacheData: UnsafeCacheData,
 		normalModuleFactory: NormalModuleFactory
 	): void;
+	static getCompilationHooks(compilation: Compilation): ExternalModuleHooks;
 	static ModuleExternalInitFragment: typeof ModuleExternalInitFragment;
 	static getExternalModuleNodeCommonjsInitFragment: (
 		runtimeTemplate: RuntimeTemplate
@@ -5722,6 +5723,9 @@ declare class ExternalModule extends Module {
 	 */
 	static getSourceBasicTypes(module: Module): ReadonlySet<string>;
 }
+declare interface ExternalModuleHooks {
+	chunkCondition: SyncBailHook<[Chunk, Compilation], boolean>;
+}
 declare interface ExternalModuleInfo {
 	type: "external";
 	module: Module;
