[RPP] Group duplicated modules by node_modules package

Bug: 394373632
Change-Id: I6bec9980e7ad141c030ec12b9d6b8e2047327628
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6370582
Reviewed-by: Paul Irish <[email protected]>
Auto-Submit: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/trace/extras/ScriptDuplication.test.ts

@@ -269,6 +269,10 @@ describeWithEnvironment('ScriptDuplication', function() {
           {scriptId: '1.coursehero-bundle-2', resourceSize: 5840},
           {scriptId: '1.coursehero-bundle-1', resourceSize: 5316}
         ],
+        'node_modules/@babel/runtime': [
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 6929},
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 4811},
+        ],
         'coursehero:///js/src/search/results/view/filter/autocomplete-filter.tsx': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 3823},
           {scriptId: '1.coursehero-bundle-2', resourceSize: 3812}
@@ -281,6 +285,10 @@ describeWithEnvironment('ScriptDuplication', function() {
           {scriptId: '1.coursehero-bundle-1', resourceSize: 2696},
           {scriptId: '1.coursehero-bundle-2', resourceSize: 2693}
         ],
+        'node_modules/lodash-es': [
+          {scriptId: '1.coursehero-bundle-2', resourceSize: 4384},
+          {scriptId: '1.coursehero-bundle-1', resourceSize: 2489},
+        ],
         'coursehero:///js/src/utils/service/amplitude-service.ts': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 1348},
           {scriptId: '1.coursehero-bundle-2', resourceSize: 1325}
@@ -289,9 +297,6 @@ describeWithEnvironment('ScriptDuplication', function() {
           {scriptId: '1.coursehero-bundle-2', resourceSize: 1143},
           {scriptId: '1.coursehero-bundle-1', resourceSize: 1134}
         ],
-        'node_modules/@babel/runtime/helpers/typeof.js': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 992}, {scriptId: '1.coursehero-bundle-2', resourceSize: 992}
-        ],
         'coursehero:///js/src/search/results/store/filter-actions.ts': [
           {scriptId: '1.coursehero-bundle-2', resourceSize: 956}, {scriptId: '1.coursehero-bundle-1', resourceSize: 946}
         ],
@@ -301,15 +306,12 @@ describeWithEnvironment('ScriptDuplication', function() {
         'coursehero:///js/src/utils/service/gsa-inmeta-tags.ts': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 591}, {scriptId: '1.coursehero-bundle-2', resourceSize: 563}
         ],
-        'node_modules/@babel/runtime/helpers/inherits.js': [
-          {scriptId: '1.coursehero-bundle-1', resourceSize: 528}, {scriptId: '1.coursehero-bundle-2', resourceSize: 528}
-        ],
         'coursehero:///js/src/search/results/service/api/filter-api-service.ts': [
           {scriptId: '1.coursehero-bundle-1', resourceSize: 554}, {scriptId: '1.coursehero-bundle-2', resourceSize: 534}
         ],
         'coursehero:///js/src/common/component/search/course-search.tsx': [
           {scriptId: '1.coursehero-bundle-2', resourceSize: 545}, {scriptId: '1.coursehero-bundle-1', resourceSize: 544}
-        ]
+        ],
       });
     });
   });
@@ -376,4 +378,20 @@ describeWithEnvironment('ScriptDuplication', function() {
       assert.strictEqual(Trace.Extras.ScriptDuplication.normalizeSource(input), expected);
     }
   });
+
+  it('getNodeModuleName', () => {
+    const testCases = [
+      ['node_modules/package/othermodule.js', 'package'],
+      ['node_modules/somemodule/node_modules/package/othermodule.js', 'package'],
+      [
+        'node_modules/somemodule/node_modules/somemodule2/node_modules/somemodule2/othermodule.js',
+        'somemodule2',
+      ],
+      ['node_modules/@lh/ci', '@lh/ci'],
+      ['node_modules/blahblah/node_modules/@lh/ci', '@lh/ci'],
+    ];
+    for (const [input, expected] of testCases) {
+      assert.strictEqual(Trace.Extras.ScriptDuplication.getNodeModuleName(input), expected);
+    }
+  });
 });

front_end/models/trace/extras/ScriptDuplication.ts

@@ -176,6 +176,52 @@ export function normalizeDuplication(duplication: ScriptDuplication): void {
   }
 }
 
+function indexOfOrLength(haystack: string, needle: string, startPosition = 0): number {
+  const index = haystack.indexOf(needle, startPosition);
+  return index === -1 ? haystack.length : index;
+}
+
+export function getNodeModuleName(source: string): string {
+  const sourceSplit = source.split('node_modules/');
+  source = sourceSplit[sourceSplit.length - 1];
+
+  const indexFirstSlash = indexOfOrLength(source, '/');
+  if (source[0] === '@') {
+    return source.slice(0, indexOfOrLength(source, '/', indexFirstSlash + 1));
+  }
+
+  return source.slice(0, indexFirstSlash);
+}
+
+function groupByNodeModules(duplication: ScriptDuplication): ScriptDuplication {
+  const groupedDuplication: ScriptDuplication = new Map();
+  for (const [source, data] of duplication.entries()) {
+    if (!source.includes('node_modules')) {
+      groupedDuplication.set(source, data);
+      continue;
+    }
+
+    const nodeModuleKey = 'node_modules/' + getNodeModuleName(source);
+    const aggregatedData = groupedDuplication.get(nodeModuleKey) ?? {
+      duplicates: [],
+      // This is calculated in normalizeDuplication.
+      estimatedDuplicateBytes: 0,
+    };
+    groupedDuplication.set(nodeModuleKey, aggregatedData);
+
+    for (const {script, attributedSize} of data.duplicates) {
+      let duplicate = aggregatedData.duplicates.find(d => d.script === script);
+      if (!duplicate) {
+        duplicate = {script, attributedSize: 0};
+        aggregatedData.duplicates.push(duplicate);
+      }
+      duplicate.attributedSize += attributedSize;
+    }
+  }
+
+  return groupedDuplication;
+}
+
 function computeLastGeneratedColumnMap(map: SDK.SourceMap.SourceMap): Map<SDK.SourceMap.SourceMapEntry, number> {
   const result = new Map<SDK.SourceMap.SourceMapEntry, number>();
 
@@ -233,7 +279,7 @@ export function computeScriptDuplication(scriptsData: Handlers.ModelHandlers.Scr
     }
   }
 
-  const duplication: ScriptDuplication = new Map();
+  let duplication: ScriptDuplication = new Map();
   for (const [script, sourceDataArray] of sourceDatasMap) {
     for (const sourceData of sourceDataArray) {
       let data = duplication.get(sourceData.source);
@@ -248,6 +294,7 @@ export function computeScriptDuplication(scriptsData: Handlers.ModelHandlers.Scr
     }
   }
 
+  duplication = groupByNodeModules(duplication);
   normalizeDuplication(duplication);
 
   // Sort by estimated savings.