core(insights): implement duplicated-javascript-insight

core/audits/insights/duplicated-javascript-insight.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */ // TODO: remove once implemented.
-
 /**
  * @license
  * Copyright 2025 Google LLC
@@ -10,11 +8,14 @@ import {UIStrings} from '@paulirish/trace_engine/models/trace/insights/Duplicate
 
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
-import {adaptInsightToAuditProduct, makeNodeItemForNodeId} from './insight-audit.js';
+import {adaptInsightToAuditProduct} from './insight-audit.js';
 
 // eslint-disable-next-line max-len
 const str_ = i18n.createIcuMessageFn('node_modules/@paulirish/trace_engine/models/trace/insights/DuplicatedJavaScript.js', UIStrings);
 
+/** @typedef {LH.Audit.Details.TableItem & {source: string, subItems: {type: 'subitems', items: SubItem[]}}} Item */
+/** @typedef {{url: string, sourceTransferBytes: number|LH.Audit.Details.TextValue}} SubItem */
+
 class DuplicatedJavaScriptInsight extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -26,9 +27,8 @@ class DuplicatedJavaScriptInsight extends Audit {
       failureTitle: str_(UIStrings.title),
       description: str_(UIStrings.description),
       guidanceLevel: 2,
-      requiredArtifacts: ['Trace', 'TraceElements', 'SourceMaps'],
-      // TODO: enable when implemented.
-      // replacesAudits: ['duplicated-javascript'],
+      requiredArtifacts: ['Trace', 'SourceMaps'],
+      replacesAudits: ['duplicated-javascript'],
     };
   }
 
@@ -38,16 +38,41 @@ class DuplicatedJavaScriptInsight extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    // TODO: implement.
     return adaptInsightToAuditProduct(artifacts, context, 'DuplicatedJavaScript', (insight) => {
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
         /* eslint-disable max-len */
+        {key: 'source', valueType: 'code', subItemsHeading: {key: 'url', valueType: 'url'}, label: str_(i18n.UIStrings.columnSource)},
+        {key: 'wastedBytes', valueType: 'bytes', subItemsHeading: {key: 'sourceTransferBytes'}, granularity: 10, label: str_(UIStrings.columnDuplicatedBytes)},
         /* eslint-enable max-len */
       ];
-      /** @type {LH.Audit.Details.Table['items']} */
-      const items = [
-      ];
+
+      const entries = [...insight.duplicationGroupedByNodeModules.entries()].slice(0, 10);
+
+      /** @type {Item[]} */
+      const items = entries.map(([source, data]) => {
+        /** @type {Item} */
+        const item = {
+          source,
+          wastedBytes: data.estimatedDuplicateBytes,
+          subItems: {
+            type: 'subitems',
+            items: [],
+          },
+        };
+
+        for (const [index, {script, attributedSize}] of data.duplicates.entries()) {
+          /** @type {SubItem} */
+          const subItem = {
+            url: script.url ?? '',
+            sourceTransferBytes: index === 0 ? {type: 'text', value: '--'} : attributedSize,
+          };
+          item.subItems.items.push(subItem);
+        }
+
+        return item;
+      });
+
       return Audit.makeTableDetails(headings, items);
     });
   }

core/audits/insights/insight-audit.js

@@ -73,6 +73,8 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     metricSavings = {...metricSavings, LCP: /** @type {any} */ (0)};
   }
 
+  // TODO: add estimatedByteSavings to insight model. LH has always shown this as transfer size bytes.
+
   let score;
   let scoreDisplayMode;
   if (insight.state === 'fail' || insight.state === 'pass') {

core/audits/insights/legacy-javascript-insight.js

@@ -59,6 +59,7 @@ class LegacyJavaScriptInsight extends Audit {
         /** @type {Item} */
         const item = {
           url: script.url ?? '',
+          // TODO: need to apply compressionRatio to match expectation that these values are transfer size...
           wastedBytes: result.estimatedByteSavings,
           subItems: {
             type: 'subitems',

core/test/fixtures/user-flows/reports/sample-flow-result.json

@@ -4061,7 +4061,10 @@
             "description": "Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.",
             "score": null,
             "scoreDisplayMode": "notApplicable",
-            "guidanceLevel": 2
+            "guidanceLevel": 2,
+            "replacesAudits": [
+              "duplicated-javascript"
+            ]
           },
           "font-display-insight": {
             "id": "font-display-insight",
@@ -12019,7 +12022,10 @@
             "description": "Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.",
             "score": null,
             "scoreDisplayMode": "notApplicable",
-            "guidanceLevel": 2
+            "guidanceLevel": 2,
+            "replacesAudits": [
+              "duplicated-javascript"
+            ]
           },
           "font-display-insight": {
             "id": "font-display-insight",
@@ -24331,7 +24337,10 @@
             "description": "Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.",
             "score": null,
             "scoreDisplayMode": "notApplicable",
-            "guidanceLevel": 2
+            "guidanceLevel": 2,
+            "replacesAudits": [
+              "duplicated-javascript"
+            ]
           },
           "font-display-insight": {
             "id": "font-display-insight",

core/test/results/sample_v2.json

@@ -6137,7 +6137,10 @@
       "description": "Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.",
       "score": null,
       "scoreDisplayMode": "notApplicable",
-      "guidanceLevel": 2
+      "guidanceLevel": 2,
+      "replacesAudits": [
+        "duplicated-javascript"
+      ]
     },
     "font-display-insight": {
       "id": "font-display-insight",