Merge pull request #4585 from relative-ci/modules-duplicate-size

Modules duplicate size view
relative-ci · Jul 21, 2024 · 8fece4a · 8fece4a
2 parents 05446cc + 1ccaae5
commit 8fece4a
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 13 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
@@ -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
@@ -286,21 +286,30 @@ export const BundleModules = (props: BundleModulesProps) => {
             <ControlGroup as="nav">
               <Button
                 outline
-                active={moduleMetric === ModuleMetric.SIZE}
+                active={moduleMetric === ModuleMetric.TOTAL_SIZE}
                 size="small"
                 type="button"
-                onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+                onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
               >
-                <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
+                <Tooltip title="Module total size (including duplicate modules)">Module total size</Tooltip>
               </Button>
               <Button
                 outline
-                active={moduleMetric === ModuleMetric.TOTAL_SIZE}
+                active={moduleMetric === ModuleMetric.DUPLICATE_SIZE}
                 size="small"
                 type="button"
-                onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+                onClick={() => setModuleMetric(ModuleMetric.DUPLICATE_SIZE)}
+              >
+                <Tooltip title="Module duplicate size">Module duplicate size</Tooltip>
+              </Button>
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.SIZE)}
               >
-                <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
+                <Tooltip title="Module size (excluding duplicate modules)">Module size</Tooltip>
               </Button>
             </ControlGroup>
           </Box>

diff --git a/packages/ui/src/components/bundle-modules/index.tsx b/packages/ui/src/components/bundle-modules/index.tsx
@@ -31,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(
@@ -97,10 +98,12 @@ export const BundleModules = (props: BundleModulesProps) => {
   const { rows, totalRowCount } = useMemo(() => {
     let result: Array<types.ReportMetricModuleRow> = [];
 
-    if (moduleMetric === ModuleMetric.TOTAL_SIZE) {
-      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
-    } else if (moduleMetric === ModuleMetric.SIZE) {
+    if (moduleMetric === ModuleMetric.SIZE) {
       result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    } else if (moduleMetric === ModuleMetric.DUPLICATE_SIZE) {
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else {
+      result = webpack.compareModuleTotalSize(jobs, [addRowFlags]);
     }
 
     return {

diff --git 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<unknown>, rowTransformers?: Array<MetricReportRowTransformFn>) =>
   compareMetrics(jobs, selectors.stats, undefined, rowTransformers);
@@ -28,7 +28,12 @@ const compareModules = (
 export const compareModuleDuplicateSize = (
   jobs: Array<unknown>,
   rowTransformers?: Array<MetricReportRowTransformFn>,
-) => compareMetrics(jobs, getModuleDuplicateSize, MetricTypes.FileSize, rowTransformers);
+) => compareMetrics(jobs, getModulesDuplicateSizeMetrics, MetricTypes.FileSize, rowTransformers);
+
+export const compareModuleTotalSize = (
+  jobs: Array<unknown>,
+  rowTransformers?: Array<MetricReportRowTransformFn>,
+) => compareMetrics(jobs, getModulesTotalSizeMetrics, MetricTypes.FileSize, rowTransformers);
 
 const comparePackages = (
   jobs: Array<unknown>,

diff --git 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];