Duplicate Modules: Add option to include their bytes

Two bundles may have large byte differences mainly because of some
modules being duplicated more or less often.

The totals show if the whole bundle has grown or shrunk but the modules
section couldn't tell you which modules had increased or decreased the
number of duplicates. Thus you could know the change was because of
altered duplication, but it would be hard to identify which modules
caused the change.

This hooks up the ModuleMetric selector to include the byte size
of the duplicates when comparing module sizes.

There are other ways of getting this done, but I tried to choose the
least invasive way. doing this operation as a selector allows pretty
easy extension to measuring other types (like duplicate count)

packages/ui/src/components/bundle-modules/index.tsx

@@ -65,12 +65,17 @@ export const BundleModules = (props: BundleModulesProps) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    let result;
+    if (moduleMetric === ModuleMetric.TOTAL_SIZE) {
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else if (moduleMetric === ModuleMetric.SIZE) {
+      result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    }
     return {
       rows: result as Array<types.ReportMetricModuleRow>,
       totalRowCount: result.length,
     };
-  }, [jobs]);
+  }, [jobs, moduleMetric]);
 
   const filteredRows = useRowsFilter({
     rows,

packages/ui/src/ui/filters/filters.tsx

@@ -19,7 +19,7 @@ interface FilterProps extends React.ComponentProps<'input'> {
   getOnOnlyClick?: (name: string) => () => void;
 }
 
-const Filter = (props: FilterProps) => {
+export const Filter = (props: FilterProps) => {
   const {
     className = '',
     as: Component = 'div',

packages/ui/src/ui/filters/index.tsx

@@ -5,6 +5,7 @@ import merge from 'lodash/merge';
 import { FilterFieldsData } from '../../types';
 import { getInitialValues } from './filters.utils';
 import { Filters as BaseComponent } from './filters';
+export { Filter } from './filters';
 
 interface FiltersProps
   extends Omit<

packages/utils/src/webpack/compare.ts

@@ -9,7 +9,7 @@ import {
   SECTION_WEBPACK_PACKAGES,
   SECTIONS,
 } from './constants';
-import { selectors } from './selectors';
+import { selectors, getModuleDuplicateSize } from './selectors';
 
 const compareStats = (jobs: Array<unknown>, rowTransformers?: Array<MetricReportRowTransformFn>) =>
   compareMetrics(jobs, selectors.stats, undefined, rowTransformers);
@@ -25,6 +25,11 @@ const compareModules = (
   rowTransformers?: Array<MetricReportRowTransformFn>,
 ) => compareMetrics(jobs, selectors.modules, MetricTypes.FileSize, rowTransformers);
 
+export const compareModuleDuplicateSize = (
+  jobs: Array<unknown>,
+  rowTransformers?: Array<MetricReportRowTransformFn>,
+) => compareMetrics(jobs, getModuleDuplicateSize, MetricTypes.FileSize, rowTransformers);
+
 const comparePackages = (
   jobs: Array<unknown>,
   rowTransformers?: Array<MetricReportRowTransformFn>,

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 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