Merge pull request #9285 from ryandrew14/master

feat: introduce name truncation config option for SplitChunksPlugin

declarations/WebpackOptions.d.ts

@@ -870,6 +870,10 @@ export interface OptimizationSplitChunksOptions {
 	 * Sets the name delimiter for created chunks
 	 */
 	automaticNameDelimiter?: string;
+	/**
+	 * Sets the max length for the name of a created chunk
+	 */
+	automaticNameMaxLength?: number;
 	/**
 	 * Assign modules to a cache group (modules from different cache groups are tried to keep in separate chunks)
 	 */
@@ -887,6 +891,10 @@ export interface OptimizationSplitChunksOptions {
 					 * Sets the name delimiter for created chunks
 					 */
 					automaticNameDelimiter?: string;
+					/**
+					 * Sets the max length for the name of a created chunk
+					 */
+					automaticNameMaxLength?: number;
 					/**
 					 * Sets the name prefix for created chunks
 					 */

lib/WebpackOptionsDefaulter.js

@@ -231,6 +231,7 @@ class WebpackOptionsDefaulter extends OptionsDefaulter {
 			return isProductionLikeMode(options) ? 5 : Infinity;
 		});
 		this.set("optimization.splitChunks.automaticNameDelimiter", "~");
+		this.set("optimization.splitChunks.automaticNameMaxLength", 109);
 		this.set("optimization.splitChunks.maxInitialRequests", "make", options => {
 			return isProductionLikeMode(options) ? 3 : Infinity;
 		});

lib/optimize/SplitChunksPlugin.js

@@ -123,17 +123,24 @@ module.exports = class SplitChunksPlugin {
 			getCacheGroups: SplitChunksPlugin.normalizeCacheGroups({
 				cacheGroups: options.cacheGroups,
 				name: options.name,
-				automaticNameDelimiter: options.automaticNameDelimiter
+				automaticNameDelimiter: options.automaticNameDelimiter,
+				automaticNameMaxLength: options.automaticNameMaxLength
 			}),
 			automaticNameDelimiter: options.automaticNameDelimiter,
+			automaticNameMaxLength: options.automaticNameMaxLength || 109,
 			fallbackCacheGroup: SplitChunksPlugin.normalizeFallbackCacheGroup(
 				options.fallbackCacheGroup || {},
 				options
 			)
 		};
 	}
 
-	static normalizeName({ name, automaticNameDelimiter, automaticNamePrefix }) {
+	static normalizeName({
+		name,
+		automaticNameDelimiter,
+		automaticNamePrefix,
+		automaticNameMaxLength
+	}) {
 		if (name === true) {
 			/** @type {WeakMap<Chunk[], Record<string, string>>} */
 			const cache = new WeakMap();
@@ -160,11 +167,17 @@ module.exports = class SplitChunksPlugin {
 				// 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
-				// been set to 100 to prevent `[name].[chunkhash].[ext]` from
+				// been set to 109 to prevent `[name].[chunkhash].[ext]` from
 				// generating a 256+ character string.
-				if (name.length > 100) {
+				if (name.length > automaticNameMaxLength) {
+					const hashedFilename = hashFilename(name);
+					const sliceLength =
+						automaticNameMaxLength -
+						(automaticNameDelimiter.length + hashedFilename.length);
 					name =
-						name.slice(0, 100) + automaticNameDelimiter + hashFilename(name);
+						name.slice(0, sliceLength) +
+						automaticNameDelimiter +
+						hashFilename(name);
 				}
 				cacheEntry[cacheGroup] = name;
 				return name;
@@ -213,7 +226,12 @@ module.exports = class SplitChunksPlugin {
 		};
 	}
 
-	static normalizeCacheGroups({ cacheGroups, name, automaticNameDelimiter }) {
+	static normalizeCacheGroups({
+		cacheGroups,
+		name,
+		automaticNameDelimiter,
+		automaticNameMaxLength
+	}) {
 		if (typeof cacheGroups === "function") {
 			// TODO webpack 5 remove this
 			if (cacheGroups.length !== 1) {
@@ -259,7 +277,9 @@ module.exports = class SplitChunksPlugin {
 										typeof option.automaticNameDelimiter === "string"
 											? option.automaticNameDelimiter
 											: automaticNameDelimiter,
-									automaticNamePrefix: option.automaticNamePrefix
+									automaticNamePrefix: option.automaticNamePrefix,
+									automaticNameMaxLength:
+										option.automaticNameMaxLength || automaticNameMaxLength
 								}) || (() => {}),
 							chunksFilter: SplitChunksPlugin.normalizeChunksFilter(
 								option.chunks

schemas/WebpackOptions.json

@@ -553,6 +553,11 @@
           "type": "string",
           "minLength": 1
         },
+        "automaticNameMaxLength": {
+          "description": "Sets the max length for the name of a created chunk",
+          "type": "number",
+          "minimum": 1
+        },
         "cacheGroups": {
           "description": "Assign modules to a cache group (modules from different cache groups are tried to keep in separate chunks)",
           "type": "object",
@@ -582,6 +587,11 @@
                     "type": "string",
                     "minLength": 1
                   },
+                  "automaticNameMaxLength": {
+                    "description": "Sets the max length for the name of a created chunk",
+                    "type": "number",
+                    "minimum": 1
+                  },
                   "automaticNamePrefix": {
                     "description": "Sets the name prefix for created chunks",
                     "type": "string"

test/__snapshots__/StatsTestCases.test.js.snap

@@ -2569,6 +2569,72 @@ Child name-too-long:
     chunk   {12} main.js (main) 147 bytes >{0}< >{1}< >{2}< >{3}< >{4}< >{5}< >{6}< >{7}< [entry] [rendered]
         > ./ main
      [4] ./index.js 147 bytes {12} [built]
+Child name-too-long-limited:
+    Entrypoint main = main.js
+    Entrypoint aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa = vendors~aaaaaaaaaaaaa~50ebc41f.js vendors~aaaaaaaaaaaaa~d5401bd9.js aaaaaaaaaaaaaaaaaaaaa~18066793.js async-a.js aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.js
+    Entrypoint bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb = vendors~aaaaaaaaaaaaa~50ebc41f.js vendors~aaaaaaaaaaaaa~d5401bd9.js aaaaaaaaaaaaaaaaaaaaa~18066793.js async-b~async-c~async~6bcb5da8.js async-b.js bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb.js
+    Entrypoint cccccccccccccccccccccccccccccc = vendors~aaaaaaaaaaaaa~50ebc41f.js vendors~async-c~ccccc~077ca948.js aaaaaaaaaaaaaaaaaaaaa~18066793.js async-b~async-c~async~6bcb5da8.js async-c.js cccccccccccccccccccccccccccccc.js
+    chunk    {0} aaaaaaaaaaaaaaaaaaaaa~18066793.js (aaaaaaaaaaaaaaaaaaaaa~18066793) 20 bytes <{12}> ={1}= ={2}= ={3}= ={4}= ={5}= ={6}= ={7}= ={8}= ={10}= ={11}= >{2}< >{9}< [initial] [rendered] split chunk (cache group: default) (name: aaaaaaaaaaaaaaaaaaaaa~18066793)
+        > ./a [4] ./index.js 1:0-47
+        > ./b [4] ./index.js 2:0-47
+        > ./c [4] ./index.js 3:0-47
+        > ./a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+        > ./b bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+        > ./c cccccccccccccccccccccccccccccc
+     [0] ./d.js 20 bytes {0} [built]
+    chunk    {1} vendors~aaaaaaaaaaaaa~50ebc41f.js (vendors~aaaaaaaaaaaaa~50ebc41f) 20 bytes <{12}> ={0}= ={2}= ={3}= ={4}= ={5}= ={6}= ={7}= ={8}= ={10}= ={11}= >{2}< >{9}< [initial] [rendered] split chunk (cache group: vendors) (name: vendors~aaaaaaaaaaaaa~50ebc41f)
+        > ./a [4] ./index.js 1:0-47
+        > ./b [4] ./index.js 2:0-47
+        > ./c [4] ./index.js 3:0-47
+        > ./a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+        > ./b bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+        > ./c cccccccccccccccccccccccccccccc
+     [1] ./node_modules/x.js 20 bytes {1} [built]
+    chunk    {2} async-b~async-c~async~6bcb5da8.js (async-b~async-c~async~6bcb5da8) 20 bytes <{0}> <{1}> <{3}> <{4}> <{8}> <{12}> ={0}= ={1}= ={3}= ={5}= ={6}= ={7}= ={9}= ={10}= ={11}= [initial] [rendered] split chunk (cache group: default) (name: async-b~async-c~async~6bcb5da8)
+        > ./b [4] ./index.js 2:0-47
+        > ./c [4] ./index.js 3:0-47
+        > ./g [] 6:0-47
+        > ./g [] 6:0-47
+        > ./b bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+        > ./c cccccccccccccccccccccccccccccc
+     [2] ./f.js 20 bytes {2} [built]
+    chunk    {3} vendors~aaaaaaaaaaaaa~d5401bd9.js (vendors~aaaaaaaaaaaaa~d5401bd9) 20 bytes <{12}> ={0}= ={1}= ={2}= ={4}= ={5}= ={8}= ={10}= >{2}< >{9}< [initial] [rendered] split chunk (cache group: vendors) (name: vendors~aaaaaaaaaaaaa~d5401bd9)
+        > ./a [4] ./index.js 1:0-47
+        > ./b [4] ./index.js 2:0-47
+        > ./a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+        > ./b bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+     [3] ./node_modules/y.js 20 bytes {3} [built]
+    chunk    {4} async-a.js (async-a) 156 bytes <{12}> ={0}= ={1}= ={3}= ={8}= >{2}< >{9}< [initial] [rendered] reused as split chunk (cache group: default)
+        > ./a [4] ./index.js 1:0-47
+        > ./a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+     [8] ./a.js + 1 modules 156 bytes {4} [built]
+         | ./a.js 121 bytes [built]
+         | ./e.js 20 bytes [built]
+    chunk    {5} async-b.js (async-b) 72 bytes <{12}> ={0}= ={1}= ={2}= ={3}= ={10}= [initial] [rendered] reused as split chunk (cache group: default)
+        > ./b [4] ./index.js 2:0-47
+        > ./b bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+     [5] ./b.js 72 bytes {5} [built]
+    chunk    {6} async-c.js (async-c) 72 bytes <{12}> ={0}= ={1}= ={2}= ={7}= ={11}= [initial] [rendered] reused as split chunk (cache group: default)
+        > ./c [4] ./index.js 3:0-47
+        > ./c cccccccccccccccccccccccccccccc
+     [6] ./c.js 72 bytes {6} [built]
+    chunk    {7} vendors~async-c~ccccc~077ca948.js (vendors~async-c~ccccc~077ca948) 20 bytes <{12}> ={0}= ={1}= ={2}= ={6}= ={11}= [initial] [rendered] split chunk (cache group: vendors) (name: vendors~async-c~ccccc~077ca948)
+        > ./c [4] ./index.js 3:0-47
+        > ./c cccccccccccccccccccccccccccccc
+     [7] ./node_modules/z.js 20 bytes {7} [built]
+    chunk    {8} aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.js (aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa) 0 bytes ={0}= ={1}= ={3}= ={4}= >{2}< >{9}< [entry] [rendered]
+        > ./a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+    chunk    {9} async-g.js (async-g) 34 bytes <{0}> <{1}> <{3}> <{4}> <{8}> ={2}= [rendered]
+        > ./g [] 6:0-47
+        > ./g [] 6:0-47
+     [9] ./g.js 34 bytes {9} [built]
+    chunk   {10} bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb.js (bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb) 0 bytes ={0}= ={1}= ={2}= ={3}= ={5}= [entry] [rendered]
+        > ./b bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+    chunk   {11} cccccccccccccccccccccccccccccc.js (cccccccccccccccccccccccccccccc) 0 bytes ={0}= ={1}= ={2}= ={6}= ={7}= [entry] [rendered]
+        > ./c cccccccccccccccccccccccccccccc
+    chunk   {12} main.js (main) 147 bytes >{0}< >{1}< >{2}< >{3}< >{4}< >{5}< >{6}< >{7}< [entry] [rendered]
+        > ./ main
+     [4] ./index.js 147 bytes {12} [built]
 Child custom-chunks-filter:
     Entrypoint main = default/main.js
     Entrypoint a = default/a.js

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

@@ -100,7 +100,28 @@ module.exports = [
 		},
 		stats
 	},
-
+	{
+		name: "name-too-long-limited",
+		mode: "production",
+		entry: {
+			main: "./",
+			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa: "./a",
+			bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb: "./b",
+			cccccccccccccccccccccccccccccc: "./c"
+		},
+		output: {
+			filename: "[name].js"
+		},
+		optimization: {
+			splitChunks: {
+				minSize: 0,
+				maxInitialRequests: Infinity,
+				chunks: "all",
+				automaticNameMaxLength: 30
+			}
+		},
+		stats
+	},
 	{
 		name: "custom-chunks-filter",
 		mode: "production",