Add compressionAlgorithm option

Author: dcsaszar

src/BundleAnalyzerPlugin.js

@@ -12,6 +12,7 @@ class BundleAnalyzerPlugin {
     this.opts = {
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
+      compressionAlgorithm: 'gzip',
       reportFilename: null,
       reportTitle: utils.defaultTitle,
       defaultSizes: 'parsed',
@@ -105,6 +106,7 @@ class BundleAnalyzerPlugin {
         host: this.opts.analyzerHost,
         port: this.opts.analyzerPort,
         reportTitle: this.opts.reportTitle,
+        compressionAlgorithm: this.opts.compressionAlgorithm,
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
@@ -117,6 +119,7 @@ class BundleAnalyzerPlugin {
   async generateJSONReport(stats) {
     await viewer.generateJSONReport(stats, {
       reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.json'),
+      compressionAlgorithm: this.opts.compressionAlgorithm,
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
       excludeAssets: this.opts.excludeAssets
@@ -128,6 +131,7 @@ class BundleAnalyzerPlugin {
       openBrowser: this.opts.openAnalyzer,
       reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.html'),
       reportTitle: this.opts.reportTitle,
+      compressionAlgorithm: this.opts.compressionAlgorithm,
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,

src/bin/analyzer.js

@@ -11,6 +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 program = commander
   .version(require('../../package.json').version)
@@ -58,6 +59,12 @@ const program = commander
     br(`Possible values: ${[...SIZES].join(', ')}`),
     'parsed'
   )
+  .option(
+    '--compression-algorithm <type>',
+    'Compression algorithm that will be used to calculate the compressed module sizes.' +
+      br(`Possible values: ${[...COMPRESSION_ALGORITHMS].join(', ')}`),
+    'gzip'
+  )
   .option(
     '-O, --no-open',
     "Don't open report in default browser automatically."
@@ -84,6 +91,7 @@ let {
   report: reportFilename,
   title: reportTitle,
   defaultSizes,
+  compressionAlgorithm,
   logLevel,
   open: openBrowser,
   exclude: excludeAssets
@@ -104,6 +112,9 @@ if (mode === 'server') {
   port = port === 'auto' ? 0 : Number(port);
   if (isNaN(port)) showHelp('Invalid port. Should be a number or `auto`');
 }
+if (!COMPRESSION_ALGORITHMS.has(compressionAlgorithm)) {
+  showHelp(`Invalid compression algorithm option. Possible values are: ${[...COMPRESSION_ALGORITHMS].join(', ')}`);
+}
 if (!SIZES.has(defaultSizes)) showHelp(`Invalid default sizes option. Possible values are: ${[...SIZES].join(', ')}`);
 
 bundleStatsFile = resolve(bundleStatsFile);
@@ -121,6 +132,7 @@ async function parseAndAnalyse(bundleStatsFile) {
         port,
         host,
         defaultSizes,
+        compressionAlgorithm,
         reportTitle,
         bundleDir,
         excludeAssets,
@@ -133,13 +145,15 @@ async function parseAndAnalyse(bundleStatsFile) {
         reportFilename: resolve(reportFilename || 'report.html'),
         reportTitle,
         defaultSizes,
+        compressionAlgorithm,
         bundleDir,
         excludeAssets,
         logger: new Logger(logLevel)
       });
     } else if (mode === 'json') {
       viewer.generateJSONReport(bundleStats, {
         reportFilename: resolve(reportFilename || 'report.json'),
+        compressionAlgorithm,
         bundleDir,
         excludeAssets,
         logger: new Logger(logLevel)
@@ -159,7 +173,7 @@ function showHelp(error) {
 }
 
 function br(str) {
-  return `\n${' '.repeat(28)}${str}`;
+  return `\n${' '.repeat(32)}${str}`;
 }
 
 function array() {

src/template.js

@@ -39,7 +39,7 @@ function getScript(filename, mode) {
   }
 }
 
-function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSizes, mode} = {}) {
+function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSizes, compressionAlgorithm, mode} = {}) {
   return html`<!DOCTYPE html>
 <html>
   <head>
@@ -60,6 +60,7 @@ function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSi
       window.chartData = ${escapeJson(chartData)};
       window.entrypoints = ${escapeJson(entrypoints)};
       window.defaultSizes = ${escapeJson(defaultSizes)};
+      window.compressionAlgorithm = ${escapeJson(compressionAlgorithm)};
     </script>
   </body>
 </html>`;

src/viewer.js

@@ -38,12 +38,13 @@ async function startServer(bundleStats, opts) {
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
+    compressionAlgorithm,
     excludeAssets = null,
     reportTitle,
     analyzerUrl
   } = opts || {};
 
-  const analyzerOpts = {logger, excludeAssets};
+  const analyzerOpts = {logger, excludeAssets, compressionAlgorithm};
 
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
   const entrypoints = getEntrypoints(bundleStats);
@@ -63,6 +64,7 @@ async function startServer(bundleStats, opts) {
         chartData,
         entrypoints,
         defaultSizes,
+        compressionAlgorithm,
         enableWebSocket: true
       });
       res.writeHead(200, {'Content-Type': 'text/html'});
@@ -136,10 +138,11 @@ async function generateReport(bundleStats, opts) {
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
+    compressionAlgorithm,
     excludeAssets = null
   } = opts || {};
 
-  const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
+  const chartData = getChartData({logger, excludeAssets, compressionAlgorithm}, bundleStats, bundleDir);
   const entrypoints = getEntrypoints(bundleStats);
 
   if (!chartData) return;
@@ -150,6 +153,7 @@ async function generateReport(bundleStats, opts) {
     chartData,
     entrypoints,
     defaultSizes,
+    compressionAlgorithm,
     enableWebSocket: false
   });
   const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
@@ -165,9 +169,15 @@ 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,
+    compressionAlgorithm
+  } = opts || {};
 
-  const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
+  const chartData = getChartData({logger, excludeAssets, compressionAlgorithm}, bundleStats, bundleDir);
 
   if (!chartData) return;
 

test/analyzer.js

@@ -248,6 +248,24 @@ describe('Analyzer', function () {
         expect(generatedReportTitle).to.match(/^webpack-bundle-analyzer \[.* at \d{2}:\d{2}\]/u);
       });
     });
+
+
+    describe('compression algorithm', function () {
+      it('should accept --compression-algorithm brotli', async function () {
+        generateReportFrom('with-modules-chunk.json', '--compression-algorithm brotli');
+        expect(await getCompressionAlgorithm()).to.equal('brotli');
+      });
+
+      it('should accept --compression-algorithm gzip', async function () {
+        generateReportFrom('with-modules-chunk.json', '--compression-algorithm gzip');
+        expect(await getCompressionAlgorithm()).to.equal('gzip');
+      });
+
+      it('should default to gzip', async function () {
+        generateReportFrom('with-modules-chunk.json');
+        expect(await getCompressionAlgorithm()).to.equal('gzip');
+      });
+    });
   });
 });
 
@@ -277,6 +295,12 @@ async function getChartData() {
   return await page.evaluate(() => window.chartData);
 }
 
+async function getCompressionAlgorithm() {
+  const page = await browser.newPage();
+  await page.goto(`file://${__dirname}/output/report.html`);
+  return await page.evaluate(() => window.compressionAlgorithm);
+}
+
 function forEachChartItem(chartData, cb) {
   for (const item of chartData) {
     cb(item);