Add tests for Webpack 5

src/analyzer.js

@@ -92,10 +92,12 @@ function getViewerData(bundleStats, bundleDir, opts) {
     const assetBundles = statAsset.isChild ? getChildAssetBundles(bundleStats, statAsset.name) : bundleStats;
     const modules = assetBundles ? getBundleModules(assetBundles) : [];
     const asset = result[statAsset.name] = _.pick(statAsset, 'size');
+    const assetSources = bundlesSources && _.has(bundlesSources, statAsset.name) ?
+      bundlesSources[statAsset.name] : null;
 
-    if (bundlesSources && _.has(bundlesSources, statAsset.name)) {
-      asset.parsedSize = Buffer.byteLength(bundlesSources[statAsset.name].src);
-      asset.gzipSize = gzipSize.sync(bundlesSources[statAsset.name].src);
+    if (assetSources) {
+      asset.parsedSize = Buffer.byteLength(assetSources.src);
+      asset.gzipSize = gzipSize.sync(assetSources.src);
     }
 
     // Picking modules from current bundle script
@@ -116,11 +118,11 @@ function getViewerData(bundleStats, bundleDir, opts) {
       // Webpack 5 changed bundle format and now entry modules are concatenated and located at the end on the it.
       // Because of this they basically become a concatenated module, for which we can't even precisely determine its
       // parsed source as it's located in the same scope as all Webpack runtime helpers.
-      if (unparsedEntryModules.length) {
+      if (unparsedEntryModules.length && assetSources) {
         if (unparsedEntryModules.length === 1) {
           // So if there is only one entry we consider its parsed source to be all the bundle code excluding code
           // from parsed modules.
-          unparsedEntryModules[0].parsedSrc = bundlesSources[statAsset.name].runtimeSrc;
+          unparsedEntryModules[0].parsedSrc = assetSources.runtimeSrc;
         } else {
           // If there are multiple entry points we move all of them under synthetic concatenated module.
           _.pullAll(assetModules, unparsedEntryModules);
@@ -129,7 +131,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
             name: './entry modules',
             modules: unparsedEntryModules,
             size: unparsedEntryModules.reduce((totalSize, module) => totalSize + module.size, 0),
-            parsedSrc: bundlesSources[statAsset.name].runtimeSrc
+            parsedSrc: assetSources.runtimeSrc
           });
         }
       }

test/analyzer.js

@@ -124,6 +124,30 @@ describe('Analyzer', function () {
     await expectValidReport({bundleLabel: 'bundle.mjs'});
   });
 
+  it('should properly parse extremely optimized bundle from webpack 5', async function () {
+    generateReportFrom('extremely-optimized-webpack-5-bundle/stats.json');
+    const chartData = await getChartData();
+    expect(chartData).to.containSubset(
+      require('./stats/extremely-optimized-webpack-5-bundle/expected-chart-data')
+    );
+  });
+
+  it('should properly parse webpack 5 bundle with single entry', async function () {
+    generateReportFrom('webpack-5-bundle-with-single-entry/stats.json');
+    const chartData = await getChartData();
+    expect(chartData).to.containSubset(
+      require('./stats/webpack-5-bundle-with-single-entry/expected-chart-data')
+    );
+  });
+
+  it('should properly parse webpack 5 bundle with multiple entries', async function () {
+    generateReportFrom('webpack-5-bundle-with-multiple-entries/stats.json');
+    const chartData = await getChartData();
+    expect(chartData).to.containSubset(
+      require('./stats/webpack-5-bundle-with-multiple-entries/expected-chart-data')
+    );
+  });
+
   it('should support generating JSON output for the report', async function () {
     generateJSONReportFrom('with-modules-in-chunks/stats.json');
 

test/stats/extremely-optimized-webpack-5-bundle/bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";console.log("module a","module b")})();

test/stats/extremely-optimized-webpack-5-bundle/expected-chart-data.js

@@ -0,0 +1,68 @@
+module.exports = [
+  {
+    'label': 'bundle.js',
+    'isAsset': true,
+    'statSize': 142,
+    'parsedSize': 58,
+    'gzipSize': 71,
+    'groups': [
+      {
+        'label': 'src',
+        'path': './src',
+        'statSize': 142,
+        'groups': [
+          {
+            'id': 602,
+            'label': 'index.js + 2 modules (concatenated)',
+            'path': './src/index.js + 2 modules (concatenated)',
+            'statSize': 142,
+            'parsedSize': 58,
+            'gzipSize': 71,
+            'concatenated': true,
+            'groups': [
+              {
+                'label': 'src',
+                'path': './src/index.js + 2 modules (concatenated)/src',
+                'statSize': 142,
+                'groups': [
+                  {
+                    'id': null,
+                    'label': 'index.js',
+                    'path': './src/index.js + 2 modules (concatenated)/src/index.js',
+                    'statSize': 62,
+                    'parsedSize': 25,
+                    'gzipSize': 30,
+                    'inaccurateSizes': true
+                  },
+                  {
+                    'id': null,
+                    'label': 'a.js',
+                    'path': './src/index.js + 2 modules (concatenated)/src/a.js',
+                    'statSize': 40,
+                    'parsedSize': 16,
+                    'gzipSize': 20,
+                    'inaccurateSizes': true
+                  },
+                  {
+                    'id': null,
+                    'label': 'b.js',
+                    'path': './src/index.js + 2 modules (concatenated)/src/b.js',
+                    'statSize': 40,
+                    'parsedSize': 16,
+                    'gzipSize': 20,
+                    'inaccurateSizes': true
+                  }
+                ],
+                'parsedSize': 58,
+                'gzipSize': 71,
+                'inaccurateSizes': true
+              }
+            ]
+          }
+        ],
+        'parsedSize': 58,
+        'gzipSize': 71
+      }
+    ]
+  }
+];