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 introduces a checkbox on the Modules tab 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)

I've declined not to add a metric selector UI component at this time
because creating a new dropdown that only allows a single selection
would be a lot more changes.

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

@@ -9,7 +9,7 @@ import { ComponentLink } from '../component-link';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
-import { Filters } from '../../ui/filters';
+import { Filters, Filter } from '../../ui/filters';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -21,6 +21,7 @@ import { generateFilterFieldsData } from './bundle-modules.utils';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
+import filtersCss from '../../ui/filters/filters.module.css';
 
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
@@ -59,6 +60,9 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   resetAllFilters: () => void;
   filters: Record<string, boolean>;
 
+  useDuplicatedSize: boolean,
+  setUseDuplicatedSize: (value: boolean) => void,
+
   sort: any;
   updateSort: ({ field, direction }: SortAction) => void;
 
@@ -83,6 +87,8 @@ export const BundleModules = (props: BundleModulesProps) => {
     resetFilters,
     resetAllFilters,
     filters,
+    useDuplicatedSize,
+    setUseDuplicatedSize,
     sort,
     updateSort,
     search,
@@ -170,6 +176,15 @@ export const BundleModules = (props: BundleModulesProps) => {
               filters={filterFieldsData}
               onChange={updateFilters}
             />
+            <Filter
+              className={cx(filtersCss.item, filtersCss.filterStandalone)}
+              buttonClassName={filtersCss.itemButton}
+              name="useDuplicatedSize"
+              label="Size With Duplicates"
+              alt="Represent the byte size of modules as the size of all the copies combined"
+              onChange={() => setUseDuplicatedSize(!useDuplicatedSize)}
+              checked={useDuplicatedSize}
+            />
           </FlexStack>
         </Toolbar>
         <MetricsTable

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 // @ts-ignore
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
@@ -61,13 +61,20 @@ export const BundleModules = (props: BundleModulesProps) => {
     setState,
   });
 
+  const [useDuplicatedSize, setUseDuplicatedSize] = useState(false);
+
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    let result;
+    if (useDuplicatedSize) {
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else {
+      result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    }
     return {
       rows: result as Array<types.ReportMetricModuleRow>,
       totalRowCount: result.length,
     };
-  }, [jobs]);
+  }, [jobs, useDuplicatedSize]);
 
   const filteredRows = useRowsFilter({
     rows,
@@ -94,6 +101,8 @@ export const BundleModules = (props: BundleModulesProps) => {
       {...restProps}
       {...searchParams}
       {...sortParams}
+      useDuplicatedSize={useDuplicatedSize}
+      setUseDuplicatedSize={setUseDuplicatedSize}
       allItems={rows}
       totalRowCount={totalRowCount}
       hideEntryInfo={hideEntryInfo}

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

@@ -16,7 +16,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