From d9683a8193f186e80362c05636247dc6f7005974 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 29 Mar 2023 08:27:14 +0530 Subject: [PATCH 1/5] fix: limit external module readable identifier length in stats --- lib/stats/DefaultStatsFactoryPlugin.js | 72 ++++++++++++++++++++++---- 1 file changed, 63 insertions(+), 9 deletions(-) diff --git a/lib/stats/DefaultStatsFactoryPlugin.js b/lib/stats/DefaultStatsFactoryPlugin.js index 57e52703a7e..e33928f50a2 100644 --- a/lib/stats/DefaultStatsFactoryPlugin.js +++ b/lib/stats/DefaultStatsFactoryPlugin.js @@ -6,6 +6,7 @@ "use strict"; const util = require("util"); +const ExternalModule = require("../ExternalModule"); const ModuleDependency = require("../dependencies/ModuleDependency"); const formatLocation = require("../formatLocation"); const { LogType } = require("../logging/Logger"); @@ -23,6 +24,8 @@ const { } = require("../util/comparators"); const { makePathsRelative, parseResource } = require("../util/identifier"); +const MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH = 80; + /** @typedef {import("webpack-sources").Source} Source */ /** @typedef {import("../Chunk")} Chunk */ /** @typedef {import("../ChunkGroup")} ChunkGroup */ @@ -314,6 +317,24 @@ const { makePathsRelative, parseResource } = require("../util/identifier"); * @property {ExtractorsByOption} moduleTraceDependency */ +/** + * @param {string} readableIdentifier user readable identifier of the module + * @param {Module} module base module type + * @returns {string} an elided readableIdentifier, when readableIdentifier exceeds a maximum length + */ +const truncateLongExternalModuleReadableIdentifier = ( + readableIdentifier, + module +) => { + return module instanceof ExternalModule && + readableIdentifier.length > MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH + ? readableIdentifier.substring( + 0, + MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH + ) + "...(truncated)" + : readableIdentifier; +}; + /** * @template T * @template I @@ -393,7 +414,10 @@ const EXTRACT_ERROR = { } if (error.module) { object.moduleIdentifier = error.module.identifier(); - object.moduleName = error.module.readableIdentifier(requestShortener); + object.moduleName = truncateLongExternalModuleReadableIdentifier( + error.module.readableIdentifier(requestShortener), + error.module + ); } if (error.loc) { object.loc = formatLocation(error.loc); @@ -1133,7 +1157,10 @@ const SIMPLE_EXTRACTORS = { /** @type {KnownStatsModule} */ const statsModule = { identifier: module.identifier(), - name: module.readableIdentifier(requestShortener), + name: truncateLongExternalModuleReadableIdentifier( + module.readableIdentifier(requestShortener), + module + ), nameForCondition: module.nameForCondition(), index: moduleGraph.getPreOrderIndex(module), preOrderIndex: moduleGraph.getPreOrderIndex(module), @@ -1146,7 +1173,12 @@ const SIMPLE_EXTRACTORS = { compilation.chunkGraph.getNumberOfModuleChunks(module) === 0, dependent: rootModules ? !rootModules.has(module) : undefined, issuer: issuer && issuer.identifier(), - issuerName: issuer && issuer.readableIdentifier(requestShortener), + issuerName: + issuer && + truncateLongExternalModuleReadableIdentifier( + issuer.readableIdentifier(requestShortener), + issuer + ), issuerPath: issuer && factory.create(`${type.slice(0, -8)}.issuerPath`, path, context), @@ -1286,7 +1318,10 @@ const SIMPLE_EXTRACTORS = { /** @type {KnownStatsModuleIssuer} */ const statsModuleIssuer = { identifier: module.identifier(), - name: module.readableIdentifier(requestShortener) + name: truncateLongExternalModuleReadableIdentifier( + module.readableIdentifier(requestShortener), + module + ) }; Object.assign(object, statsModuleIssuer); if (profile) { @@ -1308,16 +1343,25 @@ const SIMPLE_EXTRACTORS = { ? reason.originModule.identifier() : null, module: reason.originModule - ? reason.originModule.readableIdentifier(requestShortener) + ? truncateLongExternalModuleReadableIdentifier( + reason.originModule.readableIdentifier(requestShortener), + reason.originModule + ) : null, moduleName: reason.originModule - ? reason.originModule.readableIdentifier(requestShortener) + ? truncateLongExternalModuleReadableIdentifier( + reason.originModule.readableIdentifier(requestShortener), + reason.originModule + ) : null, resolvedModuleIdentifier: reason.resolvedOriginModule ? reason.resolvedOriginModule.identifier() : null, resolvedModule: reason.resolvedOriginModule - ? reason.resolvedOriginModule.readableIdentifier(requestShortener) + ? truncateLongExternalModuleReadableIdentifier( + reason.resolvedOriginModule.readableIdentifier(requestShortener), + reason.resolvedOriginModule + ) : null, type: reason.dependency ? reason.dependency.type : null, active: reason.isActive(runtime), @@ -1445,7 +1489,10 @@ const SIMPLE_EXTRACTORS = { module: origin.module ? origin.module.identifier() : "", moduleIdentifier: origin.module ? origin.module.identifier() : "", moduleName: origin.module - ? origin.module.readableIdentifier(requestShortener) + ? truncateLongExternalModuleReadableIdentifier( + origin.module.readableIdentifier(requestShortener), + origin.module + ) : "", loc: formatLocation(origin.loc), request: origin.request @@ -1468,8 +1515,15 @@ const SIMPLE_EXTRACTORS = { } = context; object.originIdentifier = origin.identifier(); object.originName = origin.readableIdentifier(requestShortener); + object.originName = truncateLongExternalModuleReadableIdentifier( + origin.readableIdentifier(requestShortener), + origin + ); object.moduleIdentifier = module.identifier(); - object.moduleName = module.readableIdentifier(requestShortener); + object.moduleName = truncateLongExternalModuleReadableIdentifier( + module.readableIdentifier(requestShortener), + module + ); const dependencies = Array.from( moduleGraph.getIncomingConnections(module) ) From 9604abf517a76a3038a8034407e14a4143d20e84 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Mon, 3 Apr 2023 19:33:42 +0530 Subject: [PATCH 2/5] fix: lint issue for DefaultStatsFactoryPlugin.js --- lib/stats/DefaultStatsFactoryPlugin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/stats/DefaultStatsFactoryPlugin.js b/lib/stats/DefaultStatsFactoryPlugin.js index e33928f50a2..93339a056df 100644 --- a/lib/stats/DefaultStatsFactoryPlugin.js +++ b/lib/stats/DefaultStatsFactoryPlugin.js @@ -24,8 +24,6 @@ const { } = require("../util/comparators"); const { makePathsRelative, parseResource } = require("../util/identifier"); -const MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH = 80; - /** @typedef {import("webpack-sources").Source} Source */ /** @typedef {import("../Chunk")} Chunk */ /** @typedef {import("../ChunkGroup")} ChunkGroup */ @@ -317,6 +315,8 @@ const MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH = 80; * @property {ExtractorsByOption} moduleTraceDependency */ +const MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH = 80; + /** * @param {string} readableIdentifier user readable identifier of the module * @param {Module} module base module type From 1f11b06cd68ebde78401bceeea46ea280a127c57 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Mon, 3 Apr 2023 19:52:00 +0530 Subject: [PATCH 3/5] test: limit external module readable identifier length in stats --- test/__snapshots__/StatsTestCases.basictest.js.snap | 7 +++++++ .../max-external-module-readable-identifier/index.js | 1 + .../webpack.config.js | 8 ++++++++ 3 files changed, 16 insertions(+) create mode 100644 test/statsCases/max-external-module-readable-identifier/index.js create mode 100644 test/statsCases/max-external-module-readable-identifier/webpack.config.js diff --git a/test/__snapshots__/StatsTestCases.basictest.js.snap b/test/__snapshots__/StatsTestCases.basictest.js.snap index 48cfb596442..92dc40af874 100644 --- a/test/__snapshots__/StatsTestCases.basictest.js.snap +++ b/test/__snapshots__/StatsTestCases.basictest.js.snap @@ -1435,6 +1435,13 @@ asset main.js 84 bytes [emitted] (name: ma webpack x.x.x compiled successfully in X ms" `; +exports[`StatsTestCases should print correct stats for max-external-module-readable-identifier 1`] = ` +"asset main.js 1.45 KiB [emitted] (name: main) +./index.js 17 bytes [built] [code generated] +external \\"very-very-very-very-long-external-module-readable-identifier-it-should...(truncated) 42 bytes [built] [code generated] +webpack x.x.x compiled successfully in X ms" +`; + exports[`StatsTestCases should print correct stats for max-modules 1`] = ` "asset main.js 5.47 KiB [emitted] (name: main) ./index.js 181 bytes [built] [code generated] diff --git a/test/statsCases/max-external-module-readable-identifier/index.js b/test/statsCases/max-external-module-readable-identifier/index.js new file mode 100644 index 00000000000..e7b7d56c8ad --- /dev/null +++ b/test/statsCases/max-external-module-readable-identifier/index.js @@ -0,0 +1 @@ +require("test"); diff --git a/test/statsCases/max-external-module-readable-identifier/webpack.config.js b/test/statsCases/max-external-module-readable-identifier/webpack.config.js new file mode 100644 index 00000000000..7f5712802a4 --- /dev/null +++ b/test/statsCases/max-external-module-readable-identifier/webpack.config.js @@ -0,0 +1,8 @@ +/** @type {import("../../../types").Configuration} */ +module.exports = { + mode: "production", + entry: "./index", + externals: { + test: "commonjs very-very-very-very-long-external-module-readable-identifier-it-should-be-truncated" + } +}; From ed1036256a988032cfdb94321a0a07cbdbd476f0 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Fri, 7 Apr 2023 04:40:49 +0000 Subject: [PATCH 4/5] refactor: limit module identifier in DefaultStatsPrinterPlugin --- lib/stats/DefaultStatsFactoryPlugin.js | 72 ++++---------------------- lib/stats/DefaultStatsPrinterPlugin.js | 13 ++++- 2 files changed, 21 insertions(+), 64 deletions(-) diff --git a/lib/stats/DefaultStatsFactoryPlugin.js b/lib/stats/DefaultStatsFactoryPlugin.js index 93339a056df..57e52703a7e 100644 --- a/lib/stats/DefaultStatsFactoryPlugin.js +++ b/lib/stats/DefaultStatsFactoryPlugin.js @@ -6,7 +6,6 @@ "use strict"; const util = require("util"); -const ExternalModule = require("../ExternalModule"); const ModuleDependency = require("../dependencies/ModuleDependency"); const formatLocation = require("../formatLocation"); const { LogType } = require("../logging/Logger"); @@ -315,26 +314,6 @@ const { makePathsRelative, parseResource } = require("../util/identifier"); * @property {ExtractorsByOption} moduleTraceDependency */ -const MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH = 80; - -/** - * @param {string} readableIdentifier user readable identifier of the module - * @param {Module} module base module type - * @returns {string} an elided readableIdentifier, when readableIdentifier exceeds a maximum length - */ -const truncateLongExternalModuleReadableIdentifier = ( - readableIdentifier, - module -) => { - return module instanceof ExternalModule && - readableIdentifier.length > MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH - ? readableIdentifier.substring( - 0, - MAX_EXTERNAL_MODULE_READABLE_IDENTIFIER_LENGTH - ) + "...(truncated)" - : readableIdentifier; -}; - /** * @template T * @template I @@ -414,10 +393,7 @@ const EXTRACT_ERROR = { } if (error.module) { object.moduleIdentifier = error.module.identifier(); - object.moduleName = truncateLongExternalModuleReadableIdentifier( - error.module.readableIdentifier(requestShortener), - error.module - ); + object.moduleName = error.module.readableIdentifier(requestShortener); } if (error.loc) { object.loc = formatLocation(error.loc); @@ -1157,10 +1133,7 @@ const SIMPLE_EXTRACTORS = { /** @type {KnownStatsModule} */ const statsModule = { identifier: module.identifier(), - name: truncateLongExternalModuleReadableIdentifier( - module.readableIdentifier(requestShortener), - module - ), + name: module.readableIdentifier(requestShortener), nameForCondition: module.nameForCondition(), index: moduleGraph.getPreOrderIndex(module), preOrderIndex: moduleGraph.getPreOrderIndex(module), @@ -1173,12 +1146,7 @@ const SIMPLE_EXTRACTORS = { compilation.chunkGraph.getNumberOfModuleChunks(module) === 0, dependent: rootModules ? !rootModules.has(module) : undefined, issuer: issuer && issuer.identifier(), - issuerName: - issuer && - truncateLongExternalModuleReadableIdentifier( - issuer.readableIdentifier(requestShortener), - issuer - ), + issuerName: issuer && issuer.readableIdentifier(requestShortener), issuerPath: issuer && factory.create(`${type.slice(0, -8)}.issuerPath`, path, context), @@ -1318,10 +1286,7 @@ const SIMPLE_EXTRACTORS = { /** @type {KnownStatsModuleIssuer} */ const statsModuleIssuer = { identifier: module.identifier(), - name: truncateLongExternalModuleReadableIdentifier( - module.readableIdentifier(requestShortener), - module - ) + name: module.readableIdentifier(requestShortener) }; Object.assign(object, statsModuleIssuer); if (profile) { @@ -1343,25 +1308,16 @@ const SIMPLE_EXTRACTORS = { ? reason.originModule.identifier() : null, module: reason.originModule - ? truncateLongExternalModuleReadableIdentifier( - reason.originModule.readableIdentifier(requestShortener), - reason.originModule - ) + ? reason.originModule.readableIdentifier(requestShortener) : null, moduleName: reason.originModule - ? truncateLongExternalModuleReadableIdentifier( - reason.originModule.readableIdentifier(requestShortener), - reason.originModule - ) + ? reason.originModule.readableIdentifier(requestShortener) : null, resolvedModuleIdentifier: reason.resolvedOriginModule ? reason.resolvedOriginModule.identifier() : null, resolvedModule: reason.resolvedOriginModule - ? truncateLongExternalModuleReadableIdentifier( - reason.resolvedOriginModule.readableIdentifier(requestShortener), - reason.resolvedOriginModule - ) + ? reason.resolvedOriginModule.readableIdentifier(requestShortener) : null, type: reason.dependency ? reason.dependency.type : null, active: reason.isActive(runtime), @@ -1489,10 +1445,7 @@ const SIMPLE_EXTRACTORS = { module: origin.module ? origin.module.identifier() : "", moduleIdentifier: origin.module ? origin.module.identifier() : "", moduleName: origin.module - ? truncateLongExternalModuleReadableIdentifier( - origin.module.readableIdentifier(requestShortener), - origin.module - ) + ? origin.module.readableIdentifier(requestShortener) : "", loc: formatLocation(origin.loc), request: origin.request @@ -1515,15 +1468,8 @@ const SIMPLE_EXTRACTORS = { } = context; object.originIdentifier = origin.identifier(); object.originName = origin.readableIdentifier(requestShortener); - object.originName = truncateLongExternalModuleReadableIdentifier( - origin.readableIdentifier(requestShortener), - origin - ); object.moduleIdentifier = module.identifier(); - object.moduleName = truncateLongExternalModuleReadableIdentifier( - module.readableIdentifier(requestShortener), - module - ); + object.moduleName = module.readableIdentifier(requestShortener); const dependencies = Array.from( moduleGraph.getIncomingConnections(module) ) diff --git a/lib/stats/DefaultStatsPrinterPlugin.js b/lib/stats/DefaultStatsPrinterPlugin.js index 71c35e1fe30..ef25853c420 100644 --- a/lib/stats/DefaultStatsPrinterPlugin.js +++ b/lib/stats/DefaultStatsPrinterPlugin.js @@ -10,6 +10,7 @@ /** @typedef {import("./StatsPrinter").StatsPrinterContext} StatsPrinterContext */ const DATA_URI_CONTENT_LENGTH = 16; +const MAX_MODULE_IDENTIFIER_LENGTH = 80; const plural = (n, singular, plural) => (n === 1 ? singular : plural); @@ -30,7 +31,17 @@ const printSizes = (sizes, { formatSize = n => `${n}` }) => { const getResourceName = resource => { const dataUrl = /^data:[^,]+,/.exec(resource); - if (!dataUrl) return resource; + + if (!dataUrl) { + if (resource.length < MAX_MODULE_IDENTIFIER_LENGTH) return resource; + return `${resource.slice( + 0, + Math.min( + resource.length - /* '...(truncated)'.length */ 14, + MAX_MODULE_IDENTIFIER_LENGTH + ) + )}...(truncated)`; + } const len = dataUrl[0].length + DATA_URI_CONTENT_LENGTH; if (resource.length < len) return resource; From 132ebd5f0f037d649204204486e2437c9f1782e2 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Fri, 7 Apr 2023 09:40:03 +0000 Subject: [PATCH 5/5] fix: handle case when resourcee is not available --- lib/stats/DefaultStatsPrinterPlugin.js | 25 +++++++++++-------- .../StatsTestCases.basictest.js.snap | 2 +- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/lib/stats/DefaultStatsPrinterPlugin.js b/lib/stats/DefaultStatsPrinterPlugin.js index ef25853c420..e1eb6ca47cc 100644 --- a/lib/stats/DefaultStatsPrinterPlugin.js +++ b/lib/stats/DefaultStatsPrinterPlugin.js @@ -31,17 +31,7 @@ const printSizes = (sizes, { formatSize = n => `${n}` }) => { const getResourceName = resource => { const dataUrl = /^data:[^,]+,/.exec(resource); - - if (!dataUrl) { - if (resource.length < MAX_MODULE_IDENTIFIER_LENGTH) return resource; - return `${resource.slice( - 0, - Math.min( - resource.length - /* '...(truncated)'.length */ 14, - MAX_MODULE_IDENTIFIER_LENGTH - ) - )}...(truncated)`; - } + if (!dataUrl) return resource; const len = dataUrl[0].length + DATA_URI_CONTENT_LENGTH; if (resource.length < len) return resource; @@ -53,6 +43,19 @@ const getResourceName = resource => { const getModuleName = name => { const [, prefix, resource] = /^(.*!)?([^!]*)$/.exec(name); + + if (resource.length > MAX_MODULE_IDENTIFIER_LENGTH) { + const truncatedResource = `${resource.slice( + 0, + Math.min( + resource.length - /* '...(truncated)'.length */ 14, + MAX_MODULE_IDENTIFIER_LENGTH + ) + )}...(truncated)`; + + return [prefix, getResourceName(truncatedResource)]; + } + return [prefix, getResourceName(resource)]; }; diff --git a/test/__snapshots__/StatsTestCases.basictest.js.snap b/test/__snapshots__/StatsTestCases.basictest.js.snap index 92dc40af874..e8fcba83fc5 100644 --- a/test/__snapshots__/StatsTestCases.basictest.js.snap +++ b/test/__snapshots__/StatsTestCases.basictest.js.snap @@ -1195,7 +1195,7 @@ built modules 724 bytes [built] ./templates/baz.js 38 bytes [optional] [built] [code generated] ./templates/foo.js 38 bytes [optional] [built] [code generated] ./entry.js 450 bytes [built] [code generated] - ./templates/ lazy ^\\\\.\\\\/.*$ include: \\\\.js$ exclude: \\\\.noimport\\\\.js$ namespace object 160 bytes [optional] [built] [code generated] + ./templates/ lazy ^\\\\.\\\\/.*$ include: \\\\.js$ exclude: \\\\.noimport\\\\.js$ na...(truncated) 160 bytes [optional] [built] [code generated] webpack x.x.x compiled successfully in X ms" `;