lighthouse 12.4.0 → 12.5.0-dev.20250325

package/core/audits/audit.js

@@ -491,7 +491,9 @@ class Audit {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const gatherContext = artifacts.GatherContext;
-    return {trace, devtoolsLog, gatherContext, settings: context.settings, URL: artifacts.URL};
+    const {URL, SourceMaps} = artifacts;
+    // eslint-disable-next-line max-len
+    return {trace, devtoolsLog, gatherContext, settings: context.settings, URL, SourceMaps, simulator: null};
   }
 }
 

package/core/audits/bootup-time.js

@@ -49,7 +49,7 @@ class BootupTime extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext', 'SourceMaps'],
     };
   }
 

package/core/audits/byte-efficiency/duplicated-javascript.js

@@ -30,7 +30,7 @@ const UIStrings = {
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
-const IGNORE_THRESHOLD_IN_BYTES = 1024;
+const IGNORE_THRESHOLD_IN_BYTES = 1024 * 10;
 
 /**
  * @param {string} haystack

package/core/audits/byte-efficiency/efficient-animated-content.js

@@ -38,7 +38,7 @@ class EfficientAnimatedContent extends ByteEfficiencyAudit {
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
-      requiredArtifacts: ['devtoolsLogs', 'traces', 'GatherContext', 'URL'],
+      requiredArtifacts: ['devtoolsLogs', 'traces', 'GatherContext', 'URL', 'SourceMaps'],
     };
   }
 

package/core/audits/byte-efficiency/legacy-javascript.d.ts

@@ -1,15 +1,4 @@
 export default LegacyJavascript;
-export type Pattern = {
-    name: string;
-    expression: string;
-    estimateBytes?: (result: PatternMatchResult) => number;
-};
-export type PatternMatchResult = {
-    name: string;
-    line: number;
-    column: number;
-    count: number;
-};
 export type ByteEfficiencyProduct = import("./byte-efficiency-audit.js").ByteEfficiencyProduct;
 export type Item = LH.Audit.ByteEfficiencyItem & {
     subItems: {
@@ -22,43 +11,6 @@ export type SubItem = {
     location: LH.Audit.Details.SourceLocationValue;
 };
 declare class LegacyJavascript extends ByteEfficiencyAudit {
-    /**
-     * @param {string?} object
-     * @param {string} property
-     */
-    static buildPolyfillExpression(object: string | null, property: string): string;
-    static getPolyfillData(): {
-        name: string;
-        modules: string[];
-        corejs?: boolean;
-    }[];
-    static getCoreJsPolyfillData(): {
-        name: string;
-        coreJs2Module: string;
-        coreJs3Module: string;
-    }[];
-    /**
-     * @return {Pattern[]}
-     */
-    static getPolyfillPatterns(): Pattern[];
-    /**
-     * @return {Pattern[]}
-     */
-    static getTransformPatterns(): Pattern[];
-    /**
-     * Returns a collection of match results grouped by script url.
-     *
-     * @param {CodePatternMatcher} matcher
-     * @param {LH.Artifacts['Scripts']} scripts
-     * @param {LH.Artifacts.Bundle[]} bundles
-     * @return {Map<LH.Artifacts.Script, PatternMatchResult[]>}
-     */
-    static detectAcrossScripts(matcher: CodePatternMatcher, scripts: LH.Artifacts["Scripts"], bundles: LH.Artifacts.Bundle[]): Map<LH.Artifacts.Script, PatternMatchResult[]>;
-    /**
-     * @param {PatternMatchResult[]} matches
-     * @return {number}
-     */
-    static estimateWastedBytes(matches: PatternMatchResult[]): number;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
@@ -73,21 +25,4 @@ export namespace UIStrings {
     let detectedCoreJs2Warning: string;
 }
 import { ByteEfficiencyAudit } from './byte-efficiency-audit.js';
-/**
- * Takes a list of patterns (consisting of a name identifier and a RegExp expression string)
- * and returns match results with line / column information for a given code input.
- */
-declare class CodePatternMatcher {
-    /**
-     * @param {Pattern[]} patterns
-     */
-    constructor(patterns: Pattern[]);
-    re: RegExp;
-    patterns: Pattern[];
-    /**
-     * @param {string} code
-     * @return {PatternMatchResult[]}
-     */
-    match(code: string): PatternMatchResult[];
-}
 //# sourceMappingURL=legacy-javascript.d.ts.map

package/core/audits/byte-efficiency/legacy-javascript.js

@@ -5,33 +5,23 @@
  */
 
 /**
- * @fileoverview Identifies polyfills and transforms that should not be present if using module/nomodule pattern.
- * @see https://docs.google.com/document/d/1ItjJwAd6e0Ts6yMbvh8TN3BBh_sAd58rYE1whnpuxaA/edit Design document
+ * @fileoverview Identifies polyfills and transforms that should not be present if needing to support only Baseline browsers.
+ * @see https://docs.google.com/document/d/1ItjJwAd6e0Ts6yMbvh8TN3BBh_sAd58rYE1whnpuxaA/edit Design document (old, based on module/nomodule pattern)
  * @see https://docs.google.com/spreadsheets/d/1z28Au8wo8-c2UsM2lDVEOJcI3jOkb2c951xEBqzBKCc/edit?usp=sharing Legacy babel transforms / polyfills
  * ./core/scripts/legacy-javascript - verification tool.
  */
 
-/** @typedef {{name: string, expression: string, estimateBytes?: (result: PatternMatchResult) => number}} Pattern */
-/** @typedef {{name: string, line: number, column: number, count: number}} PatternMatchResult */
 /** @typedef {import('./byte-efficiency-audit.js').ByteEfficiencyProduct} ByteEfficiencyProduct */
 /** @typedef {LH.Audit.ByteEfficiencyItem & {subItems: {type: 'subitems', items: SubItem[]}}} Item */
 /** @typedef {{signal: string, location: LH.Audit.Details.SourceLocationValue}} SubItem */
 
-import fs from 'fs';
-
 import {Audit} from '../audit.js';
 import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import {EntityClassification} from '../../computed/entity-classification.js';
 import {JSBundles} from '../../computed/js-bundles.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {estimateCompressionRatioForContent} from '../../lib/script-helpers.js';
-import {LH_ROOT} from '../../../shared/root.js';
-
-const graphJson = fs.readFileSync(
-  `${LH_ROOT}/core/audits/byte-efficiency/polyfill-graph-data.json`, 'utf-8');
-
-/** @type {import('../../scripts/legacy-javascript/create-polyfill-size-estimation.js').PolyfillSizeEstimator} */
-const graph = JSON.parse(graphJson);
+import {detectLegacyJavaScript} from '../../lib/legacy-javascript/legacy-javascript.js';
 
 const UIStrings = {
   /** Title of a Lighthouse audit that tells the user about legacy polyfills and transforms used on the page. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -39,7 +29,7 @@ const UIStrings = {
   // eslint-disable-next-line max-len
   // TODO: developer.chrome.com article. this codelab is good starting place: https://web.dev/articles/codelab-serve-modern-code
   /** Description of a Lighthouse audit that tells the user about old JavaScript that is no longer needed. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
-  description: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using [module/nomodule feature detection](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. [Learn how to serve modern JavaScript](https://web.dev/articles/codelab-serve-modern-code)',
+  description: 'Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/baseline) features, unless you know you must support legacy browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)',
   /** Warning text that an outdated version of the library "core-js" was found, and the developer should upgrade. */
   // eslint-disable-next-line max-len
   detectedCoreJs2Warning: 'Version 2 of core-js was detected on the page. You should upgrade to version 3 for many performance improvements.',
@@ -47,70 +37,6 @@ const UIStrings = {
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
-/**
- * Takes a list of patterns (consisting of a name identifier and a RegExp expression string)
- * and returns match results with line / column information for a given code input.
- */
-class CodePatternMatcher {
-  /**
-   * @param {Pattern[]} patterns
-   */
-  constructor(patterns) {
-    const patternsExpression = patterns.map(pattern => `(${pattern.expression})`).join('|');
-    this.re = new RegExp(`(^\r\n|\r|\n)|${patternsExpression}`, 'g');
-    this.patterns = patterns;
-  }
-
-  /**
-   * @param {string} code
-   * @return {PatternMatchResult[]}
-   */
-  match(code) {
-    // Reset RegExp state.
-    this.re.lastIndex = 0;
-
-    const seen = new Set();
-    /** @type {PatternMatchResult[]} */
-    const matches = [];
-    /** @type {RegExpExecArray | null} */
-    let result;
-    let line = 0;
-    let lineBeginsAtIndex = 0;
-    // Each pattern maps to one subgroup in the generated regex. For each iteration of RegExp.exec,
-    // only one subgroup will be defined. Exec until no more matches.
-    while ((result = this.re.exec(code)) !== null) {
-      // Discard first value in `result` - it's just the entire match.
-      const captureGroups = result.slice(1);
-      // isNewline - truthy if matching a newline, used to track the line number.
-      // `patternExpressionMatches` maps to each possible pattern in `this.patterns`.
-      // Only one of [isNewline, ...patternExpressionMatches] is ever truthy.
-      const [isNewline, ...patternExpressionMatches] = captureGroups;
-      if (isNewline) {
-        line++;
-        lineBeginsAtIndex = result.index + 1;
-        continue;
-      }
-      const pattern = this.patterns[patternExpressionMatches.findIndex(Boolean)];
-
-      if (seen.has(pattern)) {
-        const existingMatch = matches.find(m => m.name === pattern.name);
-        if (existingMatch) existingMatch.count += 1;
-        continue;
-      }
-      seen.add(pattern);
-
-      matches.push({
-        name: pattern.name,
-        line,
-        column: result.index - lineBeginsAtIndex,
-        count: 1,
-      });
-    }
-
-    return matches;
-  }
-}
-
 class LegacyJavascript extends ByteEfficiencyAudit {
   /**
    * @return {LH.Audit.Meta}
@@ -127,281 +53,6 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     };
   }
 
-  /**
-   * @param {string?} object
-   * @param {string} property
-   */
-  static buildPolyfillExpression(object, property) {
-    const qt = (/** @type {string} */ token) =>
-      `['"]${token}['"]`; // don't worry about matching string delims
-
-    let expression = '';
-
-    if (object) {
-      // String.prototype.startsWith =
-      expression += `${object}\\.${property}\\s?=[^=]`;
-    } else {
-      // Promise =
-      // window.Promise =// Promise =Z
-      // but not: SomePromise =
-      expression += `(?:window\\.|[\\s;]+)${property}\\s?=[^=]`;
-    }
-
-    // String.prototype['startsWith'] =
-    if (object) {
-      expression += `|${object}\\[${qt(property)}\\]\\s?=[^=]`;
-    }
-
-    // Object.defineProperty(String.prototype, 'startsWith'
-    expression += `|defineProperty\\(${object || 'window'},\\s?${qt(property)}`;
-
-    // es-shims
-    // no(Object,{entries:r},{entries:function
-    if (object) {
-      expression += `|\\(${object},\\s*{${property}:.*},\\s*{${property}`;
-    }
-
-    // core-js
-    if (object) {
-      const objectWithoutPrototype = object.replace('.prototype', '');
-      // e(e.S,"Object",{values
-      // Minified + mangled pattern found in CDN babel-polyfill.
-      // see https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js
-      // TODO: perhaps this is the wrong place to check for a CDN polyfill. Remove?
-      // expression += `|;e\\([^,]+,${qt(objectWithoutPrototype)},{${property}:`;
-
-      // core-js@2 minified pattern.
-      // $export($export.S,"Date",{now:function
-      expression += `|\\$export\\([^,]+,${qt(objectWithoutPrototype)},{${property}:`;
-
-      // core-js@3 minified pattern.
-      // {target:"Array",proto:true},{fill:fill
-      // {target:"Array",proto:true,forced:!HAS_SPECIES_SUPPORT||!USES_TO_LENGTH},{filter:
-      expression += `|{target:${qt(objectWithoutPrototype)}\\S*},{${property}:`;
-    } else {
-      // WeakSet, etc.
-      expression += `|function ${property}\\(`;
-    }
-
-    return expression;
-  }
-
-  static getPolyfillData() {
-    /** @type {Array<{name: string, modules: string[], corejs?: boolean}>} */
-    const data = [
-      {name: 'focus-visible', modules: ['focus-visible']},
-    ];
-
-    const coreJsPolyfills = [
-      ['Array.prototype.fill', 'es6.array.fill'],
-      ['Array.prototype.filter', 'es6.array.filter'],
-      ['Array.prototype.find', 'es6.array.find'],
-      ['Array.prototype.findIndex', 'es6.array.find-index'],
-      ['Array.prototype.forEach', 'es6.array.for-each'],
-      ['Array.from', 'es6.array.from'],
-      ['Array.isArray', 'es6.array.is-array'],
-      ['Array.prototype.map', 'es6.array.map'],
-      ['Array.of', 'es6.array.of'],
-      ['Array.prototype.some', 'es6.array.some'],
-      ['Date.now', 'es6.date.now'],
-      ['Date.prototype.toISOString', 'es6.date.to-iso-string'],
-      ['Date.prototype.toJSON', 'es6.date.to-json'],
-      ['Date.prototype.toString', 'es6.date.to-string'],
-      ['Function.prototype.name', 'es6.function.name'],
-      ['Number.isInteger', 'es6.number.is-integer'],
-      ['Number.isSafeInteger', 'es6.number.is-safe-integer'],
-      ['Object.defineProperties', 'es6.object.define-properties'],
-      ['Object.defineProperty', 'es6.object.define-property'],
-      ['Object.freeze', 'es6.object.freeze'],
-      ['Object.getPrototypeOf', 'es6.object.get-prototype-of'],
-      ['Object.isExtensible', 'es6.object.is-extensible'],
-      ['Object.isFrozen', 'es6.object.is-frozen'],
-      ['Object.isSealed', 'es6.object.is-sealed'],
-      ['Object.keys', 'es6.object.keys'],
-      ['Object.preventExtensions', 'es6.object.prevent-extensions'],
-      ['Object.seal', 'es6.object.seal'],
-      ['Object.setPrototypeOf', 'es6.object.set-prototype-of'],
-      ['Reflect.apply', 'es6.reflect.apply'],
-      ['Reflect.construct', 'es6.reflect.construct'],
-      ['Reflect.defineProperty', 'es6.reflect.define-property'],
-      ['Reflect.deleteProperty', 'es6.reflect.delete-property'],
-      ['Reflect.get', 'es6.reflect.get'],
-      ['Reflect.getOwnPropertyDescriptor', 'es6.reflect.get-own-property-descriptor'],
-      ['Reflect.getPrototypeOf', 'es6.reflect.get-prototype-of'],
-      ['Reflect.has', 'es6.reflect.has'],
-      ['Reflect.isExtensible', 'es6.reflect.is-extensible'],
-      ['Reflect.ownKeys', 'es6.reflect.own-keys'],
-      ['Reflect.preventExtensions', 'es6.reflect.prevent-extensions'],
-      ['Reflect.setPrototypeOf', 'es6.reflect.set-prototype-of'],
-      ['String.prototype.codePointAt', 'es6.string.code-point-at'],
-      ['String.raw', 'es6.string.raw'],
-      ['String.prototype.repeat', 'es6.string.repeat'],
-      ['Object.entries', 'es7.object.entries'],
-      ['Object.getOwnPropertyDescriptors', 'es7.object.get-own-property-descriptors'],
-      ['Object.values', 'es7.object.values'],
-    ];
-
-    for (const [name, coreJs2Module] of coreJsPolyfills) {
-      // es-shims follows a pattern for its packages.
-      // Tack it onto the corejs size estimation, as it is likely close in size.
-      const esShimModule = name.toLowerCase();
-      data.push({
-        name,
-        modules: [
-          coreJs2Module,
-          // corejs 3 module name
-          coreJs2Module
-            .replace('es6.', 'es.')
-            .replace('es7.', 'es.')
-            .replace('typed.', 'typed-array.'),
-          esShimModule,
-        ],
-        corejs: true,
-      });
-    }
-
-    return data;
-  }
-
-  static getCoreJsPolyfillData() {
-    return this.getPolyfillData().filter(d => d.corejs).map(d => {
-      return {
-        name: d.name,
-        coreJs2Module: d.modules[0],
-        coreJs3Module: d.modules[1],
-      };
-    });
-  }
-
-  /**
-   * @return {Pattern[]}
-   */
-  static getPolyfillPatterns() {
-    /** @type {Pattern[]} */
-    const patterns = [];
-
-    for (const {name} of this.getCoreJsPolyfillData()) {
-      const parts = name.split('.');
-      const object = parts.length > 1 ? parts.slice(0, parts.length - 1).join('.') : null;
-      const property = parts[parts.length - 1];
-      patterns.push({
-        name,
-        expression: this.buildPolyfillExpression(object, property),
-      });
-    }
-
-    return patterns;
-  }
-
-  /**
-   * @return {Pattern[]}
-   */
-  static getTransformPatterns() {
-    return [
-      {
-        name: '@babel/plugin-transform-classes',
-        expression: 'Cannot call a class as a function',
-        estimateBytes: result => 150 + result.count * '_classCallCheck()'.length,
-      },
-      {
-        name: '@babel/plugin-transform-regenerator',
-        expression: /regeneratorRuntime\(?\)?\.a?wrap/.source,
-        // Example of this transform: https://gist.github.com/connorjclark/af8bccfff377ac44efc104a79bc75da2
-        // `regeneratorRuntime.awrap` is generated for every usage of `await`, and adds ~80 bytes each.
-        estimateBytes: result => result.count * 80,
-      },
-      {
-        name: '@babel/plugin-transform-spread',
-        expression: /\.apply\(void 0,\s?_toConsumableArray/.source,
-        estimateBytes: result => 1169 + result.count * '_toConsumableArray()'.length,
-      },
-    ];
-  }
-
-  /**
-   * Returns a collection of match results grouped by script url.
-   *
-   * @param {CodePatternMatcher} matcher
-   * @param {LH.Artifacts['Scripts']} scripts
-   * @param {LH.Artifacts.Bundle[]} bundles
-   * @return {Map<LH.Artifacts.Script, PatternMatchResult[]>}
-   */
-  static detectAcrossScripts(matcher, scripts, bundles) {
-    /** @type {Map<LH.Artifacts.Script, PatternMatchResult[]>} */
-    const scriptToMatchResults = new Map();
-    const polyfillData = this.getPolyfillData();
-
-    for (const script of Object.values(scripts)) {
-      if (!script.content) continue;
-
-      // Start with pattern matching against the downloaded script.
-      const matches = matcher.match(script.content);
-
-      // If it's a bundle with source maps, add in the polyfill modules by name too.
-      const bundle = bundles.find(b => b.script.scriptId === script.scriptId);
-      if (bundle) {
-        for (const {name, modules} of polyfillData) {
-          // Skip if the pattern matching found a match for this polyfill.
-          if (matches.some(m => m.name === name)) continue;
-
-          const source = bundle.rawMap.sources.find(source => modules.some(module => {
-            return source.endsWith(`/${module}.js`) || source.includes(`node_modules/${module}/`);
-          }));
-          if (!source) continue;
-
-          const mapping = bundle.map.mappings().find(m => m.sourceURL === source);
-          if (mapping) {
-            matches.push({name, line: mapping.lineNumber, column: mapping.columnNumber, count: 1});
-          } else {
-            matches.push({name, line: 0, column: 0, count: 1});
-          }
-        }
-      }
-
-      if (!matches.length) continue;
-      scriptToMatchResults.set(script, matches);
-    }
-
-    return scriptToMatchResults;
-  }
-
-  /**
-   * @param {PatternMatchResult[]} matches
-   * @return {number}
-   */
-  static estimateWastedBytes(matches) {
-    // Split up results based on polyfill / transform. Only transforms start with @.
-    const polyfillResults = matches.filter(m => !m.name.startsWith('@'));
-    const transformResults = matches.filter(m => m.name.startsWith('@'));
-
-    let estimatedWastedBytesFromPolyfills = 0;
-    const modulesSeen = new Set();
-    for (const result of polyfillResults) {
-      const modules = graph.dependencies[result.name];
-      if (!modules) continue; // Shouldn't happen.
-      for (const module of modules) {
-        modulesSeen.add(module);
-      }
-    }
-
-    estimatedWastedBytesFromPolyfills += [...modulesSeen].reduce((acc, moduleIndex) => {
-      return acc + graph.moduleSizes[moduleIndex];
-    }, 0);
-    estimatedWastedBytesFromPolyfills = Math.min(estimatedWastedBytesFromPolyfills, graph.maxSize);
-
-    let estimatedWastedBytesFromTransforms = 0;
-
-    for (const result of transformResults) {
-      const pattern = this.getTransformPatterns().find(p => p.name === result.name);
-      if (!pattern || !pattern.estimateBytes) continue;
-      estimatedWastedBytesFromTransforms += pattern.estimateBytes(result);
-    }
-
-    const estimatedWastedBytes =
-      estimatedWastedBytesFromPolyfills + estimatedWastedBytesFromTransforms;
-    return estimatedWastedBytes;
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
@@ -418,20 +69,18 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     /** @type {Item[]} */
     const items = [];
 
-    const matcher = new CodePatternMatcher([
-      ...this.getPolyfillPatterns(),
-      ...this.getTransformPatterns(),
-    ]);
-
     /** @type {Map<string, number>} */
     const compressionRatioByUrl = new Map();
 
-    const scriptToMatchResults =
-      this.detectAcrossScripts(matcher, artifacts.Scripts, bundles);
-    for (const [script, matches] of scriptToMatchResults.entries()) {
+    for (const script of artifacts.Scripts) {
+      const bundle = bundles.find(bundle => bundle.script.scriptId === script.scriptId);
+      const {matches, estimatedByteSavings} =
+        detectLegacyJavaScript(script.content ?? '', bundle?.map ?? null);
+      if (matches.length === 0) continue;
+
       const compressionRatio = estimateCompressionRatioForContent(
         compressionRatioByUrl, script.url, artifacts, networkRecords);
-      const wastedBytes = Math.round(this.estimateWastedBytes(matches) * compressionRatio);
+      const wastedBytes = Math.round(estimatedByteSavings * compressionRatio);
       /** @type {typeof items[number]} */
       const item = {
         url: script.url,
@@ -444,7 +93,6 @@ class LegacyJavascript extends ByteEfficiencyAudit {
         totalBytes: 0,
       };
 
-      const bundle = bundles.find(bundle => bundle.script.scriptId === script.scriptId);
       for (const match of matches) {
         const {name, line, column} = match;
         /** @type {SubItem} */

package/core/audits/byte-efficiency/modern-image-formats.js

@@ -37,7 +37,7 @@ class ModernImageFormats extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['OptimizedImages', 'devtoolsLogs', 'traces', 'URL', 'GatherContext',
-        'ImageElements'],
+        'ImageElements', 'SourceMaps'],
     };
   }
 

package/core/audits/byte-efficiency/offscreen-images.js

@@ -52,7 +52,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       supportedModes: ['navigation'],
       guidanceLevel: 2,
       requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext', 'devtoolsLogs',
-        'traces', 'URL'],
+        'traces', 'URL', 'SourceMaps'],
     };
   }
 
@@ -163,12 +163,12 @@ class OffscreenImages extends ByteEfficiencyAudit {
    * @return {Promise<import('./byte-efficiency-audit.js').ByteEfficiencyProduct>}
    */
   static async audit_(artifacts, networkRecords, context) {
+    const {URL, SourceMaps} = artifacts;
     const images = artifacts.ImageElements;
     const viewportDimensions = artifacts.ViewportDimensions;
     const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[ByteEfficiencyAudit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[ByteEfficiencyAudit.DEFAULT_PASS];
-    const URL = artifacts.URL;
 
     /** @type {string[]} */
     const warnings = [];
@@ -199,7 +199,8 @@ class OffscreenImages extends ByteEfficiencyAudit {
     const unfilteredResults = Array.from(resultsMap.values());
     // get the interactive time or fallback to getting the end of trace time
     try {
-      const metricComputationData = {trace, devtoolsLog, gatherContext, settings, URL};
+      const metricComputationData =
+        {trace, devtoolsLog, gatherContext, settings, URL, SourceMaps, simulator: null};
       const interactive = await Interactive.request(metricComputationData, context);
 
       // use interactive to generate items

package/core/audits/byte-efficiency/render-blocking-resources.js

@@ -112,7 +112,8 @@ class RenderBlockingResources extends Audit {
       // TODO: look into adding an `optionalArtifacts` property that captures the non-required nature
       // of CSSUsage
       requiredArtifacts:
-        ['URL', 'traces', 'devtoolsLogs', 'Stylesheets', 'CSSUsage', 'GatherContext', 'Stacks'],
+        // eslint-disable-next-line max-len
+        ['URL', 'traces', 'devtoolsLogs', 'Stylesheets', 'CSSUsage', 'GatherContext', 'Stacks', 'SourceMaps'],
     };
   }
 
@@ -122,13 +123,15 @@ class RenderBlockingResources extends Audit {
    * @return {Promise<{fcpWastedMs: number, lcpWastedMs: number, results: Array<{url: string, totalBytes: number, wastedMs: number}>}>}
    */
   static async computeResults(artifacts, context) {
+    const settings = context.settings;
     const gatherContext = artifacts.GatherContext;
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const SourceMaps = artifacts.SourceMaps;
     const simulatorData = {devtoolsLog, settings: context.settings};
     const simulator = await LoadSimulator.request(simulatorData, context);
     const wastedCssBytes = await RenderBlockingResources.computeWastedCSSBytes(artifacts, context);
-    const navInsights = await NavigationInsights.request(trace, context);
+    const navInsights = await NavigationInsights.request({trace, settings, SourceMaps}, context);
 
     const renderBlocking = navInsights.model.RenderBlocking;
     if (renderBlocking instanceof Error) throw renderBlocking;
@@ -140,7 +143,7 @@ class RenderBlockingResources extends Audit {
     };
 
     const metricComputationData = {trace, devtoolsLog, gatherContext, simulator,
-      settings: metricSettings, URL: artifacts.URL};
+      settings: metricSettings, URL: artifacts.URL, SourceMaps: artifacts.SourceMaps};
 
     // Cast to just `LanternMetric` since we explicitly set `throttlingMethod: 'simulate'`.
     const fcpSimulation = /** @type {LH.Artifacts.LanternMetric} */

package/core/audits/byte-efficiency/unminified-css.js

@@ -37,7 +37,8 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
-      requiredArtifacts: ['Stylesheets', 'devtoolsLogs', 'traces', 'URL', 'GatherContext'],
+      requiredArtifacts: ['Stylesheets', 'devtoolsLogs', 'traces', 'URL', 'GatherContext',
+        'SourceMaps'],
     };
   }
 

package/core/audits/byte-efficiency/unminified-javascript.js

@@ -44,7 +44,8 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
       description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
-      requiredArtifacts: ['Scripts', 'devtoolsLogs', 'traces', 'GatherContext', 'URL'],
+      requiredArtifacts: ['Scripts', 'devtoolsLogs', 'traces', 'GatherContext', 'URL',
+        'SourceMaps'],
     };
   }
 

package/core/audits/byte-efficiency/unused-css-rules.js

@@ -35,7 +35,7 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       requiredArtifacts:
-        ['Stylesheets', 'CSSUsage', 'URL', 'devtoolsLogs', 'traces', 'GatherContext'],
+        ['Stylesheets', 'CSSUsage', 'URL', 'devtoolsLogs', 'traces', 'GatherContext', 'SourceMaps'],
     };
   }