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

package/src/i18n.js

@@ -1,17 +1,22 @@
 export default {
   COMPONENT_LINK_TOTALS: 'View total size by type',
-  COMPONENT_LINK_BUNDLE_ASSETS_INITIAL_JS: 'View all initial JS assets',
-  COMPONENT_LINK_BUNDLE_ASSETS_INITIAL_CSS: 'View all initial CSS assets',
-  COMPONENT_LINK_BUNDLE_ASSETS_CACHE_INVALIDATION: 'View all changed assets',
-  COMPONENT_LINK_BUNDLE_ASSETS_COUNT: 'View all assets',
-  COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: 'View all chunks',
+  COMPONENT_LINK_BUNDLE_ASSET_DETAILS: 'View asset details',
+  COMPONENT_LINK_BUNDLE_ASSETS_INITIAL_JS: 'View initial JS assets',
+  COMPONENT_LINK_BUNDLE_ASSETS_INITIAL_CSS: 'View initial CSS assets',
+  COMPONENT_LINK_BUNDLE_ASSETS_CACHE_INVALIDATION: 'View changed assets',
+  COMPONENT_LINK_BUNDLE_ASSETS_COUNT: 'View assets',
+  COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: 'View chunks',
+  COMPONENT_LINK_BUNDLE_ASSETS_CHUNKS: 'View chunk assets',
   COMPONENT_LINK_MODULES: 'View modules',
   COMPONENT_LINK_MODULES_DUPLICATE: 'View duplicate modules',
+  COMPONENT_LINK_MODULES_BY_FILE_TYPE: (fileType) => `View ${fileType} modules`,
+  COMPONENT_LINK_MODULES_BY_SOURCE: (source) => `View ${source} modules`,
   COMPONENT_LINK_CHUNK_MODULES: 'View chunk modules',
-  COMPONENT_LINK_PACKAGES_COUNT: 'View all packages',
-  COMPONENT_LINK_PACKAGES_CHANGED: 'View all changed packages',
-  COMPONENT_LINK_PACKAGES_DUPLICATE: 'View all duplicate packages',
-  COMPONENT_LINK_PACKAGES_DUPLICATE_CHANGED: 'View all changed duplicate packages',
+  COMPONENT_LINK_PACKAGES_COUNT: 'View packages',
+  COMPONENT_LINK_PACKAGES_CHANGED: 'View changed packages',
+  COMPONENT_LINK_PACKAGES_DUPLICATE: 'View duplicate packages',
+  COMPONENT_LINK_PACKAGES_DUPLICATE_CHANGED: 'View changed duplicate packages',
   COMPONENT_LINK_VIEW_PACKAGE: 'View package',
-  COMPONENT_LINK_BUNDLE_ASSETS_BY_FILE_TYPE: ({ label }) => `View all ${label} assets`,
+  COMPONENT_LINK_BUNDLE_ASSETS_BY_FILE_TYPE: ({ label }) => `View ${label} assets`,
+  COMPONENT_LINK_BUNDLE_ASSETS_BY_ENTRY_TYPE: (assetType) => `View ${assetType} assets`,
 };

package/src/lighthouse/metrics.js

@@ -1,55 +1,53 @@
-import {
-  METRIC_TYPE_SCORE, METRIC_TYPE_DURATION, METRIC_TYPE_FILE_SIZE, METRIC_TYPE_NUMERIC,
-} from '../config/metrics';
+import { MetricTypes } from '../constants';
 
 export const metrics = {
   score: {
     label: 'Score',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   performanceScore: {
     label: 'Performance',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   accessibilityScore: {
     label: 'Accessibility',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   bestPracticesScore: {
     label: 'Best Practices',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   seoScore: {
     label: 'SEO',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
   pwaScore: {
     label: 'PWA',
-    type: METRIC_TYPE_SCORE,
+    type: MetricTypes.Score,
   },
 
   speedIndex: {
     label: 'Perceptual Speed Index',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   firstMeaningfulPaint: {
     label: 'First Meaningful Paint',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   timeToFirstByte: {
     label: 'Time To First Byte',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   firstInteractive: {
     label: 'First Interactive',
-    type: METRIC_TYPE_DURATION,
+    type: MetricTypes.Duration,
   },
   totalByteWeight: {
     label: 'Total Weight',
-    type: METRIC_TYPE_FILE_SIZE,
+    type: MetricTypes.FileSize,
   },
   domSize: {
     label: 'DOM Size',
-    type: METRIC_TYPE_NUMERIC,
+    type: MetricTypes.Numeric,
   },
 };

package/src/report/add-row-metric-data.ts

@@ -1,53 +1,57 @@
 import get from 'lodash/get';
 
 import { getGlobalMetricType, getMetricRunInfo } from '../utils/metrics';
+import { MetricTypes } from '../constants';
 import { getMetricChanged } from './get-metric-changed';
 import * as types from './types';
 
+/* eslint-disable prettier/prettier */
 /**
- * Add row metric diff data
+ * Add metric item data
  */
-export const getAddRowMetricData = (metricType?: string) => (row: types.ReportRow) => {
-  const { key, runs } = row;
-
-  // Resolve row metric
-  // - if the key is a predefined metric, use it
-  // - if the key is not matching an existing metric, use the default metricType
-  const metric = getGlobalMetricType(
-    key,
-    typeof metricType === 'string' && metricType, // explicit, avoid passing of map cb params
-  );
-  const { biggerIsBetter, label } = metric;
-
-  const processedRuns = runs.map((run, index) => {
-    if (!run || typeof run.value === 'undefined' || run.value === null) {
-      return null;
-    }
-
-    const metricRunInfo = getMetricRunInfo(
-      metric,
-      run.value,
-      // Get baseline value only if not the latest run
-      (index + 1 < runs.length) ? get(runs, [index + 1, 'value'], 0) : undefined,
+export const getAddRowMetricData =
+  (metricType?: string) => (row: types.ReportRow): types.ReportMetricRow => {
+    const { key, runs } = row;
+
+    // Resolve row metric
+    // - if the key is a predefined metric, use it
+    // - if the key is not matching an existing metric, use the default metricType
+    const metric = getGlobalMetricType(
+      key,
+      typeof metricType === 'string' ? (metricType as MetricTypes) : undefined, // explicit, avoid passing of map cb params
     );
+    const { biggerIsBetter, label } = metric;
+
+    const processedRuns = runs.map((run, index) => {
+      if (!run || typeof run.value === 'undefined' || run.value === null) {
+        return null;
+      }
+
+      const metricRunInfo = getMetricRunInfo(
+        metric,
+        run.value,
+        // Get baseline value only if not the latest run
+        index + 1 < runs.length ? get(runs, [index + 1, 'value'], 0) : undefined,
+      );
+
+      return {
+        ...run,
+        ...metricRunInfo,
+      };
+    });
 
     return {
-      ...run,
-      ...metricRunInfo,
-    };
-  });
-
-  return {
-    ...row,
+      key: row.key,
 
-    // Metric props
-    biggerIsBetter,
-    label,
+      // Metric props
+      label,
+      biggerIsBetter,
 
-    // Row props
-    changed: getMetricChanged(runs),
+      // Row props
+      changed: getMetricChanged(runs),
 
-    // Runs
-    runs: processedRuns,
+      // Runs
+      runs: processedRuns,
+    };
   };
-};
+/* eslint-enable prettier/prettier */

package/src/report/compare-metrics.ts

@@ -7,9 +7,12 @@ import * as types from './types';
 export const compareMetrics = (
   jobs: Array<any>,
   selectMetrics: (job: any) => any,
-  metricType: string,
-  rowTransformers?: Array<(row: types.ReportRow) => types.ReportRow>,
-) => {
+  metricType?: string,
+  rowTransformers?: Array<types.MetricReportRowTransformFn>,
+): Array<types.ReportMetricRow> => {
   const data = map(jobs, selectMetrics);
-  return mergeMetricsByKey(data, [getAddRowMetricData(metricType), ...(rowTransformers || [])]);
+  return mergeMetricsByKey(data, [
+    getAddRowMetricData(metricType),
+    ...(rowTransformers || []),
+  ]) as Array<types.ReportMetricRow>;
 };

package/src/report/create.ts

@@ -44,7 +44,7 @@ export const createReport = (jobs: Array<Job>): Report => {
       return Object.assign(data, { label: metric.label });
     });
 
-    summary[sourceId] = summaryEntries;
+    summary[sourceId] = summaryEntries as any;
   }, {});
 
   const sectionsData = webpack.compare(jobs);

package/src/report/index.js

@@ -3,3 +3,4 @@ export * from './compare-metrics';
 export * from './create';
 export * from './get-metric-changed';
 export * from './merge-metrics-by-key';
+export * from './types';

package/src/report/merge-metrics-by-key.ts

@@ -4,18 +4,20 @@ import * as types from './types';
 
 type RunMetrics = Record<string, types.MetricValue>;
 
-const mergeWithRuns = (runIndex: number, runsCount: number) =>
-  (aggregated: any, currentRun: any): Array<types.MetricValue | null> => {
-    // if there are no runs, just create an array and fill it with `null`
-    const runs = aggregated || Array(runsCount).fill(null);
+/* eslint-disable prettier/prettier */
+const mergeWithRuns =
+  (runIndex: number, runsCount: number) => (aggregated: any, currentRun: any): Array<types.MetricValue | null> => {
+    // if there are no runs, just create an array with empty values
+    const runs = aggregated || Array(runsCount).fill({ value: 0 });
     runs[runIndex] = currentRun;
 
     return runs;
   };
+/* eslint-enable prettier/prettier */
 
 export const mergeMetricsByKey = (
   runs: Array<RunMetrics>,
-  rowTransformers?: Array<(row: types.ReportRow) => types.ReportRow>,
+  rowTransformers?: Array<types.MetricReportRowTransformFn>,
 ): Array<types.ReportRow> => {
   const runsCount = runs.length;
 

package/src/report/types.ts

@@ -1,3 +1,5 @@
+import type { MetricRunInfo, MetricRunInfoBaseline, MetricTypeConfig } from '../constants';
+
 export interface MetricValue {
   value: number;
   name?: string;
@@ -7,3 +9,18 @@ export interface ReportRow {
   key: string;
   runs: Array<MetricValue | null>;
 }
+
+export type ReportMetricRun = { name?: MetricValue['name'] } & (
+  | MetricRunInfo
+  | MetricRunInfoBaseline
+);
+
+export interface ReportMetricRow {
+  key: string;
+  label: string;
+  biggerIsBetter: MetricTypeConfig['biggerIsBetter'];
+  changed: boolean;
+  runs: Array<ReportMetricRun | null>;
+}
+
+export type MetricReportRowTransformFn = (row: ReportRow) => ReportMetricRow;

package/src/utils/component-links.ts

@@ -1,5 +1,13 @@
-import { stringify } from 'query-string';
-import { JsonParam, encodeQueryParams } from 'serialize-query-params';
+import {
+  BooleanParam,
+  JsonParam,
+  ObjectParam,
+  QueryParamConfig,
+  StringParam,
+  decodeQueryParams,
+  encodeQueryParams,
+} from 'serialize-query-params';
+import isEmpty from 'lodash/isEmpty';
 
 import {
   FILE_TYPES,
@@ -8,6 +16,7 @@ import {
   MODULE_SOURCE_FILE_TYPES,
 } from '../config/file-types';
 import {
+  ASSET_CHUNK,
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
   ASSET_FILTERS,
@@ -21,11 +30,15 @@ import {
 } from '../config/component-links';
 import I18N from '../i18n';
 
-export type ComponentLinkFilters = Record<string, boolean>;
+export type ComponentLinkFilters = Record<string, boolean | string>;
 
 export interface ComponentLinkParams {
   search?: string;
-  filters: ComponentLinkFilters;
+  entryId?: string;
+  metric?: string;
+  filters?: ComponentLinkFilters;
+  sortBy?: string;
+  direction?: string;
 }
 
 export interface ComponentLink {
@@ -159,6 +172,68 @@ export const BUNDLE_ASSETS_CHUNK_COUNT: ComponentLink = {
   },
 };
 
+export const getBundleAsset = (entryId: string): ComponentLink => ({
+  section: SECTIONS.ASSETS,
+  title: I18N.COMPONENT_LINK_BUNDLE_ASSET_DETAILS,
+  params: {
+    [COMPONENT.BUNDLE_ASSETS]: {
+      entryId,
+      filters: {},
+    },
+  },
+});
+
+export const getBundleAssetsByEntryType = (
+  assetType: 'entry' | 'initial' | 'chunk',
+): ComponentLink => ({
+  section: SECTIONS.ASSETS,
+  title: I18N.COMPONENT_LINK_BUNDLE_ASSETS_BY_ENTRY_TYPE(assetType),
+  params: {
+    [COMPONENT.BUNDLE_ASSETS]: {
+      filters: {
+        [ASSET_FILTERS.CHANGED]: false,
+        ...getAssetEntryTypeFilters(false),
+        [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: assetType === 'entry',
+        [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`]: assetType === 'initial',
+        [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`]: assetType === 'chunk',
+      },
+    },
+  },
+});
+
+export const getBundleAssetsFileTypeComponentLink = (
+  fileType: string,
+  label: string = fileType,
+): ComponentLink => ({
+  section: SECTIONS.ASSETS,
+  title: I18N.COMPONENT_LINK_BUNDLE_ASSETS_BY_FILE_TYPE({ label }),
+  params: {
+    [COMPONENT.BUNDLE_ASSETS]: {
+      filters: {
+        ...getAssetFileTypeFilters(false),
+        [`${ASSET_FILE_TYPE}.${fileType}`]: true,
+      },
+    },
+  },
+});
+
+export const getBundleAssetsByChunk = (
+  chunkIds: Array<string>,
+  chunkId: string,
+): ComponentLink => ({
+  section: SECTIONS.ASSETS,
+  title: I18N.COMPONENT_LINK_BUNDLE_ASSETS_CHUNKS,
+  params: {
+    [COMPONENT.BUNDLE_ASSETS]: {
+      filters: {
+        [ASSET_FILTERS.CHUNK]: false,
+        ...getModuleChunkFilters(chunkIds, false),
+        [`${ASSET_CHUNK}.${chunkId}`]: true,
+      },
+    },
+  },
+});
+
 export const BUNDLE_MODULES: ComponentLink = {
   section: SECTIONS.MODULES,
   title: I18N.COMPONENT_LINK_MODULES,
@@ -168,6 +243,7 @@ export const BUNDLE_MODULES: ComponentLink = {
         // Keep a filter to allow the merge and skip default
         [MODULE_FILTERS.CHANGED]: false,
       },
+      [MODULE_FILTERS.METRIC]: 'totalSize',
     },
   },
 };
@@ -181,6 +257,7 @@ export const BUNDLE_MODULES_DUPLICATE: ComponentLink = {
         [MODULE_FILTERS.CHANGED]: false,
         [MODULE_FILTERS.DUPLICATED]: true,
       },
+      [MODULE_FILTERS.METRIC]: 'duplicateSize',
     },
   },
 };
@@ -221,6 +298,35 @@ export const getBundleModulesByChunk = (
   },
 });
 
+export const getBundleModulesByFileTpe = (
+  fileType: string,
+  fileTypeLabel?: string,
+): ComponentLink => ({
+  section: SECTIONS.MODULES,
+  title: I18N.COMPONENT_LINK_MODULES_BY_FILE_TYPE(fileTypeLabel || fileType),
+  params: {
+    [COMPONENT.BUNDLE_MODULES]: {
+      filters: {
+        ...getModuleFileTypeFilters(false),
+        [`${MODULE_FILE_TYPE}.${fileType}`]: true,
+      },
+    },
+  },
+});
+
+export const getBundleModulesBySource = (thirdParty: boolean, label = ''): ComponentLink => ({
+  section: SECTIONS.MODULES,
+  title: I18N.COMPONENT_LINK_MODULES_BY_SOURCE(label),
+  params: {
+    [COMPONENT.BUNDLE_MODULES]: {
+      filters: {
+        [`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`]: thirdParty,
+        [`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`]: !thirdParty,
+      },
+    },
+  },
+});
+
 export const BUNDLE_PACKAGES_COUNT: ComponentLink = {
   section: SECTIONS.PACKAGES,
   title: I18N.COMPONENT_LINK_PACKAGES_COUNT,
@@ -272,22 +378,6 @@ export const BUNDLE_PACKAGES_DUPLICATE_CHANGED: ComponentLink = {
   },
 };
 
-export const getBundleAssetsFileTypeComponentLink = (
-  fileType: string,
-  label: string,
-): ComponentLink => ({
-  section: SECTIONS.ASSETS,
-  title: I18N.COMPONENT_LINK_BUNDLE_ASSETS_BY_FILE_TYPE({ label }),
-  params: {
-    [COMPONENT.BUNDLE_ASSETS]: {
-      filters: {
-        ...getAssetFileTypeFilters(false),
-        [`${ASSET_FILE_TYPE}.${fileType}`]: true,
-      },
-    },
-  },
-});
-
 export const getBundlePackagesByNameComponentLink = (search: string): ComponentLink => ({
   section: SECTIONS.PACKAGES,
   title: I18N.COMPONENT_LINK_VIEW_PACKAGE,
@@ -301,29 +391,180 @@ export const getBundlePackagesByNameComponentLink = (search: string): ComponentL
   },
 });
 
-export const getComponentStateQueryString = (params = {}) => {
-  const meta = Object.keys(params).reduce(
-    (agg, componentName) => ({
-      ...agg,
-      [componentName]: JsonParam,
-    }),
-    {},
+/**
+ * Custom URI ecoding/decoding that encodes the params used by ObjectParam as separators: `_`, `-`
+ */
+const CUSTOM_ENCODING_URI_CHARS_PATTERN = /(_|-)/g;
+const CUSTOM_ENCODING_URI_CODE_PATTERN = /(%(?:2D|5F))/g;
+
+function customEncodeURIComponent(value: string): string {
+  return encodeURIComponent(value).replace(
+    CUSTOM_ENCODING_URI_CHARS_PATTERN,
+    (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`,
+  );
+}
+
+function customDecodeURIComponent(value: string): string {
+  const encodedURI = value.replace(CUSTOM_ENCODING_URI_CODE_PATTERN, (code) =>
+    String.fromCharCode(parseInt(code.replace(/^%/, ''), 16)),
   );
 
-  return stringify(encodeQueryParams(meta, params));
+  return decodeURIComponent(encodedURI);
+}
+
+/**
+ * Custom section params encoder/decoder
+ *
+ * @NOTE To keep the length of the query string small when using a lot of filters (ex: chunks)
+ * we use different encoding/decoding algorithms depending on the property type:
+ *
+ * - section: JsonParam
+ *   - search: StringParam
+ *   - entryId: StringParam
+ *   - metric: StringParam
+ *   - sortBy: StringParam
+ *   - direction: StringParam
+ *   - filters: ObjectParam
+ *      - value: BooleanParam
+ */
+export const ComponentStateParam: QueryParamConfig<any, any> = {
+  encode: (sectionState) => {
+    if (!sectionState) {
+      return undefined;
+    }
+
+    const search = StringParam.encode(sectionState.search);
+    const entryId = StringParam.encode(sectionState.entryId);
+    const metric = StringParam.encode(sectionState.metric);
+    const sortBy = StringParam.encode(sectionState.sortBy);
+    const direction = StringParam.encode(sectionState.direction);
+
+    const filtersEncodedValues: Record<string, string> = {};
+    Object.entries(sectionState.filters || {}).forEach(([key, val]) => {
+      filtersEncodedValues[customEncodeURIComponent(key)] = BooleanParam.encode(!!val) as string;
+    });
+    const filters = ObjectParam.encode(filtersEncodedValues);
+
+    const data = {} as any;
+
+    if (search) {
+      data.search = search;
+    }
+
+    if (entryId) {
+      data.entryId = entryId;
+    }
+
+    if (metric) {
+      data.metric = metric;
+    }
+
+    if (sortBy) {
+      data.sortBy = sortBy;
+    }
+
+    if (direction) {
+      data.direction = direction;
+    }
+
+    if (!isEmpty(filters)) {
+      data.filters = filters;
+    }
+
+    return JsonParam.encode(data);
+  },
+  decode: (queryString) => {
+    const params = JsonParam.decode(queryString);
+
+    if (isEmpty(params)) {
+      return undefined;
+    }
+
+    const search = StringParam.decode(params.search);
+    const entryId = StringParam.decode(params.entryId);
+    const metric = StringParam.decode(params.metric);
+    const sortBy = StringParam.decode(params.sortBy);
+    const direction = StringParam.decode(params.direction);
+
+    let filters: Record<string, boolean> = {};
+
+    // Decode filters if typeof is string (mixed encoding)
+    // .1 ObjectParam
+    // .2 BooleanParam
+    if (typeof params.filters === 'string') {
+      const decodedFilters = ObjectParam.decode(params.filters);
+
+      Object.entries(decodedFilters || {}).forEach(([key, value]) => {
+        const filterDecodedValue = BooleanParam.decode(value);
+
+        if (typeof filterDecodedValue !== 'undefined' && filterDecodedValue !== null) {
+          filters[customDecodeURIComponent(key)] = filterDecodedValue;
+        }
+      });
+    } else if (typeof params.filters === 'object') {
+      // Use directly if already decoded (JSON encoding - obsolete)
+      filters = params.filters;
+    }
+
+    // Include only the truthy values
+    const result: Record<string, any> = {};
+
+    if (search) {
+      result.search = search;
+    }
+
+    if (entryId) {
+      result.entryId = entryId;
+    }
+
+    if (metric) {
+      result.metric = metric;
+    }
+
+    if (sortBy) {
+      result.sortBy = sortBy;
+    }
+
+    if (direction) {
+      result.direction = direction;
+    }
+
+    if (!isEmpty(filters)) {
+      result.filters = filters;
+    }
+
+    if (isEmpty(result)) {
+      return undefined;
+    }
+
+    return result;
+  },
+};
+
+export const COMPONENT_STATE_META = {
+  [COMPONENT.BUNDLE_ASSETS]: ComponentStateParam,
+  [COMPONENT.BUNDLE_MODULES]: ComponentStateParam,
+  [COMPONENT.BUNDLE_PACKAGES]: ComponentStateParam,
+} as const;
+
+type ComponentStateQueryStringParams = Record<string, ComponentLinkParams>;
+
+export const getComponentStateQueryString = (params: ComponentStateQueryStringParams = {}) => {
+  const data = encodeQueryParams(COMPONENT_STATE_META, params);
+  const searchParams = new URLSearchParams(data as Record<string, string>);
+  return searchParams.toString();
+};
+
+export const getComponentStateData = (queryString: string): ComponentStateQueryStringParams => {
+  const params = new URLSearchParams(queryString);
+  return decodeQueryParams(COMPONENT_STATE_META, Object.fromEntries(params.entries()));
 };
 
 export const METRIC_COMPONENT_LINKS = new Map([
   ['webpack.totalSizeByTypeALL', { link: TOTALS }],
   ['webpack.totalInitialSizeJS', { link: BUNDLE_ASSETS_INITIAL_JS }],
   ['webpack.totalInitialSizeCSS', { link: BUNDLE_ASSETS_INITIAL_CSS }],
-  [
-    'webpack.cacheInvalidation',
-    {
-      link: BUNDLE_ASSETS_CACHE_INVALIDATION,
-      showDelta: false,
-    },
-  ],
+  ['webpack.cacheInvalidation', { link: BUNDLE_ASSETS_CACHE_INVALIDATION }],
   ['webpack.assetCount', { link: BUNDLE_ASSETS_COUNT }],
   ['webpack.chunkCount', { link: BUNDLE_ASSETS_CHUNK_COUNT }],
   ['webpack.moduleCount', { link: BUNDLE_MODULES }],