Module duplicates: transition to using a custom selector

This allows pretty easy extension to measuring other types (like duplicate count) I've declined not to add a metric selector at this time because creating a new dropdown that only allows a single selection would be a lot more changes.
relative-ci · Dec 30, 2023 · d972e4d · d972e4d
1 parent 4784db5
commit d972e4d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 35 deletions.
diff --git a/packages/ui/src/components/bundle-modules/index.jsx b/packages/ui/src/components/bundle-modules/index.jsx
@@ -62,11 +62,12 @@ export const BundleModules = (props) => {
   const [useDuplicatedSize, setUseDuplicatedSize] = useState(false);
 
   const { rows, totalRowCount } = useMemo(() => {
-    let jobsToCompare = jobs;
+    let result;
     if (useDuplicatedSize) {
-      jobsToCompare = webpack.factorDuplicateSizeIntoModules(jobs)
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else {
+      result = webpack.compareBySection.modules(jobs, [addRowFlags]);
     }
-    const result = webpack.compareBySection.modules(jobsToCompare, [addRowFlags]);
     return { rows: result, totalRowCount: result.length };
   }, [jobs, useDuplicatedSize]);
 

diff --git a/packages/utils/src/webpack/compare.js b/packages/utils/src/webpack/compare.js
@@ -8,7 +8,7 @@ import {
   SECTION_WEBPACK_PACKAGES,
   SECTIONS,
 } from './constants';
-import { selectors } from './selectors';
+import { selectors, getModuleDuplicateSize } from './selectors';
 
 /**
  * Compare stats metrics
@@ -53,6 +53,16 @@ const compareAssets = (jobs, rowTransformers) =>
 const compareModules = (jobs, rowTransformers) =>
   compareMetrics(jobs, selectors.modules, MetricTypes.FileSize, rowTransformers);
 
+/**
+ * Compare module size including duplicates
+ *
+ * @param {Object[]} jobs - List of jobs to compare
+ * @param {Array<Function>} [rowTransformers]
+ * @return {Object[]} Compared module metrics
+ */
+export const compareModuleDuplicateSize = (jobs, rowTransformers) =>
+  compareMetrics(jobs, getModuleDuplicateSize, MetricTypes.FileSize, rowTransformers);
+
 /**
  * Compare package metrics
  *
@@ -86,26 +96,3 @@ export const compare = (jobs) =>
   }),
   {},
 );
-
-/**
- * Augment the modules data in jobs to count the bytes from each duplicate
- */
-export const factorDuplicateSizeIntoModules = (jobs) =>
-  jobs.map((job) => ({
-    ...job,
-    metrics: {
-      ...job.metrics,
-      webpack: {
-        ...job.metrics.webpack,
-        modules: Object.keys(job.metrics.webpack.modules).reduce((modulesWithDupes, key) => {
-          const module = job.metrics.webpack.modules[key];
-          // eslint-disable-next-line no-param-reassign
-          modulesWithDupes[key] = {
-            ...module,
-            value: module.value * module.chunkIds.length,
-          };
-          return modulesWithDupes;
-        }, {}),
-      },
-    },
-  }))
diff --git a/packages/utils/src/webpack/selectors.js b/packages/utils/src/webpack/selectors.js
@@ -26,10 +26,13 @@ const getStatsMetrics = (job) => {
   const metrics = pick(data, SUMMARY_METRIC_PATHS);
 
   // Rename metric keys
-  return Object.entries(metrics).reduce((agg, [key, value]) => ({
-    ...agg,
-    [`webpack.${key}`]: value,
-  }), {});
+  return Object.entries(metrics).reduce(
+    (agg, [key, value]) => ({
+      ...agg,
+      [`webpack.${key}`]: value,
+    }),
+    {},
+  );
 };
 
 /**
@@ -47,10 +50,13 @@ const getSizeMetrics = (job) => {
   const metrics = get(job, 'metrics.webpack.sizes', {});
 
   // List metrics by the metrics list
-  return Object.keys(metricTypes.sizes).reduce((agg, key) => ({
-    ...agg,
-    [`webpack.sizes.${key}`]: metrics[key],
-  }), {});
+  return Object.keys(metricTypes.sizes).reduce(
+    (agg, key) => ({
+      ...agg,
+      [`webpack.sizes.${key}`]: metrics[key],
+    }),
+    {},
+  );
 };
 
 /**
@@ -79,6 +85,30 @@ const getAssetsMetrics = (job) => get(job, 'metrics.webpack.assets', {});
  */
 const getModulesMetrics = (job) => get(job, 'metrics.webpack.modules', {});
 
+/**
+ *
+ * Select webpack module size including duplication
+ *
+ * @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 getModuleDuplicateSize = (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,
+    };
+    return modulesWithDupes;
+  }, {});
+};
+
 /**
  *
  * Get package metrics