From 854c26c1c736597f248c1d75c5411aff9aa81272 Mon Sep 17 00:00:00 2001 From: Viorel Cojocaru Date: Sat, 20 Jul 2024 20:37:06 +0200 Subject: [PATCH 1/2] feat: BundleModules - compare by duplicate size --- .../bundle-modules.constants.ts | 1 + .../bundle-modules/bundle-modules.tsx | 13 ++++++++-- .../src/components/bundle-modules/index.tsx | 5 +++- packages/utils/src/webpack/compare.ts | 9 +++++-- packages/utils/src/webpack/selectors.js | 26 ++++++++++++++++++- 5 files changed, 48 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.constants.ts b/packages/ui/src/components/bundle-modules/bundle-modules.constants.ts index 19790598c5..3b8654b51e 100644 --- a/packages/ui/src/components/bundle-modules/bundle-modules.constants.ts +++ b/packages/ui/src/components/bundle-modules/bundle-modules.constants.ts @@ -1,4 +1,5 @@ export enum ModuleMetric { SIZE = 'value', + DUPLICATE_SIZE = 'duplicateSize', TOTAL_SIZE = 'totalSize', } diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx index cd85893016..42d9af4155 100644 --- a/packages/ui/src/components/bundle-modules/bundle-modules.tsx +++ b/packages/ui/src/components/bundle-modules/bundle-modules.tsx @@ -291,7 +291,16 @@ export const BundleModules = (props: BundleModulesProps) => { type="button" onClick={() => setModuleMetric(ModuleMetric.SIZE)} > - Module size + Module size + + diff --git a/packages/ui/src/components/bundle-modules/index.tsx b/packages/ui/src/components/bundle-modules/index.tsx index 6ba76e6241..44ab8fa8e3 100644 --- a/packages/ui/src/components/bundle-modules/index.tsx +++ b/packages/ui/src/components/bundle-modules/index.tsx @@ -18,6 +18,7 @@ import { } from './bundle-modules.utils'; import { ModuleMetric } from './bundle-modules.constants'; import * as types from './bundle-modules.types'; +import { ModuleInfo } from '../module-info'; interface UseMetricParams { metric?: string; @@ -98,8 +99,10 @@ export const BundleModules = (props: BundleModulesProps) => { let result: Array = []; if (moduleMetric === ModuleMetric.TOTAL_SIZE) { + result = webpack.compareModuleTotalSize(jobs, [addRowFlags]); + } else if (moduleMetric === ModuleMetric.DUPLICATE_SIZE) { result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]); - } else if (moduleMetric === ModuleMetric.SIZE) { + } else { result = webpack.compareBySection.modules(jobs, [addRowFlags]); } diff --git a/packages/utils/src/webpack/compare.ts b/packages/utils/src/webpack/compare.ts index d256bb6807..3afa009482 100644 --- a/packages/utils/src/webpack/compare.ts +++ b/packages/utils/src/webpack/compare.ts @@ -9,7 +9,7 @@ import { SECTION_WEBPACK_PACKAGES, SECTIONS, } from './constants'; -import { selectors, getModuleDuplicateSize } from './selectors'; +import { selectors, getModulesDuplicateSizeMetrics, getModulesTotalSizeMetrics } from './selectors'; const compareStats = (jobs: Array, rowTransformers?: Array) => compareMetrics(jobs, selectors.stats, undefined, rowTransformers); @@ -28,7 +28,12 @@ const compareModules = ( export const compareModuleDuplicateSize = ( jobs: Array, rowTransformers?: Array, -) => compareMetrics(jobs, getModuleDuplicateSize, MetricTypes.FileSize, rowTransformers); +) => compareMetrics(jobs, getModulesDuplicateSizeMetrics, MetricTypes.FileSize, rowTransformers); + +export const compareModuleTotalSize = ( + jobs: Array, + rowTransformers?: Array, +) => compareMetrics(jobs, getModulesTotalSizeMetrics, MetricTypes.FileSize, rowTransformers); const comparePackages = ( jobs: Array, diff --git a/packages/utils/src/webpack/selectors.js b/packages/utils/src/webpack/selectors.js index 232e274480..d8ae669a99 100644 --- a/packages/utils/src/webpack/selectors.js +++ b/packages/utils/src/webpack/selectors.js @@ -79,6 +79,30 @@ const getAssetsMetrics = (job) => get(job, 'metrics.webpack.assets', {}); */ const getModulesMetrics = (job) => get(job, 'metrics.webpack.modules', {}); +/** + * + * Select webpack module duplicate size + * + * @param {Object} job Job data + * @param {Object} job.metrics Job metrics + * @param {Object} job.metrics.webpack Job webpack metrics + * @param {Object} job.metrics.webpack.modules Job webpack module metrics + * + * @return {Object} Webpack module metrics + */ +export const getModulesDuplicateSizeMetrics = (job) => { + const modules = get(job, 'metrics.webpack.modules', {}); + return Object.keys(modules).reduce((modulesWithDupes, key) => { + const module = modules[key]; + // eslint-disable-next-line no-param-reassign + modulesWithDupes[key] = { + ...module, + value: module.value * (module.chunkIds.length - 1), + }; + return modulesWithDupes; + }, {}); +}; + /** * * Select webpack module size including duplication @@ -90,7 +114,7 @@ const getModulesMetrics = (job) => get(job, 'metrics.webpack.modules', {}); * * @return {Object} Webpack module metrics */ -export const getModuleDuplicateSize = (job) => { +export const getModulesTotalSizeMetrics = (job) => { const modules = get(job, 'metrics.webpack.modules', {}); return Object.keys(modules).reduce((modulesWithDupes, key) => { const module = modules[key]; From 1ccaae5f43a70c4c47313bde337479b4c32f9cc4 Mon Sep 17 00:00:00 2001 From: Viorel Cojocaru Date: Sat, 20 Jul 2024 20:48:34 +0200 Subject: [PATCH 2/2] feat: BundleModules - default metric to totalSize --- .../src/components/bundle-modules/bundle-modules.tsx | 12 ++++++------ packages/ui/src/components/bundle-modules/index.tsx | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx index 42d9af4155..e78aed2d4d 100644 --- a/packages/ui/src/components/bundle-modules/bundle-modules.tsx +++ b/packages/ui/src/components/bundle-modules/bundle-modules.tsx @@ -286,12 +286,12 @@ export const BundleModules = (props: BundleModulesProps) => { diff --git a/packages/ui/src/components/bundle-modules/index.tsx b/packages/ui/src/components/bundle-modules/index.tsx index 44ab8fa8e3..fca5035f37 100644 --- a/packages/ui/src/components/bundle-modules/index.tsx +++ b/packages/ui/src/components/bundle-modules/index.tsx @@ -18,7 +18,6 @@ import { } from './bundle-modules.utils'; import { ModuleMetric } from './bundle-modules.constants'; import * as types from './bundle-modules.types'; -import { ModuleInfo } from '../module-info'; interface UseMetricParams { metric?: string; @@ -32,7 +31,8 @@ function useModuleMetric(params: UseMetricParams): [ModuleMetric, (value: Module if (Object.values(ModuleMetric).includes(metric as ModuleMetric)) { return metric as ModuleMetric; } - return ModuleMetric.SIZE; + + return ModuleMetric.TOTAL_SIZE; }, [metric]); const setModuleMetric = useCallback( @@ -98,12 +98,12 @@ export const BundleModules = (props: BundleModulesProps) => { const { rows, totalRowCount } = useMemo(() => { let result: Array = []; - if (moduleMetric === ModuleMetric.TOTAL_SIZE) { - result = webpack.compareModuleTotalSize(jobs, [addRowFlags]); + if (moduleMetric === ModuleMetric.SIZE) { + result = webpack.compareBySection.modules(jobs, [addRowFlags]); } else if (moduleMetric === ModuleMetric.DUPLICATE_SIZE) { result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]); } else { - result = webpack.compareBySection.modules(jobs, [addRowFlags]); + result = webpack.compareModuleTotalSize(jobs, [addRowFlags]); } return {