@bundle-stats/utils 4.2.2 → 4.2.3-beta.1

package/src/utils/delta.ts

@@ -0,0 +1,98 @@
+import round from 'lodash/round';
+
+import type {
+  MetricRun,
+  MetricRunDelta,
+  MetricRunInfoDeltaType,
+  MetricTypeConfig,
+} from '../constants';
+
+export function getDelta(baseline?: MetricRun | null, current?: MetricRun | null): MetricRunDelta {
+  const baselineValue = baseline?.value || 0;
+  const currentValue = current?.value || 0;
+
+  if (baselineValue === currentValue) {
+    return {
+      delta: 0,
+      deltaPercentage: 0,
+    };
+  }
+
+  if (baselineValue === 0) {
+    return {
+      delta: currentValue,
+      deltaPercentage: 100,
+    };
+  }
+
+  return {
+    delta: currentValue - baselineValue,
+    deltaPercentage: round((currentValue / baselineValue) * 100 - 100, 8),
+  };
+}
+
+/**
+ * Format delta output
+ */
+export function formatDelta(value: number, formatter: MetricTypeConfig['formatter']): string {
+  let sign = '';
+
+  if (value > 0) {
+    sign = '+';
+  } else if (value < 0) {
+    sign = '-';
+  }
+
+  let absValue = Math.abs(value);
+
+  if (absValue > 0 && absValue < 0.01) {
+    sign = `~${sign}`;
+    absValue = 0.01;
+  }
+
+  if (absValue > 0.01) {
+    absValue = round(absValue, 2);
+  }
+
+  return `${sign}${formatter(absValue)}`;
+}
+
+/**
+ * Get delta type
+ */
+export function getDeltaType(
+  deltaPercentageValue: number,
+  biggerIsBetter?: MetricTypeConfig['biggerIsBetter'],
+): MetricRunInfoDeltaType {
+  // No change
+  if (deltaPercentageValue === 0) {
+    return 'NO_CHANGE';
+  }
+
+  // Change + no regression/improvement
+  if (biggerIsBetter === null) {
+    return 'CHANGE';
+  }
+
+  if (deltaPercentageValue < -50) {
+    return biggerIsBetter ? 'HIGH_NEGATIVE' : 'HIGH_POSITIVE';
+  }
+
+  if (deltaPercentageValue < -5) {
+    return biggerIsBetter ? 'NEGATIVE' : 'POSITIVE';
+  }
+
+  if (deltaPercentageValue < 0) {
+    return biggerIsBetter ? 'LOW_NEGATIVE' : 'LOW_POSITIVE';
+  }
+
+  if (deltaPercentageValue <= 5) {
+    return biggerIsBetter ? 'LOW_POSITIVE' : 'LOW_NEGATIVE';
+  }
+
+  if (deltaPercentageValue <= 50) {
+    return biggerIsBetter ? 'POSITIVE' : 'NEGATIVE';
+  }
+
+  return biggerIsBetter ? 'HIGH_POSITIVE' : 'HIGH_NEGATIVE';
+}

package/src/utils/metrics.ts

@@ -0,0 +1,88 @@
+import get from 'lodash/get';
+
+import {
+  MetricRunInfo,
+  MetricRunInfoBaseline,
+  Metric,
+  MetricTypes,
+  MetricConfig,
+  MetricTypeConfig,
+} from '../constants';
+import { METRIC_TYPE_CONFIGS } from '../config';
+import { metrics as webpackMetricTypes } from '../webpack/metrics';
+import { metrics as lighthouseMetricTypes } from '../lighthouse/metrics';
+import { metrics as browsertimeMeticTypes } from '../browsertime/metrics';
+import { formatPercentage } from './format';
+import { formatDelta, getDelta, getDeltaType } from './delta';
+
+export function createGetMetricType(metrics: Record<string, unknown>) {
+  return function getMetricType(key: string, type?: MetricTypes): Metric {
+    const metric = get(metrics, key) as MetricConfig;
+
+    if (metric?.type) {
+      return {
+        ...METRIC_TYPE_CONFIGS[metric.type],
+        ...metric,
+      };
+    }
+
+    const resolvedType = type || MetricTypes.Numeric;
+
+    return {
+      ...METRIC_TYPE_CONFIGS[resolvedType],
+      type: resolvedType,
+      label: key,
+    };
+  };
+}
+
+export function getGlobalMetricType(key: string, type?: MetricTypes): Metric {
+  const getMetricType = createGetMetricType({
+    webpack: webpackMetricTypes,
+    lighthouse: lighthouseMetricTypes,
+    browsertime: browsertimeMeticTypes,
+  });
+
+  return getMetricType(key, type);
+}
+
+export function getMetricRunInfo(
+  metricType: MetricTypeConfig,
+  current: number,
+  baseline?: number,
+): MetricRunInfo | MetricRunInfoBaseline {
+  const { formatter, biggerIsBetter } = metricType;
+
+  const runInfo = {
+    value: current,
+    displayValue: formatter(current),
+  };
+
+  // Skip computing delta fields when the baseline is missing
+  if (typeof baseline === 'undefined') {
+    return runInfo;
+  }
+
+  const { delta, deltaPercentage } = getDelta({ value: baseline }, { value: current });
+
+  // Resolve regression/improvement flag
+  let regression;
+
+  if (biggerIsBetter === null) {
+    regression = null;
+  } else if ((biggerIsBetter === true && delta > 0) || (biggerIsBetter === false && delta < 0)) {
+    regression = false;
+  } else if ((biggerIsBetter === false && delta > 0) || (biggerIsBetter === true && delta < 0)) {
+    regression = true;
+  }
+
+  return {
+    ...runInfo,
+    delta,
+    deltaPercentage,
+    displayDelta: formatDelta(delta, formatter),
+    displayDeltaPercentage: formatDelta(deltaPercentage, formatPercentage),
+    deltaType: getDeltaType(deltaPercentage, biggerIsBetter),
+    ...(typeof regression !== 'undefined' && { regression }),
+  };
+}

package/src/webpack/compare.ts

@@ -0,0 +1,62 @@
+import { MetricTypes } from '../constants';
+import { compareMetrics } from '../report/compare-metrics';
+import { MetricReportRowTransformFn } from '../report/types';
+import {
+  SECTION_WEBPACK_STATS,
+  SECTION_WEBPACK_SIZES,
+  SECTION_WEBPACK_ASSETS,
+  SECTION_WEBPACK_MODULES,
+  SECTION_WEBPACK_PACKAGES,
+  SECTIONS,
+} from './constants';
+import { selectors, getModulesDuplicateSizeMetrics, getModulesTotalSizeMetrics } from './selectors';
+
+const compareStats = (jobs: Array<unknown>, rowTransformers?: Array<MetricReportRowTransformFn>) =>
+  compareMetrics(jobs, selectors.stats, undefined, rowTransformers);
+
+const compareSizes = (jobs: Array<unknown>, rowTransformers?: Array<MetricReportRowTransformFn>) =>
+  compareMetrics(jobs, selectors.sizes, undefined, rowTransformers);
+
+const compareAssets = (jobs: Array<unknown>, rowTransformers?: Array<MetricReportRowTransformFn>) =>
+  compareMetrics(jobs, selectors.assets, MetricTypes.FileSize, rowTransformers);
+
+const compareModules = (
+  jobs: Array<unknown>,
+  rowTransformers?: Array<MetricReportRowTransformFn>,
+) => compareMetrics(jobs, selectors.modules, MetricTypes.FileSize, rowTransformers);
+
+export const compareModuleDuplicateSize = (
+  jobs: Array<unknown>,
+  rowTransformers?: Array<MetricReportRowTransformFn>,
+) => 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>,
+  rowTransformers?: Array<MetricReportRowTransformFn>,
+) => compareMetrics(jobs, selectors.packages, MetricTypes.FileSize, rowTransformers);
+
+export const compareBySection = {
+  [SECTION_WEBPACK_STATS]: compareStats,
+  [SECTION_WEBPACK_SIZES]: compareSizes,
+  [SECTION_WEBPACK_ASSETS]: compareAssets,
+  [SECTION_WEBPACK_MODULES]: compareModules,
+  [SECTION_WEBPACK_PACKAGES]: comparePackages,
+};
+
+/* eslint-disable prettier/prettier */
+/**
+ * Compare webpack sections
+ */
+export const compare = (jobs: Array<unknown>) => SECTIONS.reduce(
+  (agg, sectionId) => ({
+    ...agg,
+    [sectionId]: compareBySection[sectionId as keyof typeof compareBySection](jobs),
+  }),
+  {},
+);
+/* eslint-enable prettier/prettier */

package/src/webpack/extract/assets.ts

@@ -43,9 +43,7 @@ export const extractAssets = (webpackStats: WebpackStatsFiltered): MetricsAssets
       const normalizedName = getAssetName(baseName);
       const { size, name } = asset;
 
-      // Reassign for perf
-      // eslint-disable-next-line no-param-reassign
-      agg[normalizedName] = {
+      const entry = {
         name: baseName,
         value: size || 0,
         isEntry: entryAssetNames.includes(name),
@@ -54,6 +52,14 @@ export const extractAssets = (webpackStats: WebpackStatsFiltered): MetricsAssets
         ...(assetChunk && { chunkId: assetChunk.id }),
       };
 
+      if (agg[normalizedName]) {
+        // eslint-disable-next-line no-param-reassign
+        agg[baseName] = entry;
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        agg[normalizedName] = entry;
+      }
+
       return agg;
     }, {} as Assets) || {};
 
@@ -63,10 +69,10 @@ export const extractAssets = (webpackStats: WebpackStatsFiltered): MetricsAssets
     },
     ...(!isEmpty(normalizedChunks)
       ? {
-        meta: {
-          chunks: normalizedChunks?.map(({ id, name }) => ({ id, name })) || [],
-        },
-      }
+          meta: {
+            chunks: normalizedChunks?.map(({ id, name }) => ({ id, name })) || [],
+          },
+        }
       : {}),
   };
 };

package/src/webpack/extract/modules-packages-duplicate.ts

@@ -26,9 +26,9 @@ interface DuplicatePackageGroup {
 }
 
 interface ModulesPackagesDuplicateData {
-  insights: {
+  insights?: {
     duplicatePackages?: JobInsights['webpack']['duplicatePackages'];
-    duplicatePackagesV3: JobInsights['webpack']['duplicatePackagesV3'];
+    duplicatePackagesV3?: JobInsights['webpack']['duplicatePackagesV3'];
   };
   metrics: {
     duplicatePackagesCount: MetricRun;
@@ -38,7 +38,7 @@ interface ModulesPackagesDuplicateData {
 export const getDuplicatePackagesInsight = (
   duplicatePackagesMap: Record<string, Array<string>>,
   baselineDuplicatePackagesMap?: Record<string, Array<string>>,
-): JobInsight<JobInsightDuplicatePackagesV3Data> => {
+): JobInsight<JobInsightDuplicatePackagesV3Data> | null => {
   const duplicateInstances: Array<string> = [];
   const baselineDuplicateInstances: Array<string> = [];
   const newDuplicateInstances: Array<string> = [];
@@ -82,8 +82,8 @@ export const getDuplicatePackagesInsight = (
   const newDuplicateInstancesCount = newDuplicateInstances.length;
   const removedDuplicateInstancesCount = removedDuplicateInstances.length;
 
-  let text: string;
-  let insightType: InsightType;
+  let text = '';
+  let insightType: InsightType | null = null;
 
   if (newDuplicateInstancesCount > 0 && removedDuplicateInstancesCount > 0) {
     // New duplicate packages and removed duplicates
@@ -122,9 +122,11 @@ export const getDuplicatePackagesInsight = (
     text = `Bundle contains ${duplicateInstancesCount} duplicate ${item}`;
     insightType = InsightType.WARNING;
   } else {
-    // No change
-    text = 'Bundle does not contain duplicate packages';
-    insightType = InsightType.INFO;
+    // No change - noop
+  }
+
+  if (!text || !insightType) {
+    return null;
   }
 
   return {
@@ -187,11 +189,15 @@ export const extractModulesPackagesDuplicate = (
     baselineJob?.insights?.webpack?.duplicatePackages?.data ||
     {};
 
+  const noDuplicatesDuplicatePackagesV3 = getDuplicatePackagesInsight({}, baselineDuplicatePackages);
+
   if (!count) {
     return {
-      insights: {
-        duplicatePackagesV3: getDuplicatePackagesInsight({}, baselineDuplicatePackages),
-      },
+      ...(noDuplicatesDuplicatePackagesV3 && {
+        insights: {
+          duplicatePackagesV3: noDuplicatesDuplicatePackagesV3,
+        },
+      }),
       metrics: {
         duplicatePackagesCount: {
           value: count,
@@ -228,16 +234,18 @@ export const extractModulesPackagesDuplicate = (
     duplicatePackagesData[packageName] = packageData.children.map(({ id }) => id);
   });
 
+  const duplicatePackagesV3 = getDuplicatePackagesInsight(
+    duplicatePackagesData,
+    baselineDuplicatePackages,
+  );
+
   return {
     insights: {
       duplicatePackages: {
         type: InsightType.WARNING,
         data: duplicatePackagesData,
       },
-      duplicatePackagesV3: getDuplicatePackagesInsight(
-        duplicatePackagesData,
-        baselineDuplicatePackages,
-      ),
+      ...(duplicatePackagesV3 && { duplicatePackagesV3 }),
     },
     metrics: {
       duplicatePackagesCount: {

package/src/webpack/extract/modules-packages.ts

@@ -22,6 +22,11 @@ const uniqLast = (data: Array<unknown>) => {
  * Heuristics to extract package id, name, and path from a module path
  */
 export const getPackageMetaFromModulePath = (modulePath: string) => {
+  // Skip module federation entries
+  if (modulePath.match(/^(provide|consume) shared module/)) {
+    return null;
+  }
+
   const paths = modulePath.match(MODULE_PATH_PACKAGES);
 
   // No package paths found, skip
@@ -41,7 +46,11 @@ export const getPackageMetaFromModulePath = (modulePath: string) => {
           return [];
         }
 
-        return [...found].flat().slice(1).filter(Boolean).map((name) => name.replace(/\+/g, '/'));
+        return [...found]
+          .flat()
+          .slice(1)
+          .filter(Boolean)
+          .map((name) => name.replace(/\+/g, '/'));
       })
       .flat(),
   );
@@ -71,74 +80,78 @@ export const extractModulesPackages = (
 ): MetricsPackages => {
   const modules = Object.entries(currentExtractedData?.metrics?.modules || {});
 
-  const packages = modules.reduce((agg, [modulePath, { value }]) => {
-    const packageMeta = getPackageMetaFromModulePath(modulePath);
-
-    if (!packageMeta) {
-      return agg;
-    }
-
-    const existingPackageData = agg[packageMeta.id];
+  const packages = modules.reduce(
+    (agg, [modulePath, { value }]) => {
+      const packageMeta = getPackageMetaFromModulePath(modulePath);
+
+      if (!packageMeta) {
+        return agg;
+      }
+
+      const existingPackageData = agg[packageMeta.id];
+
+      // New package data
+      if (!existingPackageData) {
+        return {
+          ...agg,
+          [packageMeta.id]: {
+            name: packageMeta.name,
+            path: packageMeta.path,
+            value,
+          },
+        };
+      }
+
+      // Existing package info
+      if (existingPackageData.path === packageMeta.path) {
+        return {
+          ...agg,
+          [packageMeta.id]: {
+            ...existingPackageData,
+            value: existingPackageData.value + value,
+          },
+        };
+      }
+
+      // Same package name, but different paths (eg: symlinks)
+      const existingPackageWithEqualPath = Object.entries(agg).find(
+        ([__, packageData]) => packageData.path === packageMeta.path,
+      );
+
+      if (existingPackageWithEqualPath) {
+        const [name, data] = existingPackageWithEqualPath;
+
+        return {
+          ...agg,
+          [name]: {
+            ...data,
+            value: data.value + value,
+          },
+        };
+      }
+
+      // New package name & data
+      const lastIndex =
+        max(
+          Object.keys(agg)
+            .map((id) => id.split('~'))
+            .filter(([id]) => id === packageMeta.id)
+            .map(([__, index]) => parseInt(index, 10)),
+        ) || 0;
+
+      const packageName = [packageMeta.id, lastIndex + 1].join(PACKAGE_ID_SEPARATOR);
 
-    // New package data
-    if (!existingPackageData) {
       return {
         ...agg,
-        [packageMeta.id]: {
+        [packageName]: {
           name: packageMeta.name,
           path: packageMeta.path,
           value,
         },
       };
-    }
-
-    // Existing package info
-    if (existingPackageData.path === packageMeta.path) {
-      return {
-        ...agg,
-        [packageMeta.id]: {
-          ...existingPackageData,
-          value: existingPackageData.value + value,
-        },
-      };
-    }
-
-    // Same package name, but different paths (eg: symlinks)
-    const existingPackageWithEqualPath = Object.entries(agg).find(
-      ([__, packageData]) => packageData.path === packageMeta.path,
-    );
-
-    if (existingPackageWithEqualPath) {
-      const [name, data] = existingPackageWithEqualPath;
-
-      return {
-        ...agg,
-        [name]: {
-          ...data,
-          value: data.value + value,
-        },
-      };
-    }
-
-    // New package name & data
-    const lastIndex = max(
-      Object.keys(agg)
-        .map((id) => id.split('~'))
-        .filter(([id]) => id === packageMeta.id)
-        .map(([__, index]) => parseInt(index, 10)),
-    ) || 0;
-
-    const packageName = [packageMeta.id, lastIndex + 1].join(PACKAGE_ID_SEPARATOR);
-
-    return {
-      ...agg,
-      [packageName]: {
-        name: packageMeta.name,
-        path: packageMeta.path,
-        value,
-      },
-    };
-  }, {} as Record<string, Package>);
+    },
+    {} as Record<string, Package>,
+  );
 
   return { metrics: { packages } };
 };

package/src/webpack/extract/modules.ts

@@ -1,11 +1,15 @@
 import round from 'lodash/round';
-import { WebpackStatsFiltered, WebpackStatsFilteredRootModule } from '@bundle-stats/plugin-webpack-filter';
+import union from 'lodash/union';
+import {
+  WebpackStatsFiltered,
+  WebpackStatsFilteredModule,
+} from '@bundle-stats/plugin-webpack-filter';
 
-import { Module, MetricsModules } from '../types';
+import type { MetricsModules, Modules } from '../types';
 import { getModuleName, normalizeChunkId } from '../utils';
 
 /*
- * Extract webpack modules array to an object with metrics
+ * Extract webpack modules metrics and stats
  */
 export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModules => {
   const modulesSource = webpackStats?.modules;
@@ -22,58 +26,87 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
   }
 
   // Flatten concatenated modules
-  const allModules = modulesSource.reduce((agg, moduleEntry) => {
-    if (!moduleEntry.modules) {
-      agg.push(moduleEntry);
+  const modulesByName: Map<string, WebpackStatsFilteredModule> = new Map();
 
-      return agg;
+  modulesSource.forEach((rootModule) => {
+    // skip modules that do not belong to any chunk
+    if (!rootModule.chunks || rootModule.chunks.length === 0) {
+      return;
+    }
+
+    // flatten concatenated modules
+    if (rootModule.modules) {
+      rootModule.modules.forEach((concatenatedModule) => {
+        const concatenatedModuleName = getModuleName(concatenatedModule.name);
+        const existingModule = modulesByName.get(concatenatedModuleName);
+
+        // Merge if the module is already available
+        // webpack adds a module entry for every concatenated module
+        if (existingModule) {
+          modulesByName.set(concatenatedModuleName, {
+            ...existingModule,
+            chunks: union(existingModule.chunks, rootModule.chunks),
+          });
+        } else {
+          modulesByName.set(concatenatedModuleName, {
+            ...concatenatedModule,
+            chunks: rootModule.chunks,
+          });
+        }
+      });
+
+      return;
+    }
+
+    const normalizedName = getModuleName(rootModule.name);
+    const savedRootModule = modulesByName.get(normalizedName);
+
+    // Merge module data
+    // @NOTE some webpack plugins (mini-css-extract-plugin) might add a root module entry
+    // even if thee module was already concantenated in another module
+    if (savedRootModule) {
+      modulesByName.set(normalizedName, {
+        ...savedRootModule,
+        chunks: union(savedRootModule.chunks, rootModule.chunks),
+        size: rootModule.size,
+      });
+
+      return;
     }
 
-    // eslint-disable-next-line no-param-reassign
-    agg = agg.concat(
-      moduleEntry.modules.map((concatenatedModule) => ({
-        ...concatenatedModule,
-        // Add parent chunks
-        chunks: moduleEntry.chunks,
-      })),
-    );
+    modulesByName.set(normalizedName, rootModule);
+  });
 
-    return agg;
-  }, [] as Array<WebpackStatsFilteredRootModule>);
+  // Normalize module entries and extract metrics
+  const modules: Modules = {};
 
   let moduleCount = 0;
   let totalCodeSize = 0;
   let duplicateCodeSize = 0;
   let duplicateModulesCount = 0;
 
-  // Normalize module entries
-  const modules = allModules.reduce((agg, moduleEntry) => {
+  modulesByName.forEach((moduleEntry, normalizedName) => {
     const { name, size = 0, chunks } = moduleEntry;
-    const normalizedName = getModuleName(name);
-
-    // skip modules that do not belong to any chunk
-    if (!chunks || chunks?.length === 0) {
-      return agg;
-    }
 
     const instances = chunks.length;
     const duplicateInstances = instances - 1;
+    const duplicated = duplicateInstances > 0;
 
     moduleCount += instances;
-    duplicateModulesCount += duplicateInstances;
-    duplicateCodeSize += duplicateInstances * size;
     totalCodeSize += instances * size;
 
-    // eslint-disable-next-line no-param-reassign
-    agg[normalizedName] = {
+    if (duplicated) {
+      duplicateModulesCount += duplicateInstances;
+      duplicateCodeSize += duplicateInstances * size;
+    }
+
+    modules[normalizedName] = {
       name,
       value: size,
       chunkIds: chunks.map(normalizeChunkId),
-      duplicated: Boolean(duplicateInstances),
+      ...(duplicated && { duplicated }),
     };
-
-    return agg;
-  }, {} as Record<string, Module>);
+  }, {} as Modules);
 
   const duplicateCode = totalCodeSize ? round((duplicateCodeSize / totalCodeSize) * 100, 2) : 0;