feat: Webpack - extract reasons module name

relative-ci · Sep 24, 2023 · dede7c2 · dede7c2
1 parent c28bf7f
commit dede7c2
Show file tree

Hide file tree

Showing 14 changed files with 81,571 additions and 13,070 deletions.
diff --git a/fixtures/webpack-stats.baseline.json b/fixtures/webpack-stats.baseline.json
diff --git a/fixtures/webpack-stats.current.json b/fixtures/webpack-stats.current.json
diff --git a/packages/plugin-webpack-filter/src/index.ts b/packages/plugin-webpack-filter/src/index.ts
@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { StatsCompilation } from 'webpack';
+import { StatsCompilation, StatsModule } from 'webpack';
 
 const PATH_IGNORE_PATTERN = '.map$';
 
@@ -20,15 +20,21 @@ export interface WebpackStatsFilteredChunk {
   names?: Array<string>;
 }
 
+export interface WebpackStatsFilteredModuleReason {
+  module: string;
+}
+
 export interface WebpackStatsFilteredModule {
   name: string;
   size?: number;
   chunks: Array<string | number>;
+  reasons?: Array<WebpackStatsFilteredModuleReason>;
 }
 
 export interface WebpackStatsFilteredConcatenatedModule {
   name: string;
   size?: number;
+  reasons?: Array<WebpackStatsFilteredModuleReason>;
 }
 
 export interface WebpackStatsFilteredRootModule extends WebpackStatsFilteredModule {
@@ -43,6 +49,28 @@ export interface WebpackStatsFiltered {
   modules?: Array<WebpackStatsFilteredRootModule>;
 }
 
+const getReasons = (
+  moduleData: StatsModule,
+): Array<WebpackStatsFilteredModuleReason> | undefined => {
+  const reasonsByModule: Record<string, WebpackStatsFilteredModuleReason> = {};
+
+  moduleData.reasons?.forEach((reason) => {
+    // Add the reason module only once
+    // webpack adds one entry for import and one entry for every reference
+    if (reason.module && !reasonsByModule[reason.module]) {
+      reasonsByModule[reason.module] = { module: reason.module };
+    }
+  });
+
+  const reasons = Object.values(reasonsByModule);
+
+  if (reasons.length === 0) {
+    return undefined;
+  }
+
+  return reasons;
+};
+
 /**
  * Filter webpack stats data
  */
@@ -107,21 +135,27 @@ export default (
             return aggConcatenatedModules;
           }
 
+          const reasons = getReasons(concatenatedModule);
+
           aggConcatenatedModules.push({
             name: concatenatedModule.name,
             size: concatenatedModule.size,
+            ...(reasons && { reasons }),
           });
 
           return aggConcatenatedModules;
         },
         [] as Array<WebpackStatsFilteredConcatenatedModule>,
       );
 
+      const reasons = getReasons(moduleStats);
+
       agg.push({
         name: moduleStats.name,
         size: moduleStats.size,
         chunks: moduleChunks,
         ...(concatenatedModules && { modules: concatenatedModules }),
+        ...(reasons && { reasons }),
       });
 
       return agg;

diff --git a/packages/plugin-webpack-validate/src/index.test.ts b/packages/plugin-webpack-validate/src/index.test.ts
@@ -40,10 +40,20 @@ describe('Webpack/validate', () => {
             name: './main.js  + 2 concantenated modules',
             size: 10,
             chunks: [1],
+            reasons: [
+              {
+                module: './index.js',
+              },
+            ],
             modules: [
               {
                 name: './main.js',
                 size: 3,
+                reasons: [
+                  {
+                    module: './index.js',
+                  },
+                ],
               },
               {
                 name: './main-dependency-1.js',

diff --git a/packages/plugin-webpack-validate/src/index.ts b/packages/plugin-webpack-validate/src/index.ts
@@ -49,15 +49,7 @@ export default (webpackSource?: any): string => {
   const output = [`${I18N.INVALID}`];
 
   failures.forEach((failure) => {
-    const failureOutput = ['', failure.message, `Path: ${failure.path.join('.')}`];
-
-    const failedSource = extractFailedStructure(webpackSource, failure.path);
-
-    if (failedSource) {
-      failureOutput.push(
-        `Failed structure(${failedSource.path}): ${JSON.stringify(failedSource.source, null, 2)}`,
-      );
-    }
+    const failureOutput = ['', failure.message, `Path: ${failure.path.join('.')}`, failure.explanation];
 
     output.push(failureOutput.join('\n'));
   });

diff --git a/packages/plugin-webpack-validate/src/schemas.ts b/packages/plugin-webpack-validate/src/schemas.ts
@@ -22,11 +22,24 @@ export const WebpackSourceAssetHiddenStruct = type({
   size: number(),
 });
 
+export const WebpackSourceModuleReasonStruct = type({
+  module: optional(nullable(string())),
+});
+
 export const WebpackSourceModuleStruct = type({
   name: string(),
   size: number(),
   chunks: array(nullable(union([number(), string()]))),
-  modules: optional(array(type({ name: string(), size: number() }))),
+  modules: optional(
+    array(
+      type({
+        name: string(),
+        size: number(),
+        reasons: optional(array(WebpackSourceModuleReasonStruct)),
+      }),
+    ),
+  ),
+  reasons: optional(array(WebpackSourceModuleReasonStruct)),
 });
 
 export const WebpackSourceModuleHiddenStruct = type({

diff --git a/packages/utils/__fixtures__/webpack-stats-1.extracted.js b/packages/utils/__fixtures__/webpack-stats-1.extracted.js
@@ -53,6 +53,11 @@ module.exports = {
       chunks: [1],
       name: 'node_modules/package-a/node_modules/package-c/index.js',
       size: 1000,
+      reasons: [
+        {
+          module: 'node_modules/package-a/index.js',
+        },
+      ],
     },
     {
       chunks: [1],

diff --git a/packages/utils/__fixtures__/webpack-stats-1.js b/packages/utils/__fixtures__/webpack-stats-1.js
@@ -188,6 +188,20 @@ module.exports = {
       size: 1000,
       usedExports: true,
       warnings: 0,
+      reasons: [
+        {
+          moduleId: 10,
+          moduleIdentifier: '/usr/share/app/node_modules/package-a/index.js',
+          module: 'node_modules/package-a/index.js',
+          userLoc: '1:0-20',
+        },
+        {
+          moduleId: 10,
+          moduleIdentifier: '/usr/share/app/node_modules/package-a/index.js',
+          module: 'node_modules/package-a/index.js',
+          userLoc: '3:0-20',
+        },
+      ],
     },
     {
       assets: [],

diff --git a/packages/utils/src/jobs/__tests__/__snapshots__/create-job.ts.snap b/packages/utils/src/jobs/__tests__/__snapshots__/create-job.ts.snap
@@ -137,6 +137,9 @@ exports[`createJob no baseline 1`] = `
             "1",
           ],
           "name": "node_modules/package-a/node_modules/package-c/index.js",
+          "reasons": [
+            "node_modules/package-a/index.js",
+          ],
           "value": 1000,
         },
         "node_modules/package-b/index.js": {
@@ -293,6 +296,11 @@ exports[`createJob no baseline 1`] = `
             1,
           ],
           "name": "node_modules/package-a/node_modules/package-c/index.js",
+          "reasons": [
+            {
+              "module": "node_modules/package-a/index.js",
+            },
+          ],
           "size": 1000,
         },
         {
@@ -516,6 +524,9 @@ exports[`createJob with baseline 1`] = `
             "1",
           ],
           "name": "node_modules/package-a/node_modules/package-c/index.js",
+          "reasons": [
+            "node_modules/package-a/index.js",
+          ],
           "value": 1000,
         },
         "node_modules/package-b/index.js": {
@@ -672,6 +683,11 @@ exports[`createJob with baseline 1`] = `
             1,
           ],
           "name": "node_modules/package-a/node_modules/package-c/index.js",
+          "reasons": [
+            {
+              "module": "node_modules/package-a/index.js",
+            },
+          ],
           "size": 1000,
         },
         {

diff --git a/packages/utils/src/report/__tests__/__snapshots__/create.ts.snap b/packages/utils/src/report/__tests__/__snapshots__/create.ts.snap
@@ -280,6 +280,9 @@ exports[`report / createReport multiple sources 1`] = `
           "displayDeltaPercentage": "+100%",
           "displayValue": "1000B",
           "name": "node_modules/package-a/node_modules/package-c/index.js",
+          "reasons": [
+            "node_modules/package-a/index.js",
+          ],
           "value": 1000,
         },
         {
@@ -1195,6 +1198,9 @@ exports[`report / createReport single source 1`] = `
           ],
           "displayValue": "1000B",
           "name": "node_modules/package-a/node_modules/package-c/index.js",
+          "reasons": [
+            "node_modules/package-a/index.js",
+          ],
           "value": 1000,
         },
       ],

diff --git a/packages/utils/src/webpack/__tests__/__snapshots__/compare.js.snap b/packages/utils/src/webpack/__tests__/__snapshots__/compare.js.snap
@@ -106,6 +106,9 @@ exports[`Webpack/compare should compare all modules 1`] = `
         "displayDeltaPercentage": "+100%",
         "displayValue": "1000B",
         "name": "node_modules/package-a/node_modules/package-c/index.js",
+        "reasons": [
+          "node_modules/package-a/index.js",
+        ],
         "value": 1000,
       },
       {

diff --git a/packages/utils/src/webpack/extract/__tests__/modules.ts b/packages/utils/src/webpack/extract/__tests__/modules.ts
@@ -42,6 +42,7 @@ describe('Webpack/extract/modules', () => {
             name: 'node_modules/package-a/node_modules/package-c/index.js',
             value: 1000,
             chunkIds: ['1'],
+            reasons: ['node_modules/package-a/index.js'],
           },
           'node_modules/package-b/index.js': {
             name: 'node_modules/package-b/index.js',

diff --git a/packages/utils/src/webpack/extract/modules.ts b/packages/utils/src/webpack/extract/modules.ts
@@ -84,6 +84,12 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
 
   modulesByName.forEach((moduleEntry, normalizedName) => {
     const { name, size = 0, chunks } = moduleEntry;
+    const normalizedName = getModuleName(name);
+
+    // skip modules that are orphane(do not belong to any chunk)
+    if (!chunks || chunks?.length === 0) {
+      return agg;
+    }
 
     const instances = chunks.length;
     const duplicateInstances = instances - 1;
@@ -92,6 +98,7 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
     moduleCount += instances;
     totalCodeSize += instances * size;
 
+    const reasons = moduleEntry.reasons?.map((reason) => getModuleName(reason.module));
     if (duplicated) {
       duplicateModulesCount += duplicateInstances;
       duplicateCodeSize += duplicateInstances * size;
@@ -102,6 +109,7 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
       value: size,
       chunkIds: chunks.map(normalizeChunkId),
       ...(duplicated && { duplicated }),
+      ...(reasons && { reasons }),
     };
   }, {} as Record<string, Module>);
 

diff --git a/packages/utils/src/webpack/types.ts b/packages/utils/src/webpack/types.ts
@@ -52,6 +52,7 @@ export interface Module extends MetricRun {
   name: string;
   chunkIds: Array<string>;
   duplicated?: boolean;
+  reasons?: Array<string>;
 }
 
 export type Modules = Record<string, Module>;