From 19f04dc050142df5c7a0b26a4b9b50c2c1606851 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Wed, 2 Aug 2023 21:39:41 +0800 Subject: [PATCH 1/6] Replace `chalk` with `picocolors` --- package-lock.json | 15 +++++++++++++-- package.json | 2 +- src/BundleAnalyzerPlugin.js | 2 +- src/bin/analyzer.js | 2 +- src/viewer.js | 2 +- 5 files changed, 17 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index cf3d66ed..109347ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2198,6 +2198,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -3174,6 +3175,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -3501,6 +3503,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "requires": { "color-name": "~1.1.4" } @@ -3508,7 +3511,8 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "color-support": { "version": "1.1.3", @@ -5949,7 +5953,8 @@ "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true }, "has-symbols": { "version": "1.0.2", @@ -9039,6 +9044,11 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, "picomatch": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", @@ -11243,6 +11253,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, "requires": { "has-flag": "^4.0.0" } diff --git a/package.json b/package.json index bb98312d..5f5ea939 100644 --- a/package.json +++ b/package.json @@ -35,11 +35,11 @@ "@discoveryjs/json-ext": "0.5.7", "acorn": "^8.0.4", "acorn-walk": "^8.0.0", - "chalk": "^4.1.0", "commander": "^7.2.0", "gzip-size": "^6.0.0", "lodash": "^4.17.20", "opener": "^1.5.2", + "picocolors": "^1.0.0", "sirv": "^1.0.7", "ws": "^7.3.1" }, diff --git a/src/BundleAnalyzerPlugin.js b/src/BundleAnalyzerPlugin.js index 8f493aab..2018fed8 100644 --- a/src/BundleAnalyzerPlugin.js +++ b/src/BundleAnalyzerPlugin.js @@ -1,6 +1,6 @@ const fs = require('fs'); const path = require('path'); -const {bold} = require('chalk'); +const {bold} = require('picocolors'); const Logger = require('./Logger'); const viewer = require('./viewer'); diff --git a/src/bin/analyzer.js b/src/bin/analyzer.js index caf21f5b..c5535bdb 100755 --- a/src/bin/analyzer.js +++ b/src/bin/analyzer.js @@ -3,7 +3,7 @@ const {resolve, dirname} = require('path'); const commander = require('commander'); -const {magenta} = require('chalk'); +const {magenta} = require('picocolors'); const analyzer = require('../analyzer'); const viewer = require('../viewer'); diff --git a/src/viewer.js b/src/viewer.js index 8d482d7d..4dc3b64f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -5,7 +5,7 @@ const http = require('http'); const WebSocket = require('ws'); const sirv = require('sirv'); const _ = require('lodash'); -const {bold} = require('chalk'); +const {bold} = require('picocolors'); const Logger = require('./Logger'); const analyzer = require('./analyzer'); From c43302e9c978ba93137883371b8c649258432514 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Wed, 2 Aug 2023 22:42:54 +0800 Subject: [PATCH 2/6] Replace `lodash` with individual modules --- client/components/ModuleItem.jsx | 13 ++-- client/components/Search.jsx | 4 +- package-lock.json | 123 ++++++++++++++++++++++++++++--- package.json | 12 ++- src/analyzer.js | 34 ++++----- src/template.js | 8 +- src/tree/BaseFolder.js | 4 +- src/tree/ConcatenatedModule.js | 6 +- src/viewer.js | 4 +- test/helpers.js | 11 ++- 10 files changed, 167 insertions(+), 52 deletions(-) diff --git a/client/components/ModuleItem.jsx b/client/components/ModuleItem.jsx index 2dd2c358..15bf78cf 100644 --- a/client/components/ModuleItem.jsx +++ b/client/components/ModuleItem.jsx @@ -1,4 +1,5 @@ -import _ from 'lodash'; +import escapeRegExp from 'lodash.escaperegexp'; +import escape from 'lodash.escape'; import filesize from 'filesize'; import cls from 'classnames'; @@ -47,7 +48,7 @@ export default class ModuleItem extends PureComponent { if (term) { const regexp = (term instanceof RegExp) ? new RegExp(term.source, 'igu') : - new RegExp(`(?:${_.escapeRegExp(term)})+`, 'iu'); + new RegExp(`(?:${escapeRegExp(term)})+`, 'iu'); let match; let lastMatch; @@ -58,15 +59,15 @@ export default class ModuleItem extends PureComponent { if (lastMatch) { html = ( - _.escape(title.slice(0, lastMatch.index)) + - `${_.escape(lastMatch[0])}` + - _.escape(title.slice(lastMatch.index + lastMatch[0].length)) + escape(title.slice(0, lastMatch.index)) + + `${escape(lastMatch[0])}` + + escape(title.slice(lastMatch.index + lastMatch[0].length)) ); } } if (!html) { - html = _.escape(title); + html = escape(title); } return html; diff --git a/client/components/Search.jsx b/client/components/Search.jsx index 1e5a8772..e4ef1c8d 100644 --- a/client/components/Search.jsx +++ b/client/components/Search.jsx @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import debounce from 'lodash.debounce'; import s from './Search.css'; import Button from './Button'; @@ -39,7 +39,7 @@ export default class Search extends PureComponent { ); } - handleValueChange = _.debounce((event) => { + handleValueChange = debounce((event) => { this.informChange(event.target.value); }, 400) diff --git a/package-lock.json b/package-lock.json index 109347ce..d0200592 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4368,6 +4368,17 @@ "requires": { "is-plain-object": "^2.0.1", "object.defaults": "^1.1.0" + }, + "dependencies": { + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } + } } }, "ee-first": { @@ -5137,6 +5148,17 @@ "dev": true, "requires": { "is-plain-object": "^2.0.4" + }, + "dependencies": { + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } + } } } } @@ -5506,6 +5528,17 @@ "object.defaults": "^1.1.0", "object.pick": "^1.2.0", "parse-filepath": "^1.0.1" + }, + "dependencies": { + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } + } } }, "flagged-respawn": { @@ -6752,13 +6785,9 @@ "dev": true }, "is-plain-object": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", - "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "dev": true, - "requires": { - "isobject": "^3.0.1" - } + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==" }, "is-potential-custom-element-name": { "version": "1.0.1", @@ -7946,6 +7975,17 @@ "object.map": "^1.0.0", "rechoir": "^0.6.2", "resolve": "^1.1.7" + }, + "dependencies": { + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } + } } }, "lines-and-columns": { @@ -8025,13 +8065,34 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, + "lodash.curry": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", + "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==", + "dev": true }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", - "dev": true + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, + "lodash.escape": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", + "integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==" + }, + "lodash.escaperegexp": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz", + "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==" + }, + "lodash.invokemap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz", + "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==" }, "lodash.memoize": { "version": "4.1.2", @@ -8039,12 +8100,34 @@ "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", "dev": true }, + "lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, + "lodash.partial": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/lodash.partial/-/lodash.partial-4.2.1.tgz", + "integrity": "sha512-qsiGr0kiA31O7chhmKSUiEGtxXnYtwmaJF00TPAUW79C5PCfaVeLTUN3sLT+rEPcqZooPtiFcGhnphQzFhkqmg==", + "dev": true + }, + "lodash.pullall": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.pullall/-/lodash.pullall-4.2.0.tgz", + "integrity": "sha512-VhqxBKH0ZxPpLhiu68YD1KnHmbhQJQctcipvmFnqIBDYzcIHzf3Zpu0tpeOKtR4x76p9yohc506eGdOjTmyIBg==" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", "dev": true }, + "lodash.uniqby": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz", + "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==" + }, "loglevel": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.0.tgz", @@ -8360,6 +8443,17 @@ "dev": true, "requires": { "is-plain-object": "^2.0.4" + }, + "dependencies": { + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } + } } } } @@ -10611,6 +10705,15 @@ "requires": { "is-extendable": "^0.1.0" } + }, + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "^3.0.1" + } } } }, diff --git a/package.json b/package.json index 5f5ea939..d4243ef2 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,13 @@ "acorn-walk": "^8.0.0", "commander": "^7.2.0", "gzip-size": "^6.0.0", - "lodash": "^4.17.20", + "is-plain-object": "^5.0.0", + "lodash.debounce": "^4.0.8", + "lodash.escape": "^4.0.1", + "lodash.escaperegexp": "^4.1.2", + "lodash.invokemap": "^4.6.0", + "lodash.pullall": "^4.2.0", + "lodash.uniqby": "^4.7.0", "opener": "^1.5.2", "picocolors": "^1.0.0", "sirv": "^1.0.7", @@ -72,6 +78,10 @@ "gulp": "4.0.2", "gulp-babel": "8.0.0", "jest": "27.2.2", + "lodash.curry": "^4.1.1", + "lodash.memoize": "^4.1.2", + "lodash.merge": "^4.6.2", + "lodash.partial": "^4.2.1", "mobx": "5.15.7", "mobx-react": "6.3.1", "postcss": "8.3.0", diff --git a/src/analyzer.js b/src/analyzer.js index 40085a70..be520947 100644 --- a/src/analyzer.js +++ b/src/analyzer.js @@ -1,7 +1,10 @@ const fs = require('fs'); const path = require('path'); -const _ = require('lodash'); +const pullAll = require('lodash.pullall'); +const invokeMap = require('lodash.invokemap'); +const uniqBy = require('lodash.uniqby'); + const gzipSize = require('gzip-size'); const {parseChunked} = require('@discoveryjs/json-ext'); @@ -139,7 +142,7 @@ function getViewerData(bundleStats, bundleDir, opts) { unparsedEntryModules[0].parsedSrc = assetSources.runtimeSrc; } else { // If there are multiple entry points we move all of them under synthetic concatenated module. - _.pullAll(assetModules, unparsedEntryModules); + pullAll(assetModules, unparsedEntryModules); assetModules.unshift({ identifier: './entry modules', name: './entry modules', @@ -167,7 +170,7 @@ function getViewerData(bundleStats, bundleDir, opts) { statSize: asset.tree.size || asset.size, parsedSize: asset.parsedSize, gzipSize: asset.gzipSize, - groups: _.invokeMap(asset.tree.children, 'toChartData'), + groups: invokeMap(asset.tree.children, 'toChartData'), isInitialByEntrypoint: chunkToInitialByEntrypoint[filename] ?? {} })); } @@ -179,24 +182,19 @@ function readStatsFromFile(filename) { } function getChildAssetBundles(bundleStats, assetName) { - return (bundleStats.children || []).find((c) => - _(c.assetsByChunkName) - .values() - .flatten() - .includes(assetName) - ); + return (bundleStats.children || []).find((c) => Object.values(c.assetsByChunkName) + .flat() + .includes(assetName)); } function getBundleModules(bundleStats) { - return _(bundleStats.chunks) - .map('modules') - .concat(bundleStats.modules) - .compact() - .flatten() - .uniqBy('id') - // Filtering out Webpack's runtime modules as they don't have ids and can't be parsed (introduced in Webpack 5) - .reject(isRuntimeModule) - .value(); + return uniqBy( + ((bundleStats.chunks?.map(chunk => chunk.modules)) || []) + .concat(bundleStats.modules) + .filter(Boolean) + .flat(), + 'id' + ).filter(m => !isRuntimeModule(m)); } function assetHasModule(statAsset, statModule) { diff --git a/src/template.js b/src/template.js index b743980d..a14c3b4f 100644 --- a/src/template.js +++ b/src/template.js @@ -2,7 +2,7 @@ const path = require('path'); const fs = require('fs'); -const _ = require('lodash'); +const escape = require('lodash.escape'); const projectRoot = path.resolve(__dirname, '..'); const assetsRoot = path.join(projectRoot, 'public'); @@ -32,10 +32,10 @@ function html(strings, ...values) { function getScript(filename, mode) { if (mode === 'static') { - return ` + return ` `; } else { - return ``; + return ``; } } @@ -45,7 +45,7 @@ function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSi - ${_.escape(title)} + ${escape(title)}