display assets in stats in a list instead of a table

group related assets below the parent asset
webpack · Aug 2, 2020 · d0ef2ce · d0ef2ce
1 parent f5bd621
commit d0ef2ce
Show file tree

Hide file tree

Showing 16 changed files with 612 additions and 508 deletions.
diff --git a/declarations/WebpackOptions.d.ts b/declarations/WebpackOptions.d.ts
@@ -1954,6 +1954,10 @@ export interface StatsOptions {
 	 * Add information about the reasons why modules are included.
 	 */
 	reasons?: boolean;
+	/**
+	 * Add information about assets that are related to other assets (like SourceMaps for assets).
+	 */
+	relatedAssets?: boolean;
 	/**
 	 * Add information about runtime modules.
 	 */

diff --git a/lib/stats/DefaultStatsFactoryPlugin.js b/lib/stats/DefaultStatsFactoryPlugin.js
@@ -39,6 +39,8 @@ const identifierUtils = require("../util/identifier");
 /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
 /** @typedef {import("./StatsFactory")} StatsFactory */
 
+/** @typedef {Asset & { type: string, related: ExtendedAsset[] }} ExtendedAsset */
+
 /**
  * @typedef {Object} UsualContext
  * @property {string} type
@@ -75,7 +77,7 @@ const identifierUtils = require("../util/identifier");
 /**
  * @typedef {Object} SimpleExtractors
  * @property {ExtractorsByOption<Compilation>} compilation
- * @property {ExtractorsByOption<Asset>} asset
+ * @property {ExtractorsByOption<ExtendedAsset>} asset
  * @property {ExtractorsByOption<{ name: string, chunkGroup: ChunkGroup }>} chunkGroup
  * @property {ExtractorsByOption<Module>} module
  * @property {ExtractorsByOption<Module>} moduleIssuer
@@ -256,7 +258,6 @@ const SIMPLE_EXTRACTORS = {
 		},
 		assets: (object, compilation, context, options, factory) => {
 			const { type } = context;
-			const array = compilation.getAssets();
 			/** @type {Map<string, Chunk[]>} */
 			const compilationFileToChunks = new Map();
 			/** @type {Map<string, Chunk[]>} */
@@ -279,12 +280,42 @@ const SIMPLE_EXTRACTORS = {
 					array.push(chunk);
 				}
 			}
-			object.assets = factory.create(`${type}.assets`, array, {
+			/** @type {Map<string, ExtendedAsset>} */
+			const assetMap = new Map();
+			const assets = new Set();
+			for (const asset of compilation.getAssets()) {
+				const item = {
+					...asset,
+					type: "asset",
+					related: undefined
+				};
+				assets.add(item);
+				assetMap.set(asset.name, item);
+			}
+			for (const item of assetMap.values()) {
+				const related = item.info.related;
+				if (!related) continue;
+				for (const type of Object.keys(related)) {
+					const relatedEntry = related[type];
+					const deps = Array.isArray(relatedEntry)
+						? relatedEntry
+						: [relatedEntry];
+					for (const dep of deps) {
+						const depItem = assetMap.get(dep);
+						if (!depItem) continue;
+						assets.delete(depItem);
+						depItem.type = type;
+						item.related = item.related || [];
+						item.related.push(depItem);
+					}
+				}
+			}
+			object.assets = factory.create(`${type}.assets`, Array.from(assets), {
 				...context,
 				compilationFileToChunks,
 				compilationAuxiliaryFileToChunks
 			});
-			object.filteredAssets = array.length - object.assets.length;
+			object.filteredAssets = assets.size - object.assets.length;
 			object.assetsByChunkName = {};
 			for (const asset of object.assets) {
 				for (const name of asset.chunkNames) {
@@ -498,6 +529,7 @@ const SIMPLE_EXTRACTORS = {
 			asset,
 			{ compilation, compilationFileToChunks, compilationAuxiliaryFileToChunks }
 		) => {
+			object.type = asset.type;
 			object.name = asset.name;
 			object.size = asset.source.size();
 			const chunks = compilationFileToChunks.get(asset.name) || [];
@@ -528,6 +560,18 @@ const SIMPLE_EXTRACTORS = {
 				asset.name
 			);
 			object.info = asset.info;
+			object.filteredRelated = asset.related ? asset.related.length : undefined;
+		},
+		relatedAssets: (object, asset, context, options, factory) => {
+			const { type } = context;
+			object.related = factory.create(
+				`${type}.related`,
+				asset.related,
+				context
+			);
+			object.filteredRelated = asset.related
+				? asset.related.length - object.related.length
+				: undefined;
 		},
 		ids: (
 			object,
@@ -987,23 +1031,26 @@ const BASE_MODULES_FILTER = {
 	}
 };
 
+const ASSETS_FILTER = {
+	excludeAssets: (asset, context, { excludeAssets }) => {
+		const ident = asset.name;
+		const excluded = excludeAssets.some(fn => fn(ident, asset));
+		if (excluded) return false;
+	},
+	"!cachedAssets": (asset, { compilation }) => {
+		if (
+			!compilation.emittedAssets.has(asset.name) &&
+			!compilation.comparedForEmitAssets.has(asset.name)
+		) {
+			return false;
+		}
+	}
+};
+
 /** @type {Record<string, Record<string, (thing: any, context: UsualContext, options: UsualOptions) => boolean | undefined>>} */
 const FILTER = {
-	"compilation.assets": {
-		excludeAssets: (asset, context, { excludeAssets }) => {
-			const ident = asset.name;
-			const excluded = excludeAssets.some(fn => fn(ident, asset));
-			if (excluded) return false;
-		},
-		"!cachedAssets": (asset, { compilation }) => {
-			if (
-				!compilation.emittedAssets.has(asset.name) &&
-				!compilation.comparedForEmitAssets.has(asset.name)
-			) {
-				return false;
-			}
-		}
-	},
+	"compilation.assets": ASSETS_FILTER,
+	"asset.related": ASSETS_FILTER,
 	"compilation.modules": {
 		excludeModules: EXCLUDE_MODULES_FILTER("module"),
 		"!orphanModules": (module, { compilation: { chunkGraph } }) => {
@@ -1192,6 +1239,15 @@ const sortByField = field => {
 	return sortFn;
 };
 
+const ASSET_SORTERS = {
+	assetsSort: (comparators, context, { assetsSort }) => {
+		comparators.push(sortByField(assetsSort));
+	},
+	_: comparators => {
+		comparators.push(compareSelect(a => a.name, compareIds));
+	}
+};
+
 /** @type {Record<string, Record<string, (comparators: Function[], context: UsualContext, options: UsualOptions) => void>>} */
 const RESULT_SORTERS = {
 	"compilation.chunks": {
@@ -1219,14 +1275,8 @@ const RESULT_SORTERS = {
 			comparators.push(sortByField(nestedModulesSort));
 		}
 	},
-	"compilation.assets": {
-		assetsSort: (comparators, context, { assetsSort }) => {
-			comparators.push(sortByField(assetsSort));
-		},
-		_: comparators => {
-			comparators.push(compareSelect(a => a.name, compareIds));
-		}
-	}
+	"compilation.assets": ASSET_SORTERS,
+	"asset.related": ASSET_SORTERS
 };
 
 /**
@@ -1270,6 +1320,7 @@ const ITEM_NAMES = {
 	"chunk.origins[]": "chunkOrigin",
 	"compilation.chunks[]": "chunk",
 	"compilation.assets[]": "asset",
+	"asset.related[]": "asset",
 	"module.issuerPath[]": "moduleIssuer",
 	"module.reasons[]": "moduleReason",
 	"module.modules[]": "module",

diff --git a/lib/stats/DefaultStatsPresetPlugin.js b/lib/stats/DefaultStatsPresetPlugin.js
@@ -20,6 +20,7 @@ const applyDefaults = (options, defaults) => {
 
 const NAMED_PRESETS = {
 	verbose: {
+		relatedAssets: true,
 		entrypoints: true,
 		chunkGroups: true,
 		ids: true,
@@ -45,6 +46,7 @@ const NAMED_PRESETS = {
 		maxModules: Infinity
 	},
 	detailed: {
+		relatedAssets: true,
 		entrypoints: true,
 		chunkGroups: true,
 		ids: true,
@@ -133,6 +135,7 @@ const DEFAULTS = {
 		return true;
 	},
 	nestedModules: OFF_FOR_TO_STRING,
+	relatedAssets: OFF_FOR_TO_STRING,
 	orphanModules: NORMAL_OFF,
 	moduleAssets: OFF_FOR_TO_STRING,
 	depth: OFF_FOR_TO_STRING,