Merge pull request #4069 from iFixit/duplicate-true-sizes

Duplicate Modules: Add option to include their bytes
relative-ci · Feb 20, 2024 · c86e729 · c86e729
2 parents 4b282d2 + e23d926
commit c86e729
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 24 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
@@ -0,0 +1,4 @@
+export enum ModuleMetric {
+  SIZE = 'value',
+  TOTAL_SIZE = 'totalSize',
+}
diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.module.css b/packages/ui/src/components/bundle-modules/bundle-modules.module.css
@@ -12,6 +12,10 @@
   margin-right: -1px; /** collapse border */
 }
 
+.metricSelector {
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .nameTagDuplicated {
   margin-right: var(--space-xxxsmall);
   vertical-align: baseline;

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.tsx b/packages/ui/src/components/bundle-modules/bundle-modules.tsx
@@ -18,9 +18,13 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
+import { ModuleMetric } from './bundle-modules.constants';
 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 { Box } from '../../layout';
+import { Button } from '../../ui';
+import { Tooltip } from '../../ui/tooltip';
 
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
@@ -68,6 +72,9 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   entryId?: string;
   hideEntryInfo: () => void;
 
+  moduleMetric: ModuleMetric;
+  setModuleMetric: (newValue: ModuleMetric) => void;
+
   customComponentLink: React.ElementType;
 }
 
@@ -89,6 +96,8 @@ export const BundleModules = (props: BundleModulesProps) => {
     updateSearch,
     entryId,
     hideEntryInfo,
+    moduleMetric,
+    setModuleMetric,
     customComponentLink: CustomComponentLink = ComponentLink,
   } = props;
 
@@ -172,6 +181,28 @@ export const BundleModules = (props: BundleModulesProps) => {
             />
           </FlexStack>
         </Toolbar>
+        <Box padding={['xsmall', 'small']} className={css.metricSelector}>
+          <FlexStack space="xxsmall" as="nav">
+            <Button
+              outline
+              kind={moduleMetric === ModuleMetric.SIZE ? 'primary' : 'default'}
+              size="small"
+              type="button"
+              onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+            >
+              <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
+            </Button>
+            <Button
+              outline
+              kind={moduleMetric === ModuleMetric.TOTAL_SIZE ? 'primary' : 'default'}
+              size="small"
+              type="button"
+              onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+            >
+              <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
+            </Button>
+          </FlexStack>
+        </Box>
         <MetricsTable
           className={css.table}
           items={items}

diff --git a/packages/ui/src/components/bundle-modules/bundle-modules.types.d.ts b/packages/ui/src/components/bundle-modules/bundle-modules.types.d.ts
@@ -13,7 +13,7 @@ export type ReportMetricModuleRow = {
 } & ReportMetricRun &
   Module;
 
-interface Job {
+export interface Job {
   label: string;
   internalBuildNumber: number;
   meta?: {

diff --git a/packages/ui/src/components/bundle-modules/index.tsx b/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';
 
@@ -14,6 +14,7 @@ import {
   generateFilters,
   getCustomSort,
 } from './bundle-modules.utils';
+import { ModuleMetric } from './bundle-modules.constants';
 import * as types from './bundle-modules.types';
 
 interface BundleModulesProps
@@ -46,6 +47,8 @@ interface BundleModulesProps
 export const BundleModules = (props: BundleModulesProps) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
+  const [moduleMetric, setModuleMetric] = useState<ModuleMetric>(ModuleMetric.SIZE);
+
   const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
@@ -62,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,
@@ -97,6 +105,8 @@ export const BundleModules = (props: BundleModulesProps) => {
       allItems={rows}
       totalRowCount={totalRowCount}
       hideEntryInfo={hideEntryInfo}
+      moduleMetric={moduleMetric}
+      setModuleMetric={setModuleMetric}
     />
   );
 };
diff --git a/packages/ui/src/components/module-info/module-info.tsx b/packages/ui/src/components/module-info/module-info.tsx
@@ -48,7 +48,6 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
   } = props;
 
   const rootClassName = cx(css.root, className);
-  const currentRun = item.runs?.[0];
 
   const tags = useMemo(() => {
     if (!item.duplicated) {
@@ -73,26 +72,30 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
   return (
     <EntryInfo item={item} labels={labels} tags={tags} onClose={onClose} className={rootClassName}>
       <Stack space="xxxsmall">
-        {!isEmpty(currentRun?.chunkIds) && (
-          <EntryInfo.Meta label="Chunks" className={css.chunks}>
-            {currentRun.chunkIds.map((chunkId) => {
-              const chunk = chunks?.find(({ id }) => id === chunkId);
+        {item.runs?.map(
+          (currentRun, index) =>
+            !isEmpty(currentRun?.chunkIds) && (
+              <EntryInfo.Meta label="Chunks" className={css.chunks}>
+                Job #{index + 1}:
+                {currentRun.chunkIds.map((chunkId) => {
+                  const chunk = chunks?.find(({ id }) => id === chunkId);
 
-              if (!chunk) {
-                return null;
-              }
+                  if (!chunk) {
+                    return null;
+                  }
 
-              return (
-                <EntryInfoMetaLink
-                  as={CustomComponentLink}
-                  {...getBundleModulesByChunk(chunkIds, chunkId)}
-                  className={css.chunksItem}
-                >
-                  {chunk.name}
-                </EntryInfoMetaLink>
-              );
-            })}
-          </EntryInfo.Meta>
+                  return (
+                    <EntryInfoMetaLink
+                      as={CustomComponentLink}
+                      {...getBundleModulesByChunk(chunkIds, chunkId)}
+                      className={css.chunksItem}
+                    >
+                      {chunk.name}
+                    </EntryInfoMetaLink>
+                  );
+                })}
+              </EntryInfo.Meta>
+          ),
         )}
 
         {item?.fileType && (

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

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