feat: add support to analyze gzipped bundles

README.md

@@ -68,6 +68,7 @@ new BundleAnalyzerPlugin(options?: object)
 |**`statsOptions`**|`null` or `{Object}`|Default: `null`. Options for `stats.toJson()` method. For example you can exclude sources of your modules from stats file with `source: false` option. [See more options here](https://webpack.js.org/configuration/stats/). |
 |**`excludeAssets`**|`{null\|pattern\|pattern[]}` where `pattern` equals to `{String\|RegExp\|function}`|Default: `null`. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via `new RegExp(str)`. If pattern is a function it should have the following signature `(assetName: string) => boolean` and should return `true` to *exclude* matching asset. If multiple patterns are provided asset should match at least one of them to be excluded. |
 |**`logLevel`**|One of: `info`, `warn`, `error`, `silent`|Default: `info`. Used to control how much details the plugin outputs.|
+|**`decompressExtenstion`**|`null` or `{Object}`|Default: `null`. Used to show stats for a compressed file, object has compressed file's extension as key and it's value is decompression algorithm of [zlib](https://nodejs.org/api/zlib.html) to use, like: `{ gz: { algorithm: 'unzipSync' } }`|
 
 <h2 align="center">Usage (as a CLI utility)</h2>
 

src/BundleAnalyzerPlugin.js

@@ -21,6 +21,7 @@ class BundleAnalyzerPlugin {
       statsOptions: null,
       excludeAssets: null,
       logLevel: 'info',
+      decompressExtenstion: {},
       // deprecated
       startAnalyzer: true,
       ...opts,
@@ -114,7 +115,8 @@ class BundleAnalyzerPlugin {
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
-        excludeAssets: this.opts.excludeAssets
+        excludeAssets: this.opts.excludeAssets,
+        decompressExtenstion: this.opts.decompressExtenstion
       });
     }
   }
@@ -124,7 +126,8 @@ class BundleAnalyzerPlugin {
       reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.json'),
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
-      excludeAssets: this.opts.excludeAssets
+      excludeAssets: this.opts.excludeAssets,
+      decompressExtenstion: this.opts.decompressExtenstion
     });
   }
 
@@ -136,7 +139,8 @@ class BundleAnalyzerPlugin {
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,
-      excludeAssets: this.opts.excludeAssets
+      excludeAssets: this.opts.excludeAssets,
+      decompressExtenstion: this.opts.decompressExtenstion
     });
   }
 

src/analyzer.js

@@ -17,10 +17,18 @@ module.exports = {
   readStatsFromFile
 };
 
+function isExtensionAllowed(filename, {decompressExtenstion = {}}) {
+  if (FILENAME_EXTENSIONS.test(filename)) {
+    return true;
+  }
+  return !!decompressExtenstion[filename.split('.').pop()];
+}
+
 function getViewerData(bundleStats, bundleDir, opts) {
   const {
     logger = new Logger(),
-    excludeAssets = null
+    excludeAssets = null,
+    decompressExtenstion
   } = opts || {};
 
   const isAssetIncluded = createAssetsFilter(excludeAssets);
@@ -53,7 +61,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     // See #22
     asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
 
-    return FILENAME_EXTENSIONS.test(asset.name) && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
+    return isExtensionAllowed(asset.name, opts) && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
   });
 
   // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
@@ -69,7 +77,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
       let bundleInfo;
 
       try {
-        bundleInfo = parseBundle(assetFile);
+        bundleInfo = parseBundle(assetFile, {decompressExtenstion, logger});
       } catch (err) {
         const msg = (err.code === 'ENOENT') ? 'no such file' : err.message;
         logger.warn(`Error parsing bundle asset "${assetFile}": ${msg}`);

src/parseUtils.js

@@ -2,13 +2,27 @@ const fs = require('fs');
 const _ = require('lodash');
 const acorn = require('acorn');
 const walk = require('acorn-walk');
+const zlib = require('zlib');
+const Logger = require('./Logger');
 
 module.exports = {
   parseBundle
 };
 
-function parseBundle(bundlePath) {
-  const content = fs.readFileSync(bundlePath, 'utf8');
+function parseBundle(bundlePath, {decompressExtenstion = {}, logger = new Logger()}) {
+  let content;
+  const decompressAlgorithm = (decompressExtenstion[bundlePath.split('.').pop()] || {}).algorithm;
+  if (decompressAlgorithm) {
+    if (zlib[decompressAlgorithm]) {
+      const compressedBuffer = fs.readFileSync(bundlePath);
+      const decompressedBuffer = zlib[decompressAlgorithm](compressedBuffer);
+      content = decompressedBuffer.toString();
+    } else {
+      logger.error(`Algorithm "${decompressAlgorithm}" not available in zlib, consider upgrading node version`);
+    }
+  } else {
+    content = fs.readFileSync(bundlePath, 'utf8');
+  }
   const ast = acorn.parse(content, {
     sourceType: 'script',
     // I believe in a bright future of ECMAScript!

src/viewer.js

@@ -41,10 +41,11 @@ async function startServer(bundleStats, opts) {
     logger = new Logger(),
     defaultSizes = 'parsed',
     excludeAssets = null,
-    reportTitle
+    reportTitle,
+    decompressExtenstion
   } = opts || {};
 
-  const analyzerOpts = {logger, excludeAssets};
+  const analyzerOpts = {logger, excludeAssets, decompressExtenstion};
 
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 
@@ -181,9 +182,11 @@ async function generateReport(bundleStats, opts) {
 }
 
 async function generateJSONReport(bundleStats, opts) {
-  const {reportFilename, bundleDir = null, logger = new Logger(), excludeAssets = null} = opts || {};
+  const {
+    reportFilename, bundleDir = null, logger = new Logger(), excludeAssets = null, decompressExtenstion
+  } = opts || {};
 
-  const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
+  const chartData = getChartData({logger, excludeAssets, decompressExtenstion}, bundleStats, bundleDir);
 
   if (!chartData) return;
 

test/parseUtils.js

@@ -1,9 +1,14 @@
 const fs = require('fs');
+const zlib = require('zlib');
 
 const _ = require('lodash');
 const {parseBundle} = require('../lib/parseUtils');
 
 const BUNDLES_DIR = `${__dirname}/bundles`;
+const COMPRESSIONS = {
+  brotli: {extension: 'br', algorithm: 'brotliDecompressSync'},
+  gzip: {extension: 'gz', algorithm: 'unzipSync'}
+};
 
 describe('parseBundle', function () {
   const bundles = fs
@@ -16,7 +21,7 @@ describe('parseBundle', function () {
     .forEach(bundleName => {
       it(`should parse ${_.lowerCase(bundleName)}`, function () {
         const bundleFile = `${BUNDLES_DIR}/${bundleName}.js`;
-        const bundle = parseBundle(bundleFile);
+        const bundle = parseBundle(bundleFile, {});
         const expectedModules = JSON.parse(fs.readFileSync(`${BUNDLES_DIR}/${bundleName}.modules.json`));
 
         expect(bundle.src).to.equal(fs.readFileSync(bundleFile, 'utf8'));
@@ -26,8 +31,29 @@ describe('parseBundle', function () {
 
   it("should parse invalid bundle and return it's content and empty modules hash", function () {
     const bundleFile = `${BUNDLES_DIR}/invalidBundle.js`;
-    const bundle = parseBundle(bundleFile);
+    const bundle = parseBundle(bundleFile, {});
     expect(bundle.src).to.equal(fs.readFileSync(bundleFile, 'utf8'));
     expect(bundle.modules).to.deep.equal({});
   });
+
+  Object.keys(COMPRESSIONS)
+    .forEach(compressionType => {
+      it(`should parse compressed ${compressionType} bundle`, function () {
+        const {extension, algorithm} = COMPRESSIONS[compressionType];
+        const bundleFile = `${BUNDLES_DIR}/validBundleWithArrowFunction.js`;
+        const compressedBundleFile = `${bundleFile}.${extension}`;
+        const expectedModules = JSON.parse(fs.readFileSync(`${BUNDLES_DIR}/validBundleWithArrowFunction.modules.json`));
+        if (!zlib[algorithm]) {
+          return;
+        }
+        const bundle = parseBundle(compressedBundleFile, {
+          decompressExtenstion: {
+            [extension]: {algorithm}
+          }
+        });
+        expect(bundle.src).to.equal(fs.readFileSync(bundleFile, 'utf8'));
+        expect(bundle.modules).to.deep.equal(expectedModules.modules);
+      });
+    });
+
 });