Merge pull request #7663 from webpack/feature/automatic-name-prefix

automaticNamePrefix and name merging bugfix

lib/WebpackOptionsDefaulter.js

@@ -241,11 +241,13 @@ class WebpackOptionsDefaulter extends OptionsDefaulter {
 		this.set("optimization.splitChunks.name", true);
 		this.set("optimization.splitChunks.cacheGroups", {});
 		this.set("optimization.splitChunks.cacheGroups.default", {
+			automaticNamePrefix: "",
 			reuseExistingChunk: true,
 			minChunks: 2,
 			priority: -20
 		});
 		this.set("optimization.splitChunks.cacheGroups.vendors", {
+			automaticNamePrefix: "vendors",
 			test: /[\\/]node_modules[\\/]/,
 			priority: -10
 		});

lib/optimize/SplitChunksPlugin.js

@@ -115,15 +115,11 @@ module.exports = class SplitChunksPlugin {
 			minChunks: options.minChunks || 1,
 			maxAsyncRequests: options.maxAsyncRequests || 1,
 			maxInitialRequests: options.maxInitialRequests || 1,
-			getName:
-				SplitChunksPlugin.normalizeName({
-					name: options.name,
-					automaticNameDelimiter: options.automaticNameDelimiter
-				}) || (() => {}),
 			hidePathInfo: options.hidePathInfo || false,
 			filename: options.filename || undefined,
 			getCacheGroups: SplitChunksPlugin.normalizeCacheGroups({
 				cacheGroups: options.cacheGroups,
+				name: options.name,
 				automaticNameDelimiter: options.automaticNameDelimiter
 			}),
 			automaticNameDelimiter: options.automaticNameDelimiter,
@@ -134,7 +130,7 @@ module.exports = class SplitChunksPlugin {
 		};
 	}
 
-	static normalizeName({ name, automaticNameDelimiter }) {
+	static normalizeName({ name, automaticNameDelimiter, automaticNamePrefix }) {
 		if (name === true) {
 			/** @type {WeakMap<Chunk[], Record<string, string>>} */
 			const cache = new WeakMap();
@@ -152,10 +148,12 @@ module.exports = class SplitChunksPlugin {
 					return;
 				}
 				names.sort();
-				let name =
-					(cacheGroup && cacheGroup !== "default"
-						? cacheGroup + automaticNameDelimiter
-						: "") + names.join(automaticNameDelimiter);
+				const prefix =
+					typeof automaticNamePrefix === "string"
+						? automaticNamePrefix
+						: cacheGroup;
+				const namePrefix = prefix ? prefix + automaticNameDelimiter : "";
+				let name = namePrefix + names.join(automaticNameDelimiter);
 				// Filenames and paths can't be too long otherwise an
 				// ENAMETOOLONG error is raised. If the generated name if too
 				// long, it is truncated and a hash is appended. The limit has
@@ -212,7 +210,7 @@ module.exports = class SplitChunksPlugin {
 		};
 	}
 
-	static normalizeCacheGroups({ cacheGroups, automaticNameDelimiter }) {
+	static normalizeCacheGroups({ cacheGroups, name, automaticNameDelimiter }) {
 		if (typeof cacheGroups === "function") {
 			// TODO webpack 5 remove this
 			if (cacheGroups.length !== 1) {
@@ -251,10 +249,15 @@ module.exports = class SplitChunksPlugin {
 						results.push({
 							key: key,
 							priority: option.priority,
-							getName: SplitChunksPlugin.normalizeName({
-								name: option.name,
-								automaticNameDelimiter
-							}),
+							getName:
+								SplitChunksPlugin.normalizeName({
+									name: option.name || name,
+									automaticNameDelimiter:
+										typeof option.automaticNameDelimiter === "string"
+											? option.automaticNameDelimiter
+											: automaticNameDelimiter,
+									automaticNamePrefix: option.automaticNamePrefix
+								}) || (() => {}),
 							chunksFilter: SplitChunksPlugin.normalizeChunksFilter(
 								option.chunks
 							),
@@ -487,6 +490,12 @@ module.exports = class SplitChunksPlugin {
 									chunksKeys: new Set()
 								})
 							);
+						} else {
+							if (info.cacheGroup !== cacheGroup) {
+								if (info.cacheGroup.priority < cacheGroup.priority) {
+									info.cacheGroup = cacheGroup;
+								}
+							}
 						}
 						info.modules.add(module);
 						info.size += module.size();

schemas/WebpackOptions.json

@@ -1529,6 +1529,15 @@
                               }
                             ]
                           },
+                          "automaticNameDelimiter": {
+                            "description": "Sets the name delimiter for created chunks",
+                            "type": "string",
+                            "minLength": 1
+                          },
+                          "automaticNamePrefix": {
+                            "description": "Sets the name prefix for created chunks",
+                            "type": "string"
+                          },
                           "filename": {
                             "description": "Sets the template for the filename for created chunks (Only works for initial chunks)",
                             "type": "string",

test/__snapshots__/StatsTestCases.test.js.snap

@@ -2671,6 +2671,41 @@ Child custom-chunks-filter-in-cache-groups:
      [5] ./c.js 72 bytes {3} {8} [built]"
 `;
 
+exports[`StatsTestCases should print correct stats for split-chunks-automatic-name 1`] = `
+"Entrypoint main = main.js
+chunk    {0} common~async-a~async-b~async-c.js (common~async-a~async-b~async-c) 40 bytes <{7}> ={1}= ={2}= ={3}= ={4}= ={5}= ={6}= [rendered] split chunk (cache group: vendors) (name: common~async-a~async-b~async-c)
+    > ./a [8] ./index.js 1:0-47
+    > ./b [8] ./index.js 2:0-47
+    > ./c [8] ./index.js 3:0-47
+ [0] ./d.js 20 bytes {0} [built]
+ [1] ./node_modules/x.js 20 bytes {0} [built]
+chunk    {1} common~async-b~async-c.js (common~async-b~async-c) 20 bytes <{7}> ={0}= ={2}= ={4}= ={5}= ={6}= [rendered] split chunk (cache group: vendors) (name: common~async-b~async-c)
+    > ./b [8] ./index.js 2:0-47
+    > ./c [8] ./index.js 3:0-47
+ [3] ./f.js 20 bytes {1} [built]
+chunk    {2} common~async-a~async-b.js (common~async-a~async-b) 20 bytes <{7}> ={0}= ={1}= ={3}= ={4}= [rendered] split chunk (cache group: vendors) (name: common~async-a~async-b)
+    > ./a [8] ./index.js 1:0-47
+    > ./b [8] ./index.js 2:0-47
+ [2] ./node_modules/y.js 20 bytes {2} [built]
+chunk    {3} async-a.js (async-a) 107 bytes <{7}> ={0}= ={2}= [rendered]
+    > ./a [8] ./index.js 1:0-47
+ [7] ./a.js + 1 modules 107 bytes {3} [built]
+     | ./a.js 72 bytes [built]
+     | ./e.js 20 bytes [built]
+chunk    {4} async-b.js (async-b) 72 bytes <{7}> ={0}= ={1}= ={2}= [rendered]
+    > ./b [8] ./index.js 2:0-47
+ [5] ./b.js 72 bytes {4} [built]
+chunk    {5} async-c.js (async-c) 72 bytes <{7}> ={0}= ={1}= ={6}= [rendered]
+    > ./c [8] ./index.js 3:0-47
+ [6] ./c.js 72 bytes {5} [built]
+chunk    {6} common~async-c.js (common~async-c) 20 bytes <{7}> ={0}= ={1}= ={5}= [rendered] split chunk (cache group: vendors) (name: common~async-c)
+    > ./c [8] ./index.js 3:0-47
+ [4] ./node_modules/z.js 20 bytes {6} [built]
+chunk    {7} main.js (main) 147 bytes >{0}< >{1}< >{2}< >{3}< >{4}< >{5}< >{6}< [entry] [rendered]
+    > ./ main
+ [8] ./index.js 147 bytes {7} [built]"
+`;
+
 exports[`StatsTestCases should print correct stats for split-chunks-combinations 1`] = `
 "Entrypoint main = main.js
 chunk    {0} async-a~async-b.js (async-a~async-b) 134 bytes <{8}> ={1}= ={2}= [rendered] split chunk (cache group: default) (name: async-a~async-b)

test/statsCases/split-chunks-automatic-name/a.js

@@ -0,0 +1,5 @@
+import "./d";
+import "./e";
+import "x";
+import "y";
+export default "a";

test/statsCases/split-chunks-automatic-name/b.js

@@ -0,0 +1,5 @@
+import "./d";
+import "./f";
+import "x";
+import "y";
+export default "b";

test/statsCases/split-chunks-automatic-name/c.js

@@ -0,0 +1,5 @@
+import "./d";
+import "./f";
+import "x";
+import "z";
+export default "c";

test/statsCases/split-chunks-automatic-name/d.js

@@ -0,0 +1 @@
+export default "d";

test/statsCases/split-chunks-automatic-name/e.js

@@ -0,0 +1 @@
+export default "e";

test/statsCases/split-chunks-automatic-name/f.js

@@ -0,0 +1 @@
+export default "f";

test/statsCases/split-chunks-automatic-name/index.js

@@ -0,0 +1,3 @@
+import(/* webpackChunkName: "async-a" */ "./a");
+import(/* webpackChunkName: "async-b" */ "./b");
+import(/* webpackChunkName: "async-c" */ "./c");

test/statsCases/split-chunks-automatic-name/webpack.config.js

@@ -0,0 +1,37 @@
+const stats = {
+	hash: false,
+	timings: false,
+	builtAt: false,
+	assets: false,
+	chunks: true,
+	chunkOrigins: true,
+	entrypoints: true,
+	modules: false
+};
+module.exports = {
+	name: "production",
+	mode: "production",
+	entry: {
+		main: "./"
+	},
+	optimization: {
+		splitChunks: {
+			chunks: "all",
+			minSize: 1,
+			cacheGroups: {
+				default: {
+					automaticNamePrefix: "common",
+					reuseExistingChunk: true,
+					minChunks: 2,
+					priority: -20
+				},
+				vendors: {
+					automaticNamePrefix: "common",
+					test: /[\\/]node_modules[\\/]/,
+					priority: -10
+				}
+			}
+		}
+	},
+	stats
+};