Add compressedSizeLabel option

dcsaszar · dcsaszar · commit 09363f0beef5 · 2021-04-10T21:07:40.000+02:00
diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx
@@ -18,11 +18,13 @@ import Search from './Search';
 import {store} from '../store';
 import ModulesList from './ModulesList';
 
-const SIZE_SWITCH_ITEMS = [
-  {label: 'Stat', prop: 'statSize'},
-  {label: 'Parsed', prop: 'parsedSize'},
-  {label: 'Gzipped', prop: 'gzipSize'}
-];
+function allSizeSwitchItems() {
+  return [
+    {label: 'Stat', prop: 'statSize'},
+    {label: 'Parsed', prop: 'parsedSize'},
+    {label: window.compressedSizeLabel, prop: 'gzipSize'}
+  ];
+}
 
 @observer
 export default class ModulesTreemap extends Component {
@@ -138,7 +140,7 @@ export default class ModulesTreemap extends Component {
   renderModuleSize(module, sizeType) {
     const sizeProp = `${sizeType}Size`;
     const size = module[sizeProp];
-    const sizeLabel = SIZE_SWITCH_ITEMS.find(item => item.prop === sizeProp).label;
+    const sizeLabel = allSizeSwitchItems().find(item => item.prop === sizeProp).label;
     const isActive = (store.activeSize === sizeProp);
 
     return (typeof size === 'number') ?
@@ -162,7 +164,8 @@ export default class ModulesTreemap extends Component {
   };
 
   @computed get sizeSwitchItems() {
-    return store.hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1);
+    const items = allSizeSwitchItems();
+    return store.hasParsedSizes ? items : items.slice(0, 1);
   }
 
   @computed get activeSizeItem() {
diff --git a/src/BundleAnalyzerPlugin.js b/src/BundleAnalyzerPlugin.js
@@ -105,6 +105,7 @@ class BundleAnalyzerPlugin {
         port: this.opts.analyzerPort,
         reportTitle: this.opts.reportTitle,
         compressedSize: this.opts.compressedSize,
+        compressedSizeLabel: this.opts.compressedSizeLabel,
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
diff --git a/src/bin/analyzer.js b/src/bin/analyzer.js
@@ -58,6 +58,11 @@ const program = commander
     br(`Possible values: ${[...SIZES].join(', ')}`),
     'parsed'
   )
+  .option(
+    '--compressed-size-label <label>',
+    'String to use for the compressed module size option.',
+    'Gzipped'
+  )
   .option(
     '-O, --no-open',
     "Don't open report in default browser automatically."
@@ -83,6 +88,7 @@ let {
   report: reportFilename,
   title: reportTitle,
   defaultSizes,
+  compressedSizeLabel,
   logLevel,
   open: openBrowser,
   exclude: excludeAssets,
@@ -125,6 +131,7 @@ if (mode === 'server') {
     port,
     host,
     defaultSizes,
+    compressedSizeLabel,
     reportTitle,
     bundleDir,
     excludeAssets,
@@ -136,6 +143,7 @@ if (mode === 'server') {
     reportFilename: resolve(reportFilename || 'report.html'),
     reportTitle,
     defaultSizes,
+    compressedSizeLabel,
     bundleDir,
     excludeAssets,
     logger: new Logger(logLevel)
@@ -156,7 +164,7 @@ function showHelp(error) {
 }
 
 function br(str) {
-  return `\n${' '.repeat(28)}${str}`;
+  return `\n${' '.repeat(33)}${str}`;
 }
 
 function array() {
diff --git a/src/template.js b/src/template.js
@@ -39,7 +39,7 @@ function getScript(filename, mode) {
   }
 }
 
-function renderViewer({title, enableWebSocket, chartData, defaultSizes, mode} = {}) {
+function renderViewer({title, enableWebSocket, chartData, defaultSizes, compressedSizeLabel, mode} = {}) {
   return html`<!DOCTYPE html>
 <html>
   <head>
@@ -59,6 +59,7 @@ function renderViewer({title, enableWebSocket, chartData, defaultSizes, mode} =
     <script>
       window.chartData = ${escapeJson(chartData)};
       window.defaultSizes = ${escapeJson(defaultSizes)};
+      window.compressedSizeLabel = ${escapeJson(compressedSizeLabel)};
     </script>
   </body>
 </html>`;
diff --git a/src/viewer.js b/src/viewer.js
@@ -40,7 +40,8 @@ async function startServer(bundleStats, opts) {
     defaultSizes = 'parsed',
     excludeAssets = null,
     reportTitle,
-    compressedSize
+    compressedSize,
+    compressedSizeLabel = 'Gzipped'
   } = opts || {};
 
   const analyzerOpts = {logger, excludeAssets, compressedSize};
@@ -61,6 +62,7 @@ async function startServer(bundleStats, opts) {
         title: resolveTitle(reportTitle),
         chartData,
         defaultSizes,
+        compressedSizeLabel,
         enableWebSocket: true
       });
       res.writeHead(200, {'Content-Type': 'text/html'});
@@ -128,6 +130,7 @@ async function generateReport(bundleStats, opts) {
     reportFilename,
     reportTitle,
     compressedSize,
+    compressedSizeLabel = 'Gzipped',
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
@@ -143,6 +146,7 @@ async function generateReport(bundleStats, opts) {
     title: resolveTitle(reportTitle),
     chartData,
     defaultSizes,
+    compressedSizeLabel,
     enableWebSocket: false
   });
   const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
diff --git a/test/analyzer.js b/test/analyzer.js
@@ -199,6 +199,11 @@ describe('Analyzer', function () {
         expect(generatedReportTitle).to.match(/^webpack-bundle-analyzer \[.* at \d{2}:\d{2}\]/u);
       });
     });
+
+    it('should take the --compressed-size-label option', async function () {
+      generateReportFrom('with-modules-chunk.json', '--compressed-size-label "A size label"');
+      expect(await getCompressedSizeLabel()).to.equal('A size label');
+    });
   });
 });
 
@@ -224,6 +229,11 @@ async function getChartData() {
   return await nightmare.goto(`file://${__dirname}/output/report.html`).evaluate(() => window.chartData);
 }
 
+async function getCompressedSizeLabel() {
+  return await nightmare.goto(`file://${__dirname}/output/report.html`).evaluate(
+    () => window.compressedSizeLabel);
+}
+
 function forEachChartItem(chartData, cb) {
   for (const item of chartData) {
     cb(item);
