feat: add support for Zstandard compression algorithm

Author: bjohansebas

client/components/ModulesTreemap.jsx

@@ -29,6 +29,8 @@ function getSizeSwitchItems() {
 
   if (window.compressionAlgorithm === 'brotli') items.push({label: 'Brotli', prop: 'brotliSize'});
 
+  if (window.compressionAlgorithm === 'zstd') items.push({label: 'Zstandard', prop: 'zstdSize'});
+
   return items;
 };
 

client/store.js

@@ -4,7 +4,7 @@ import localStorage from './localStorage';
 
 export class Store {
   cid = 0;
-  sizes = new Set(['statSize', 'parsedSize', 'gzipSize', 'brotliSize']);
+  sizes = new Set(['statSize', 'parsedSize', 'gzipSize', 'brotliSize', 'zstdSize']);
 
   @observable.ref allChunks;
   @observable.shallow selectedChunks;

src/analyzer.js

@@ -113,6 +113,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
       asset.parsedSize = Buffer.byteLength(assetSources.src);
       if (compressionAlgorithm === 'gzip') asset.gzipSize = getCompressedSize('gzip', assetSources.src);
       if (compressionAlgorithm === 'brotli') asset.brotliSize = getCompressedSize('brotli', assetSources.src);
+      if (compressionAlgorithm === 'zstd') asset.zstdSize = getCompressedSize('zstd', assetSources.src);
     }
 
     // Picking modules from current bundle script
@@ -169,6 +170,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     parsedSize: asset.parsedSize,
     gzipSize: asset.gzipSize,
     brotliSize: asset.brotliSize,
+    zstdSize: asset.zstdSize,
     groups: Object.values(asset.tree.children).map(i => i.toChartData()),
     isInitialByEntrypoint: chunkToInitialByEntrypoint[filename] ?? {}
   }));

src/bin/analyzer.js

@@ -11,7 +11,7 @@ const Logger = require('../Logger');
 const utils = require('../utils');
 
 const SIZES = new Set(['stat', 'parsed', 'gzip']);
-const COMPRESSION_ALGORITHMS = new Set(['gzip', 'brotli']);
+const COMPRESSION_ALGORITHMS = new Set(['gzip', 'brotli', 'zstd']);
 
 const program = commander
   .version(require('../../package.json').version)

src/sizeUtils.js

@@ -3,6 +3,7 @@ const zlib = require('zlib');
 export function getCompressedSize(compressionAlgorithm, input) {
   if (compressionAlgorithm === 'gzip') return zlib.gzipSync(input, {level: 9}).length;
   if (compressionAlgorithm === 'brotli') return zlib.brotliCompressSync(input).length;
+  if (compressionAlgorithm === 'zstd') return zlib.zstdCompressSync(input).length;
 
   throw new Error(`Unsupported compression algorithm: ${compressionAlgorithm}.`);
 }

src/tree/ConcatenatedModule.js

@@ -24,6 +24,10 @@ export default class ConcatenatedModule extends Module {
     return this.getBrotliSize() ?? this.getEstimatedSize('brotliSize');
   }
 
+  get zstdSize() {
+    return this.getZstdSize() ?? this.getEstimatedSize('zstdSize');
+  }
+
   getEstimatedSize(sizeType) {
     const parentModuleSize = this.parent[sizeType];
 

src/tree/ContentFolder.js

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

src/tree/ContentModule.js

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

src/tree/Folder.js

@@ -23,6 +23,10 @@ export default class Folder extends BaseFolder {
     return this.opts.compressionAlgorithm === 'brotli' ? this.getCompressedSize('brotli') : undefined;
   }
 
+  get zstdSize() {
+    return this.opts.compressionAlgorithm === 'zstd' ? this.getCompressedSize('zstd') : undefined;
+  }
+
   getCompressedSize(compressionAlgorithm) {
     const key = `_${compressionAlgorithm}Size`;
 
@@ -71,7 +75,8 @@ export default class Folder extends BaseFolder {
       ...super.toChartData(),
       parsedSize: this.parsedSize,
       gzipSize: this.gzipSize,
-      brotliSize: this.brotliSize
+      brotliSize: this.brotliSize,
+      zstdSize: this.zstdSize
     };
   }
 

src/tree/Module.js

@@ -17,6 +17,7 @@ export default class Module extends Node {
     this.data.parsedSrc = value;
     delete this._gzipSize;
     delete this._brotliSize;
+    delete this._zstdSize;
   }
 
   get size() {
@@ -39,6 +40,10 @@ export default class Module extends Node {
     return this.getBrotliSize();
   }
 
+  get zstdSize() {
+    return this.getZstdSize();
+  }
+
   getParsedSize() {
     return this.src ? this.src.length : undefined;
   }
@@ -51,6 +56,10 @@ export default class Module extends Node {
     return this.opts.compressionAlgorithm === 'brotli' ? this.getCompressedSize('brotli') : undefined;
   }
 
+  getZstdSize() {
+    return this.opts.compressionAlgorithm === 'zstd' ? this.getCompressedSize('zstd') : undefined;
+  }
+
   getCompressedSize(compressionAlgorithm) {
     const key = `_${compressionAlgorithm}Size`;
     if (!(key in this)) {
@@ -78,7 +87,8 @@ export default class Module extends Node {
       statSize: this.size,
       parsedSize: this.parsedSize,
       gzipSize: this.gzipSize,
-      brotliSize: this.brotliSize
+      brotliSize: this.brotliSize,
+      zstdSize: this.zstdSize
     };
   }