improvement: Display more detailed module information for concatenated entry modules (#602)

Author: pgoldberg

CHANGELOG.md

@@ -12,6 +12,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+* **Improvement**
+  * Display modules included in concatenated entry modules on Webpack 5 when "Show content of concatenated modules" is checked ([#602](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/602) by [@pgoldberg](https://github.com/pgoldberg))
+
 ## 4.8.0
 
  * **Improvement**

src/tree/ConcatenatedModule.js

@@ -14,6 +14,22 @@ export default class ConcatenatedModule extends Module {
     this.fillContentModules();
   }
 
+  get parsedSize() {
+    return this.getParsedSize() ?? this.getEstimatedSize('parsedSize');
+  }
+
+  get gzipSize() {
+    return this.getGzipSize() ?? this.getEstimatedSize('gzipSize');
+  }
+
+  getEstimatedSize(sizeType) {
+    const parentModuleSize = this.parent[sizeType];
+
+    if (parentModuleSize !== undefined) {
+      return Math.floor((this.size / this.parent.size) * parentModuleSize);
+    }
+  }
+
   fillContentModules() {
     this.data.modules.forEach(moduleData => this.addContentModule(moduleData));
   }
@@ -38,7 +54,8 @@ export default class ConcatenatedModule extends Module {
       currentFolder = childFolder;
     });
 
-    const module = new ContentModule(fileName, moduleData, this);
+    const ModuleConstructor = moduleData.modules ? ConcatenatedModule : ContentModule;
+    const module = new ModuleConstructor(fileName, moduleData, this);
     currentFolder.addChildModule(module);
   }
 

src/tree/Module.js

@@ -28,10 +28,18 @@ export default class Module extends Node {
   }
 
   get parsedSize() {
-    return this.src ? this.src.length : undefined;
+    return this.getParsedSize();
   }
 
   get gzipSize() {
+    return this.getGzipSize();
+  }
+
+  getParsedSize() {
+    return this.src ? this.src.length : undefined;
+  }
+
+  getGzipSize() {
     if (!_.has(this, '_gzipSize')) {
       this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
     }

test/analyzer.js

@@ -183,6 +183,14 @@ describe('Analyzer', function () {
     );
   });
 
+  it('should properly parse webpack 5 bundle with an entry module that is a concatenated module', async function () {
+    generateReportFrom('webpack-5-bundle-with-concatenated-entry-module/stats.json');
+    const chartData = await getChartData();
+    expect(chartData).to.containSubset(
+      require('./stats/webpack-5-bundle-with-concatenated-entry-module/expected-chart-data')
+    );
+  });
+
   it('should support generating JSON output for the report', async function () {
     generateJSONReportFrom('with-modules-in-chunks/stats.json');
 

test/stats/webpack-5-bundle-with-concatenated-entry-module/app.js

@@ -0,0 +1 @@
+(()=>{"use strict";console.log("foo.js"),console.log("bar.js")})(),console.log("baz.js");

test/stats/webpack-5-bundle-with-concatenated-entry-module/expected-chart-data.json

@@ -0,0 +1 @@
+[{"cid": 0, "groups": [{"cid": 1, "concatenated": true, "groups": [{"cid": 2, "gzipSize": 8, "id": 613, "inaccurateSizes": true, "label": "baz.js", "parsedSize": 10, "path": "./entry modules (concatenated)/baz.js", "statSize": 23}, {"cid": 3, "concatenated": true, "groups": [{"cid": 4, "gzipSize": 5, "id": null, "inaccurateSizes": true, "label": "index.js", "parsedSize": 6, "path": "./entry modules (concatenated)/index.js + 3 modules (concatenated)/index.js", "statSize": 14}, {"cid": 5, "groups": [{"cid": 6, "gzipSize": 12, "id": null, "inaccurateSizes": true, "label": "index.js", "parsedSize": 14, "path": "./entry modules (concatenated)/index.js + 3 modules (concatenated)/dep/index.js", "statSize": 32}, {"cid": 7, "gzipSize": 25, "id": null, "inaccurateSizes": true, "label": "foo.js", "parsedSize": 29, "path": "./entry modules (concatenated)/index.js + 3 modules (concatenated)/dep/foo.js", "statSize": 66}, {"cid": 8, "gzipSize": 25, "id": null, "inaccurateSizes": true, "label": "bar.js", "parsedSize": 29, "path": "./entry modules (concatenated)/index.js + 3 modules (concatenated)/dep/bar.js", "statSize": 66}], "gzipSize": 62, "inaccurateSizes": true, "label": "dep", "parsedSize": 72, "path": "./entry modules (concatenated)/index.js + 3 modules (concatenated)/dep", "statSize": 164}], "gzipSize": 68, "id": 469, "label": "index.js + 3 modules (concatenated)", "parsedSize": 79, "path": "./entry modules (concatenated)/index.js + 3 modules (concatenated)", "statSize": 178}], "gzipSize": 77, "label": "entry modules (concatenated)", "parsedSize": 90, "path": "./entry modules (concatenated)", "statSize": 201}], "gzipSize": 77, "isAsset": true, "isInitialByEntrypoint": {"app": true}, "label": "app.js", "parsedSize": 90, "statSize": 201}]