Implement Brotli compression

Author: dcsaszar

src/analyzer.js

@@ -1,13 +1,13 @@
 const fs = require('fs');
 const path = require('path');
 
-const gzipSize = require('gzip-size');
 const {parseChunked} = require('@discoveryjs/json-ext');
 
 const Logger = require('./Logger');
 const Folder = require('./tree/Folder').default;
 const {parseBundle} = require('./parseUtils');
 const {createAssetsFilter} = require('./utils');
+const {getCompressedSize} = require('./sizeUtils');
 
 const FILENAME_QUERY_REGEXP = /\?.*$/u;
 const FILENAME_EXTENSIONS = /\.(js|mjs|cjs)$/iu;
@@ -20,6 +20,7 @@ module.exports = {
 function getViewerData(bundleStats, bundleDir, opts) {
   const {
     logger = new Logger(),
+    compressionAlgorithm,
     excludeAssets = null
   } = opts || {};
 
@@ -110,7 +111,8 @@ function getViewerData(bundleStats, bundleDir, opts) {
 
     if (assetSources) {
       asset.parsedSize = Buffer.byteLength(assetSources.src);
-      asset.gzipSize = gzipSize.sync(assetSources.src);
+      if (compressionAlgorithm === 'gzip') asset.gzipSize = getCompressedSize('gzip', assetSources.src);
+      if (compressionAlgorithm === 'brotli') asset.brotliSize = getCompressedSize('brotli', assetSources.src);
     }
 
     // Picking modules from current bundle script
@@ -151,7 +153,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     }
 
     asset.modules = assetModules;
-    asset.tree = createModulesTree(asset.modules);
+    asset.tree = createModulesTree(asset.modules, {compressionAlgorithm});
     return result;
   }, {});
 
@@ -166,6 +168,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     statSize: asset.tree.size || asset.size,
     parsedSize: asset.parsedSize,
     gzipSize: asset.gzipSize,
+    brotliSize: asset.brotliSize,
     groups: Object.values(asset.tree.children).map(i => i.toChartData()),
     isInitialByEntrypoint: chunkToInitialByEntrypoint[filename] ?? {}
   }));
@@ -220,8 +223,8 @@ function isRuntimeModule(statModule) {
   return statModule.moduleType === 'runtime';
 }
 
-function createModulesTree(modules) {
-  const root = new Folder('.');
+function createModulesTree(modules, opts) {
+  const root = new Folder('.', opts);
 
   modules.forEach(module => root.addModule(module));
   root.mergeNestedFolders();

src/tree/ConcatenatedModule.js

@@ -5,8 +5,8 @@ import {getModulePathParts} from './utils';
 
 export default class ConcatenatedModule extends Module {
 
-  constructor(name, data, parent) {
-    super(name, data, parent);
+  constructor(name, data, parent, opts) {
+    super(name, data, parent, opts);
     this.name += ' (concatenated)';
     this.children = Object.create(null);
     this.fillContentModules();
@@ -20,6 +20,10 @@ export default class ConcatenatedModule extends Module {
     return this.getGzipSize() ?? this.getEstimatedSize('gzipSize');
   }
 
+  get brotliSize() {
+    return this.getBrotliSize() ?? this.getEstimatedSize('brotliSize');
+  }
+
   getEstimatedSize(sizeType) {
     const parentModuleSize = this.parent[sizeType];
 
@@ -53,7 +57,7 @@ export default class ConcatenatedModule extends Module {
     });
 
     const ModuleConstructor = moduleData.modules ? ConcatenatedModule : ContentModule;
-    const module = new ModuleConstructor(fileName, moduleData, this);
+    const module = new ModuleConstructor(fileName, moduleData, this, this.opts);
     currentFolder.addChildModule(module);
   }
 

src/tree/ContentFolder.js

@@ -15,6 +15,10 @@ export default class ContentFolder extends BaseFolder {
     return this.getSize('gzipSize');
   }
 
+  get brotliSize() {
+    return this.getSize('brotliSize');
+  }
+
   getSize(sizeType) {
     const ownerModuleSize = this.ownerModule[sizeType];
 
@@ -28,6 +32,7 @@ export default class ContentFolder extends BaseFolder {
       ...super.toChartData(),
       parsedSize: this.parsedSize,
       gzipSize: this.gzipSize,
+      brotliSize: this.brotliSize,
       inaccurateSizes: true
     };
   }

src/tree/ContentModule.js

@@ -15,6 +15,10 @@ export default class ContentModule extends Module {
     return this.getSize('gzipSize');
   }
 
+  get brotliSize() {
+    return this.getSize('brotliSize');
+  }
+
   getSize(sizeType) {
     const ownerModuleSize = this.ownerModule[sizeType];
 

src/tree/Folder.js

@@ -1,22 +1,36 @@
-import gzipSize from 'gzip-size';
-
 import Module from './Module';
 import BaseFolder from './BaseFolder';
 import ConcatenatedModule from './ConcatenatedModule';
 import {getModulePathParts} from './utils';
+import {getCompressedSize} from '../sizeUtils';
 
 export default class Folder extends BaseFolder {
 
+  constructor(name, opts) {
+    super(name);
+    this.opts = opts;
+  }
+
   get parsedSize() {
     return this.src ? this.src.length : 0;
   }
 
   get gzipSize() {
-    if (!Object.prototype.hasOwnProperty.call(this, '_gzipSize')) {
-      this._gzipSize = this.src ? gzipSize.sync(this.src) : 0;
+    return this.opts.compressionAlgorithm === 'gzip' ? this.getCompressedSize('gzip') : undefined;
+  }
+
+  get brotliSize() {
+    return this.opts.compressionAlgorithm === 'brotli' ? this.getCompressedSize('brotli') : undefined;
+  }
+
+  getCompressedSize(compressionAlgorithm) {
+    const key = `_${compressionAlgorithm}Size`;
+
+    if (!Object.prototype.hasOwnProperty.call(this, key)) {
+      this[key] = this.src ? getCompressedSize(compressionAlgorithm, this.src) : 0;
     }
 
-    return this._gzipSize;
+    return this[key];
   }
 
   addModule(moduleData) {
@@ -41,22 +55,23 @@ export default class Folder extends BaseFolder {
         // See `test/stats/with-invalid-dynamic-require.json` as an example.
         !(childNode instanceof Folder)
       ) {
-        childNode = currentFolder.addChildFolder(new Folder(folderName));
+        childNode = currentFolder.addChildFolder(new Folder(folderName, this.opts));
       }
 
       currentFolder = childNode;
     });
 
     const ModuleConstructor = moduleData.modules ? ConcatenatedModule : Module;
-    const module = new ModuleConstructor(fileName, moduleData, this);
+    const module = new ModuleConstructor(fileName, moduleData, this, this.opts);
     currentFolder.addChildModule(module);
   }
 
   toChartData() {
     return {
       ...super.toChartData(),
       parsedSize: this.parsedSize,
-      gzipSize: this.gzipSize
+      gzipSize: this.gzipSize,
+      brotliSize: this.brotliSize
     };
   }
 

src/tree/Module.js

@@ -1,12 +1,12 @@
-import gzipSize from 'gzip-size';
-
 import Node from './Node';
+import {getCompressedSize} from '../sizeUtils';
 
 export default class Module extends Node {
 
-  constructor(name, data, parent) {
+  constructor(name, data, parent, opts) {
     super(name, parent);
     this.data = data;
+    this.opts = opts;
   }
 
   get src() {
@@ -16,6 +16,7 @@ export default class Module extends Node {
   set src(value) {
     this.data.parsedSrc = value;
     delete this._gzipSize;
+    delete this._brotliSize;
   }
 
   get size() {
@@ -34,16 +35,29 @@ export default class Module extends Node {
     return this.getGzipSize();
   }
 
+  get brotliSize() {
+    return this.getBrotliSize();
+  }
+
   getParsedSize() {
     return this.src ? this.src.length : undefined;
   }
 
   getGzipSize() {
-    if (!('_gzipSize' in this)) {
-      this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
+    return this.opts.compressionAlgorithm === 'gzip' ? this.getCompressedSize('gzip') : undefined;
+  }
+
+  getBrotliSize() {
+    return this.opts.compressionAlgorithm === 'brotli' ? this.getCompressedSize('brotli') : undefined;
+  }
+
+  getCompressedSize(compressionAlgorithm) {
+    const key = `_${compressionAlgorithm}Size`;
+    if (!(key in this)) {
+      this[key] = this.src ? getCompressedSize(compressionAlgorithm, this.src) : undefined;
     }
 
-    return this._gzipSize;
+    return this[key];
   }
 
   mergeData(data) {
@@ -63,7 +77,8 @@ export default class Module extends Node {
       path: this.path,
       statSize: this.size,
       parsedSize: this.parsedSize,
-      gzipSize: this.gzipSize
+      gzipSize: this.gzipSize,
+      brotliSize: this.brotliSize
     };
   }
 

test/plugin.js

@@ -170,6 +170,26 @@ describe('Plugin', function () {
         expect(error).to.equal(reportTitleError);
       });
     });
+
+    describe('compressionAlgorithm', function () {
+      it('should default to gzip', async function () {
+        const config = makeWebpackConfig({analyzerOpts: {}});
+        await webpackCompile(config, '4.44.2');
+        await expectValidReport({parsedSize: 1311, gzipSize: 342});
+      });
+
+      it('should support gzip', async function () {
+        const config = makeWebpackConfig({analyzerOpts: {compressionAlgorithm: 'gzip'}});
+        await webpackCompile(config, '4.44.2');
+        await expectValidReport({parsedSize: 1311, gzipSize: 342});
+      });
+
+      it('should support brotli', async function () {
+        const config = makeWebpackConfig({analyzerOpts: {compressionAlgorithm: 'brotli'}});
+        await webpackCompile(config, '4.44.2');
+        await expectValidReport({parsedSize: 1311, gzipSize: undefined, brotliSize: 302});
+      });
+    });
   });
 
   async function expectValidReport(opts) {
@@ -179,8 +199,8 @@ describe('Plugin', function () {
       bundleLabel = 'bundle.js',
       statSize = 141,
       parsedSize = 2821,
-      gzipSize = 770
-    } = opts || {};
+      gzipSize
+    } = {gzipSize: 770, ...opts};
 
     expect(fs.existsSync(`${__dirname}/output/${bundleFilename}`), 'bundle file missing').to.be.true;
     expect(fs.existsSync(`${__dirname}/output/${reportFilename}`), 'report file missing').to.be.true;