@bundle-stats/utils 3.3.0-alpha.1 → 3.3.1-beta.12

package/src/webpack/constants.js

@@ -0,0 +1,91 @@
+export const SECTION_WEBPACK_STATS = 'stats';
+export const SECTION_WEBPACK_SIZES = 'sizes';
+export const SECTION_WEBPACK_ASSETS = 'assets';
+export const SECTION_WEBPACK_MODULES = 'modules';
+export const SECTION_WEBPACK_PACKAGES = 'packages';
+
+export const SECTIONS = [
+  SECTION_WEBPACK_STATS,
+  SECTION_WEBPACK_SIZES,
+  SECTION_WEBPACK_ASSETS,
+  SECTION_WEBPACK_MODULES,
+  SECTION_WEBPACK_PACKAGES,
+];
+
+export const SUMMARY_METRIC_PATHS = [
+  'totalSizeByTypeALL',
+  'totalInitialSizeJS',
+  'totalInitialSizeCSS',
+  'cacheInvalidation',
+  'moduleCount',
+  'duplicateModulesCount',
+  'duplicateCode',
+  'chunkCount',
+  'assetCount',
+  'packageCount',
+  'duplicatePackagesCount',
+];
+
+const PACKAGE_PREFIX = /(?:node_modules|~)(?:\/\.pnpm)?/;
+const PACKAGE_SLUG = /[a-zA-Z0-9]+(?:[-|_|.]+[a-zA-Z0-9]+)*/;
+const VERSION = /@[\w|\-|_|.]+/;
+
+// Extract package paths from module path
+// https://regex101.com/r/22Leep/6
+/* eslint-disable prettier/prettier */
+export const MODULE_PATH_PACKAGES = new RegExp(
+  [
+    // match dependency directory (eg: `node_modules/`, `node_modules/.pnpm/`)
+    `(?:${PACKAGE_PREFIX.source}/)`,
+    // match package name
+    '(?:',
+    // match `@organization/` or `@organization+`(pnpm)
+    `(?:@${PACKAGE_SLUG.source}[/|+])?`,
+    // match github.com+organization+
+    `(?:${PACKAGE_SLUG.source}\\+)*`,
+    // match package name
+    `(?:${PACKAGE_SLUG.source})`,
+    // match version
+    `(?:${VERSION.source})?`,
+    ')',
+
+    // Match pnpm peer dependencies (eg: package-a@version_package-b@version)
+    '(?:_',
+    `(?:@${PACKAGE_SLUG.source}[/|+])?`,
+    `(?:${PACKAGE_SLUG.source})`,
+    `(?:@${PACKAGE_SLUG.source})?`,
+    ')*',
+    '/',
+  ].join(''),
+  'g',
+);
+/* eslint-enable prettier/prettier */
+
+// Extract package name from package path
+// https://regex101.com/r/tTlU0W/6
+/* eslint-disable prettier/prettier */
+export const PACKAGE_PATH_NAME = new RegExp(
+  [
+    `(?:${PACKAGE_PREFIX.source}/)`,
+    // match dependency
+    '(?:',
+    '(',
+    `(?:@${PACKAGE_SLUG.source}[/|+])?`,
+    `(?:(?:${PACKAGE_SLUG.source}\\+)*)`,
+    `(?:${PACKAGE_SLUG.source})`,
+    ')',
+    `(?:${VERSION.source})?`,
+    ')',
+    // match peer dependency
+    '(?:_',
+    '(',
+    `(?:@${PACKAGE_SLUG.source}[/|+])?`,
+    `(?:${PACKAGE_SLUG.source})`,
+    ')',
+    `(?:@${PACKAGE_SLUG.source})`,
+    ')*',
+    '/',
+  ].join(''),
+  'g',
+);
+/* eslint-enable prettier/prettier */

package/src/webpack/extract/assets-size-total-insight.js

@@ -4,21 +4,21 @@ import template from 'lodash/template';
 import { INSIGHT_INFO } from '../../config/insights';
 import { getMetricRunInfo } from '../../utils/metrics';
 import { getMetricType } from '../utils';
-import { MetricId } from '../constants';
 
 const INFO_TEMPLATE = template(
   '<%= metric %> — <%= displayValue %> (<%= displayDeltaPercentage %>).',
 );
+const METRIC_NAME = 'totalSizeByTypeALL';
 
 export const extractAssetsSizeTotalInsight = (
   webpackStats,
   currentExtractedData,
   baselineBundleStats,
 ) => {
-  const currentValue = get(currentExtractedData, ['metrics', MetricId.BundleSize, 'value'], 0);
-  const baselineValue = get(baselineBundleStats, ['metrics', 'webpack', MetricId.BundleSize, 'value'], 0);
+  const currentValue = get(currentExtractedData, ['metrics', METRIC_NAME, 'value'], 0);
+  const baselineValue = get(baselineBundleStats, ['metrics', 'webpack', METRIC_NAME, 'value'], 0);
 
-  const metric = getMetricType(MetricId.BundleSize);
+  const metric = getMetricType(METRIC_NAME);
   const info = getMetricRunInfo(metric, currentValue, baselineValue);
   const { displayDeltaPercentage, displayValue } = info;
 

package/src/webpack/extract/assets-size.js

@@ -4,9 +4,11 @@ import sum from 'lodash/sum';
 
 import { FILE_TYPE_CSS, FILE_TYPE_JS, FILE_TYPES } from '../../config/file-types';
 import { getFileType } from '../../utils/file-types';
-import { SIZE_BY_TYPE_METRIC_ID_PREFIX, SIZE_BY_TYPE_METRIC_ID_ALL } from '../constants';
 
-const getMetricName = (fileType) => `${SIZE_BY_TYPE_METRIC_ID_PREFIX}${fileType}`;
+const METRIC_NAME_ALL = 'ALL';
+const METRIC_NAME_PREFIX = 'totalSizeByType';
+
+const getMetricName = (fileType) => `${METRIC_NAME_PREFIX}${fileType}`;
 
 const generateInitialSizeByType = () => FILE_TYPES.reduce((accumulator, fileType) => ({
   ...accumulator,
@@ -50,7 +52,7 @@ export const extractAssetsSize = (webpackStats, currentExtractedData) => {
 
   const sizes = calculateTotalByType(bundleAssets);
   const generic = {
-    [getMetricName(SIZE_BY_TYPE_METRIC_ID_ALL)]: {
+    [getMetricName(METRIC_NAME_ALL)]: {
       value: sum(map(bundleAssets, 'value')),
     },
     ...calculateInitialTotals(bundleAssets),

package/src/webpack/extract/index.js

@@ -1,6 +1,5 @@
 import merge from 'lodash/merge';
 
-import * as budgetsInsights from '../../transformers/budgets-insights';
 import { extractAssets } from './assets';
 import { extractAssetsCacheInvalidation } from './assets-cache-invalidation';
 import { extractAssetsChunkCount } from './assets-chunk-count';
@@ -27,11 +26,10 @@ const extractFns = [
   extractModulesPackages,
   extractModulesPackagesCount,
   extractModulesPackagesDuplicate,
-  budgetsInsights.getExtract('webpack'),
 ];
 
-export const extract = (webpackStats, baseline, options) =>
-  extractFns.reduce(
-    (agg, extractFn) => merge({}, agg, extractFn(webpackStats, agg, baseline, options)),
-    {},
-  );
+export const extract = (webpackStats, baseline) => extractFns.reduce((agg, extractFn) => merge(
+  {},
+  agg,
+  extractFn(webpackStats, agg, baseline),
+), {});

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

@@ -3,7 +3,7 @@ import map from 'lodash/map';
 import orderBy from 'lodash/orderBy';
 import sum from 'lodash/sum';
 
-import { InsightType } from '../../constants';
+import { INSIGHT_WARNING } from '../../config';
 
 export const extractModulesPackagesDuplicate = (webpackStats, currentExtractedData) => {
   const source = get(currentExtractedData, 'metrics.packages', {});
@@ -89,7 +89,7 @@ export const extractModulesPackagesDuplicate = (webpackStats, currentExtractedDa
   return {
     insights: {
       duplicatePackages: {
-        type: InsightType.WARNING,
+        type: INSIGHT_WARNING,
         data,
       },
     },

package/src/webpack/extract/modules.ts

@@ -1,4 +1,5 @@
 import isEmpty from 'lodash/isEmpty';
+import round from 'lodash/round';
 
 import { ModuleMetric, WebpackMetricsModules } from '../../constants';
 import { getModuleName, normalizeChunkId } from '../utils';
@@ -10,7 +11,7 @@ interface WebpackModule {
 }
 
 interface WebpackModuleWithConcatenatedModules extends WebpackModule {
-  modules?: Array<Pick<WebpackModule, 'name' | 'size'>>;
+  modules: Array<Pick<WebpackModule, 'name' | 'size'>>;
 }
 
 /*
@@ -20,7 +21,13 @@ export const extractModules = (webpackStats?: any): WebpackMetricsModules => {
   const modulesSource: Array<WebpackModuleWithConcatenatedModules> = webpackStats?.modules || [];
 
   if (!modulesSource) {
-    return { metrics: { modules: {} } };
+    return {
+      metrics: {
+        duplicateCode: { value: 0 },
+        duplicateModulesCount: { value: 0 },
+        modules: {},
+      },
+    };
   }
 
   // Flatten concatenated modules
@@ -43,25 +50,49 @@ export const extractModules = (webpackStats?: any): WebpackMetricsModules => {
     return agg;
   }, [] as Array<WebpackModule>);
 
+  let totalCodeSize = 0;
+  let duplicateCodeSize = 0;
+  let duplicateModulesCount = 0;
+
   // Normalize module entries
   const modules = allModules.reduce((agg, moduleEntry) => {
     const { name, size, chunks } = moduleEntry;
     const normalizedName = getModuleName(name);
 
-    // skip modules with no chunks
+    // skip modules that do not belong to any chunk
     if (isEmpty(chunks)) {
       return agg;
     }
 
+    const instances = chunks.length;
+    const duplicateInstances = instances - 1;
+
+    duplicateModulesCount += duplicateInstances;
+    duplicateCodeSize += duplicateInstances * size;
+    totalCodeSize += instances * size;
+
     // eslint-disable-next-line no-param-reassign
     agg[normalizedName] = {
       name,
       value: size,
       chunkIds: chunks.map(normalizeChunkId),
+      duplicated: Boolean(duplicateInstances),
     };
 
     return agg;
   }, {} as Record<string, ModuleMetric>);
 
-  return { metrics: { modules } };
+  const duplicateCode = totalCodeSize ? round((duplicateCodeSize / totalCodeSize) * 100, 2) : 0;
+
+  return {
+    metrics: {
+      modules,
+      duplicateCode: {
+        value: duplicateCode,
+      },
+      duplicateModulesCount: {
+        value: duplicateModulesCount,
+      },
+    },
+  };
 };

package/src/webpack/{metrics.ts → metrics.js}

@@ -3,66 +3,76 @@ import {
   METRIC_TYPE_NUMERIC,
   METRIC_TYPE_PERCENTAGE,
 } from '../config/metrics';
-import { MetricId, SizeByTypeMetricId } from './constants';
 
 export const metrics = {
-  [MetricId.BundleSize]: {
+  totalSizeByTypeALL: {
     label: 'Bundle Size',
     description: 'Sum of all assets emitted by webpack.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_FILE_SIZE,
-    biggerIsBetter: false,
   },
-  [MetricId.TotalInitialSizeJS]: {
+  totalInitialSizeJS: {
     label: 'Initial JS',
     description: 'Sum of all JavaScript assets that are labeled as initial(eg: vendor.js, app.js).',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_FILE_SIZE,
-    biggerIsBetter: false,
   },
-  [MetricId.TotalInitialSizeCSS]: {
+  totalInitialSizeCSS: {
     label: 'Initial CSS',
     description: 'Sum of all CSS assets that are labeled as initial(eg: vendor.css, app.css).',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_FILE_SIZE,
-    biggerIsBetter: false,
   },
-  [MetricId.CacheInvalidation]: {
+  cacheInvalidation: {
     label: 'Cache Invalidation',
     description: 'Ratio between the total changed assets and Bundle Size.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_PERCENTAGE,
     biggerIsBetter: false,
   },
-  [MetricId.ChunkCount]: {
+  chunkCount: {
     label: 'Chunks',
     description: 'Total number of chunks generated by webpack.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  [MetricId.AssetCount]: {
+  assetCount: {
     label: 'Assets',
     description: 'Total number of assets emitted by webpack.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#assets',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  [MetricId.ModuleName]: {
+  moduleCount: {
     label: 'Modules',
     description: 'Total number of modules bundled by webpack.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  [MetricId.PackageCount]: {
+  duplicateModulesCount: {
+    label: 'Duplicate Modules',
+    description: 'Total number of modules that belong to more than one chunk.',
+    url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
+    type: METRIC_TYPE_NUMERIC,
+    biggerIsBetter: false,
+  },
+  duplicateCode: {
+    label: 'Duplicate Code',
+    description: 'The percentage of total duplicate module size from the total module size.',
+    url: 'https://relative-ci.com/documentation/metrics-and-data#modules-1',
+    type: METRIC_TYPE_PERCENTAGE,
+    biggerIsBetter: false,
+  },
+  packageCount: {
     label: 'Packages',
     description: 'Total number of packages bundled by webpack.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
     type: METRIC_TYPE_NUMERIC,
     biggerIsBetter: false,
   },
-  [MetricId.DuplicatePackagesCount]: {
+  duplicatePackagesCount: {
     label: 'Duplicate Packages',
     description: 'Total number of packages that are duplicated.',
     url: 'https://relative-ci.com/documentation/metrics-and-data#packages',
@@ -70,40 +80,33 @@ export const metrics = {
     biggerIsBetter: false,
   },
   sizes: {
-    [SizeByTypeMetricId.JS]: {
+    totalSizeByTypeJS: {
       label: 'JS',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
-    [SizeByTypeMetricId.CSS]: {
+    totalSizeByTypeCSS: {
       label: 'CSS',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
-    [SizeByTypeMetricId.IMG]: {
+    totalSizeByTypeIMG: {
       label: 'IMG',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
-    [SizeByTypeMetricId.Media]: {
+    totalSizeByTypeMEDIA: {
       label: 'Media',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
-    [SizeByTypeMetricId.Font]: {
+    totalSizeByTypeFONT: {
       label: 'Fonts',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
-    [SizeByTypeMetricId.HTML]: {
+    totalSizeByTypeHTML: {
       label: 'HTML',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
-    [SizeByTypeMetricId.Other]: {
+    totalSizeByTypeOTHER: {
       label: 'Other',
       type: METRIC_TYPE_FILE_SIZE,
-      biggerIsBetter: false,
     },
   },
 };

package/types/config/component-links.d.ts

@@ -13,6 +13,7 @@ export namespace ASSET_FILTERS {
 export namespace MODULE_FILTERS {
     const CHANGED_1: string;
     export { CHANGED_1 as CHANGED };
+    export const DUPLICATED: string;
     export const FIRST_PARTY: string;
     export const THIRD_PARTY: string;
 }

package/types/constants.d.ts

@@ -40,12 +40,15 @@ export interface Metric {
 export interface ModuleMetric extends Metric {
     name: string;
     chunkIds: Array<String>;
+    duplicated: boolean;
 }
 export interface PackageMetric extends Metric {
     path: string;
 }
 export interface WebpackMetricsModules {
     metrics: {
+        duplicateCode: MetricRun;
+        duplicateModulesCount: MetricRun;
         modules: Record<string, ModuleMetric>;
     };
 }
@@ -154,9 +157,3 @@ export interface BrowsertimeMetrics {
     visualComplete95: MetricRun;
     visualComplete99: MetricRun;
 }
-export declare enum InsightType {
-    ERROR = "ERROR",
-    WARNING = "WARNING",
-    INFO = "INFO",
-    SUCCESS = "SUCCESS"
-}

package/types/i18n.d.ts

@@ -6,6 +6,7 @@ declare namespace _default {
     const COMPONENT_LINK_BUNDLE_ASSETS_COUNT: string;
     const COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: string;
     const COMPONENT_LINK_MODULES: string;
+    const COMPONENT_LINK_MODULES_DUPLICATE: string;
     const COMPONENT_LINK_CHUNK_MODULES: string;
     const COMPONENT_LINK_PACKAGES_COUNT: string;
     const COMPONENT_LINK_PACKAGES_DUPLICATE: string;

package/types/index.d.ts

@@ -1,7 +1,5 @@
 export * from "./browsertime";
 export * from "./config";
-export * from "./constants";
 export * from "./jobs";
 export * from "./report";
 export * from "./utils";
-export * as transformers from "./transformers";

package/types/jobs/create-job.d.ts

@@ -1 +1 @@
-export function createJob(source: any, baseline: any, options?: {}): {};
+export function createJob(source: any, baseline: any): {};

package/types/jobs/create-jobs.d.ts

@@ -1 +1 @@
-export function createJobs(sources: any, options: any): any;
+export function createJobs(sources: any): any;

package/types/utils/component-links.d.ts

@@ -86,6 +86,20 @@ export namespace BUNDLE_MODULES {
     };
     export { params_5 as params };
 }
+export namespace BUNDLE_MODULES_DUPLICATE {
+    const section_7: string;
+    export { section_7 as section };
+    const title_7: string;
+    export { title_7 as title };
+    const params_6: {
+        [x: string]: {
+            filters: {
+                [x: string]: boolean;
+            };
+        };
+    };
+    export { params_6 as params };
+}
 export function getBundleModulesBySearch(search: any): {
     section: string;
     title: string;
@@ -108,32 +122,32 @@ export function getBundleModulesByChunk(chunkIds: any, chunkId: any, fileType?:
     };
 };
 export namespace BUNLDE_PACKAGES_COUNT {
-    const section_7: string;
-    export { section_7 as section };
-    const title_7: string;
-    export { title_7 as title };
-    const params_6: {
+    const section_8: string;
+    export { section_8 as section };
+    const title_8: string;
+    export { title_8 as title };
+    const params_7: {
         [x: string]: {
             filters: {
                 [x: string]: boolean;
             };
         };
     };
-    export { params_6 as params };
+    export { params_7 as params };
 }
 export namespace BUNDLE_PACKAGES_DUPLICATE {
-    const section_8: string;
-    export { section_8 as section };
-    const title_8: string;
-    export { title_8 as title };
-    const params_7: {
+    const section_9: string;
+    export { section_9 as section };
+    const title_9: string;
+    export { title_9 as title };
+    const params_8: {
         [x: string]: {
             filters: {
                 [x: string]: boolean;
             };
         };
     };
-    export { params_7 as params };
+    export { params_8 as params };
 }
 export function getBundleAssetsFileTypeComponentLink(fileType: any, label: any): {
     section: string;

package/types/webpack/constants.d.ts

@@ -1,31 +1,9 @@
-export declare const SECTION_WEBPACK_STATS = "stats";
-export declare const SECTION_WEBPACK_SIZES = "sizes";
-export declare const SECTION_WEBPACK_ASSETS = "assets";
-export declare const SECTION_WEBPACK_MODULES = "modules";
-export declare const SECTION_WEBPACK_PACKAGES = "packages";
-export declare const SECTIONS: string[];
-export declare enum MetricId {
-    BundleSize = "totalSizeByTypeALL",
-    TotalInitialSizeJS = "totalInitialSizeJS",
-    TotalInitialSizeCSS = "totalInitialSizeCSS",
-    CacheInvalidation = "cacheInvalidation",
-    ModuleName = "moduleCount",
-    ChunkCount = "chunkCount",
-    AssetCount = "assetCount",
-    PackageCount = "packageCount",
-    DuplicatePackagesCount = "duplicatePackagesCount"
-}
-export declare const SIZE_BY_TYPE_METRIC_ID_ALL = "ALL";
-export declare const SIZE_BY_TYPE_METRIC_ID_PREFIX = "totalSizeByType";
-export declare enum SizeByTypeMetricId {
-    JS = "totalSizeByTypeJS",
-    CSS = "totalSizeByTypeCSS",
-    IMG = "totalSizeByTypeIMG",
-    Media = "totalSizeByTypeMEDIA",
-    Font = "totalSizeByTypeFONT",
-    HTML = "totalSizeByTypeHTML",
-    Other = "totalSizeByTypeOTHER"
-}
-export declare const SUMMARY_METRIC_PATHS: MetricId[];
-export declare const MODULE_PATH_PACKAGES: RegExp;
-export declare const PACKAGE_PATH_NAME: RegExp;
+export const SECTION_WEBPACK_STATS: "stats";
+export const SECTION_WEBPACK_SIZES: "sizes";
+export const SECTION_WEBPACK_ASSETS: "assets";
+export const SECTION_WEBPACK_MODULES: "modules";
+export const SECTION_WEBPACK_PACKAGES: "packages";
+export const SECTIONS: string[];
+export const SUMMARY_METRIC_PATHS: string[];
+export const MODULE_PATH_PACKAGES: RegExp;
+export const PACKAGE_PATH_NAME: RegExp;

package/types/webpack/extract/index.d.ts

@@ -1 +1 @@
-export function extract(webpackStats: any, baseline: any, options: any): {};
+export function extract(webpackStats: any, baseline: any): {};

package/types/webpack/extract/modules-packages-duplicate.d.ts

@@ -8,7 +8,7 @@ export function extractModulesPackagesDuplicate(webpackStats: any, currentExtrac
 } | {
     insights: {
         duplicatePackages: {
-            type: InsightType;
+            type: string;
             data: {};
         };
     };
@@ -18,4 +18,3 @@ export function extractModulesPackagesDuplicate(webpackStats: any, currentExtrac
         };
     };
 };
-import { InsightType } from "../../constants";