Merge pull request #7093 from slavab89/add-assets-by-chunk-groups

Add assets by chunk groups to stats JSON

lib/Stats.js

@@ -135,6 +135,10 @@ class Stats {
 		const showBuiltAt = optionOrLocalFallback(options.builtAt, true);
 		const showAssets = optionOrLocalFallback(options.assets, true);
 		const showEntrypoints = optionOrLocalFallback(options.entrypoints, true);
+		const showChunkGroups = optionOrLocalFallback(
+			options.chunkGroups,
+			!forToString
+		);
 		const showChunks = optionOrLocalFallback(options.chunks, !forToString);
 		const showChunkModules = optionOrLocalFallback(options.chunkModules, true);
 		const showChunkOrigins = optionOrLocalFallback(
@@ -396,15 +400,15 @@ class Stats {
 			obj.assets.sort(sortByField(sortAssets));
 		}
 
-		if (showEntrypoints) {
-			obj.entrypoints = {};
-			for (const keyValuePair of compilation.entrypoints) {
+		const fnChunkGroup = groupMap => {
+			const obj = {};
+			for (const keyValuePair of groupMap) {
 				const name = keyValuePair[0];
-				const ep = keyValuePair[1];
-				const children = ep.getChildrenByOrders();
-				obj.entrypoints[name] = {
-					chunks: ep.chunks.map(c => c.id),
-					assets: ep.chunks.reduce(
+				const cg = keyValuePair[1];
+				const children = cg.getChildrenByOrders();
+				obj[name] = {
+					chunks: cg.chunks.map(c => c.id),
+					assets: cg.chunks.reduce(
 						(array, c) => array.concat(c.files || []),
 						[]
 					),
@@ -436,9 +440,19 @@ class Stats {
 					}, Object.create(null))
 				};
 				if (showPerformance) {
-					obj.entrypoints[name].isOverSizeLimit = ep.isOverSizeLimit;
+					obj[name].isOverSizeLimit = cg.isOverSizeLimit;
 				}
 			}
+
+			return obj;
+		};
+
+		if (showEntrypoints) {
+			obj.entrypoints = fnChunkGroup(compilation.entrypoints);
+		}
+
+		if (showChunkGroups) {
+			obj.namedChunkGroups = fnChunkGroup(compilation.namedChunkGroups);
 		}
 
 		const fnModule = module => {
@@ -866,22 +880,23 @@ class Stats {
 			colors.normal(obj.filteredAssets !== 1 ? " assets" : " asset");
 			newline();
 		}
-		if (obj.entrypoints) {
-			for (const name of Object.keys(obj.entrypoints)) {
-				const ep = obj.entrypoints[name];
-				colors.normal("Entrypoint ");
+
+		const processChunkGroups = (namedGroups, prefix) => {
+			for (const name of Object.keys(namedGroups)) {
+				const cg = namedGroups[name];
+				colors.normal(`${prefix} `);
 				colors.bold(name);
-				if (ep.isOverSizeLimit) {
+				if (cg.isOverSizeLimit) {
 					colors.normal(" ");
 					colors.yellow("[big]");
 				}
 				colors.normal(" =");
-				for (const asset of ep.assets) {
+				for (const asset of cg.assets) {
 					colors.normal(" ");
 					colors.green(asset);
 				}
-				for (const name of Object.keys(ep.childAssets)) {
-					const assets = ep.childAssets[name];
+				for (const name of Object.keys(cg.childAssets)) {
+					const assets = cg.childAssets[name];
 					if (assets && assets.length > 0) {
 						colors.normal(" ");
 						colors.magenta(`(${name}:`);
@@ -894,7 +909,25 @@ class Stats {
 				}
 				newline();
 			}
+		};
+
+		if (obj.entrypoints) {
+			processChunkGroups(obj.entrypoints, "Entrypoint");
 		}
+
+		if (obj.namedChunkGroups) {
+			let outputChunkGroups = obj.namedChunkGroups;
+			if (obj.entrypoints) {
+				outputChunkGroups = Object.keys(outputChunkGroups)
+					.filter(name => !obj.entrypoints[name])
+					.reduce((result, name) => {
+						result[name] = obj.namedChunkGroups[name];
+						return result;
+					}, {});
+			}
+			processChunkGroups(outputChunkGroups, "Chunk Group");
+		}
+
 		const modulesByIdentifier = {};
 		if (obj.modules) {
 			for (const module of obj.modules) {
@@ -1260,6 +1293,7 @@ class Stats {
 			case "verbose":
 				return {
 					entrypoints: true,
+					chunkGroups: true,
 					modules: false,
 					chunks: true,
 					chunkModules: true,
@@ -1278,6 +1312,7 @@ class Stats {
 			case "detailed":
 				return {
 					entrypoints: true,
+					chunkGroups: true,
 					chunks: true,
 					chunkModules: false,
 					chunkOrigins: true,

schemas/WebpackOptions.json

@@ -1853,6 +1853,10 @@
               "type": "boolean",
               "description": "Display the entry points with the corresponding bundles"
             },
+            "chunkGroups": {
+              "type": "boolean",
+              "description": "Display all chunk groups with the corresponding bundles"
+            },
             "errorDetails": {
               "type": "boolean",
               "description": "add details to errors (like resolving log)"

test/Stats.unittest.js

@@ -116,6 +116,7 @@ describe(
 					warnings: [],
 					assets: [],
 					entrypoints: new Map(),
+					namedChunkGroups: new Map(),
 					chunks: [],
 					modules: [],
 					children: [],
@@ -142,6 +143,7 @@ describe(
 					assets: [],
 					entrypoints: new Map(),
 					chunks: [],
+					namedChunkGroups: new Map(),
 					modules: [],
 					children: [],
 					hash: "1234",
@@ -162,6 +164,7 @@ describe(
 					children: [],
 					chunks: [],
 					entrypoints: {},
+					namedChunkGroups: {},
 					filteredAssets: 0,
 					filteredModules: 0,
 					errors: [],

test/statsCases/named-chunk-groups/a.js

@@ -0,0 +1,3 @@
+import "./shared";
+
+export default "a";

test/statsCases/named-chunk-groups/b.js

@@ -0,0 +1,3 @@
+import "./shared";
+
+export default "b";

test/statsCases/named-chunk-groups/c.js

@@ -0,0 +1,4 @@
+import "x";
+import "y";
+
+export default "c";

test/statsCases/named-chunk-groups/expected.txt

@@ -0,0 +1,50 @@
+Child
+    Chunk Group main = main.js
+    Chunk Group async-a = async-a~async-b.js async-a.js
+    Chunk Group async-b = async-a~async-b.js async-b.js
+    Chunk Group async-c = vendors.js async-c.js
+    chunk    {0} async-a~async-b.js (async-a~async-b) 133 bytes <{5}> ={1}= ={2}= [rendered] split chunk (cache group: default) (name: async-a~async-b)
+        > ./a [6] ./index.js 1:0-47
+        > ./b [6] ./index.js 2:0-47
+     [0] ./shared.js 133 bytes {0} [built]
+    chunk    {1} async-a.js (async-a) 40 bytes <{5}> ={0}= [rendered]
+        > ./a [6] ./index.js 1:0-47
+     [3] ./a.js 40 bytes {1} [built]
+    chunk    {2} async-b.js (async-b) 40 bytes <{5}> ={0}= [rendered]
+        > ./b [6] ./index.js 2:0-47
+     [4] ./b.js 40 bytes {2} [built]
+    chunk    {3} async-c.js (async-c) 45 bytes <{5}> ={4}= [rendered]
+        > ./c [6] ./index.js 3:0-47
+     [5] ./c.js 45 bytes {3} [built]
+    chunk    {4} vendors.js (vendors) 40 bytes <{5}> ={3}= [rendered] split chunk (cache group: vendors) (name: vendors)
+        > ./c [6] ./index.js 3:0-47
+     [1] ./node_modules/x.js 20 bytes {4} [built]
+     [2] ./node_modules/y.js 20 bytes {4} [built]
+    chunk    {5} main.js (main) 146 bytes >{0}< >{1}< >{2}< >{3}< >{4}< [entry] [rendered]
+        > ./ main
+     [6] ./index.js 146 bytes {5} [built]
+Child
+    Entrypoint main = main.js
+    Chunk Group async-a = async-a~async-b.js async-a.js
+    Chunk Group async-b = async-a~async-b.js async-b.js
+    Chunk Group async-c = vendors.js async-c.js
+    chunk    {0} async-a~async-b.js (async-a~async-b) 133 bytes <{5}> ={1}= ={2}= [rendered] split chunk (cache group: default) (name: async-a~async-b)
+        > ./a [6] ./index.js 1:0-47
+        > ./b [6] ./index.js 2:0-47
+     [0] ./shared.js 133 bytes {0} [built]
+    chunk    {1} async-a.js (async-a) 40 bytes <{5}> ={0}= [rendered]
+        > ./a [6] ./index.js 1:0-47
+     [3] ./a.js 40 bytes {1} [built]
+    chunk    {2} async-b.js (async-b) 40 bytes <{5}> ={0}= [rendered]
+        > ./b [6] ./index.js 2:0-47
+     [4] ./b.js 40 bytes {2} [built]
+    chunk    {3} async-c.js (async-c) 45 bytes <{5}> ={4}= [rendered]
+        > ./c [6] ./index.js 3:0-47
+     [5] ./c.js 45 bytes {3} [built]
+    chunk    {4} vendors.js (vendors) 40 bytes <{5}> ={3}= [rendered] split chunk (cache group: vendors) (name: vendors)
+        > ./c [6] ./index.js 3:0-47
+     [1] ./node_modules/x.js 20 bytes {4} [built]
+     [2] ./node_modules/y.js 20 bytes {4} [built]
+    chunk    {5} main.js (main) 146 bytes >{0}< >{1}< >{2}< >{3}< >{4}< [entry] [rendered]
+        > ./ main
+     [6] ./index.js 146 bytes {5} [built]

test/statsCases/named-chunk-groups/index.js

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

test/statsCases/named-chunk-groups/node_modules/x.js

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

test/statsCases/named-chunk-groups/node_modules/y.js

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

test/statsCases/named-chunk-groups/shared.js

@@ -0,0 +1,2 @@
+// content content content content content content content content
+// content content content content content content content content

test/statsCases/named-chunk-groups/webpack.config.js

@@ -0,0 +1,47 @@
+const stats = {
+	hash: false,
+	timings: false,
+	builtAt: false,
+	assets: false,
+	chunks: true,
+	chunkOrigins: true,
+	modules: false
+};
+
+const config = {
+	mode: "production",
+	entry: {
+		main: "./"
+	},
+	output: {
+		filename: "[name].js"
+	},
+	optimization: {
+		splitChunks: {
+			minSize: 100,
+			cacheGroups: {
+				vendors: {
+					test: /[\\/]node_modules[\\/]/,
+					chunks: "async",
+					enforce: true,
+					name: "vendors"
+				}
+			}
+		}
+	}
+};
+
+module.exports = [
+	Object.assign(
+		{
+			stats: Object.assign({ entrypoints: false, chunkGroups: true }, stats)
+		},
+		config
+	),
+	Object.assign(
+		{
+			stats: Object.assign({ entrypoints: true, chunkGroups: true }, stats)
+		},
+		config
+	)
+];