Add Brotli size support in viewer

Author: dcsaszar

client/components/ModulesTreemap.jsx

@@ -19,11 +19,18 @@ import {store} from '../store';
 import ModulesList from './ModulesList';
 import Dropdown from './Dropdown';
 
-const SIZE_SWITCH_ITEMS = [
-  {label: 'Stat', prop: 'statSize'},
-  {label: 'Parsed', prop: 'parsedSize'},
-  {label: 'Gzipped', prop: 'gzipSize'}
-];
+function getSizeSwitchItems() {
+  const items = [
+    {label: 'Stat', prop: 'statSize'},
+    {label: 'Parsed', prop: 'parsedSize'}
+  ];
+
+  if (window.compressionAlgorithm === 'gzip') items.push({label: 'Gzipped', prop: 'gzipSize'});
+
+  if (window.compressionAlgorithm === 'brotli') items.push({label: 'Brotli', prop: 'brotliSize'});
+
+  return items;
+};
 
 @observer
 export default class ModulesTreemap extends Component {
@@ -144,7 +151,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 = getSizeSwitchItems().find(item => item.prop === sizeProp).label;
     const isActive = (store.activeSize === sizeProp);
 
     return (typeof size === 'number') ?
@@ -168,7 +175,7 @@ export default class ModulesTreemap extends Component {
   };
 
   @computed get sizeSwitchItems() {
-    return store.hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1);
+    return store.hasParsedSizes ? getSizeSwitchItems() : getSizeSwitchItems().slice(0, 1);
   }
 
   @computed get activeSizeItem() {
@@ -331,7 +338,7 @@ export default class ModulesTreemap extends Component {
         <br/>
         {this.renderModuleSize(module, 'stat')}
         {!module.inaccurateSizes && this.renderModuleSize(module, 'parsed')}
-        {!module.inaccurateSizes && this.renderModuleSize(module, 'gzip')}
+        {!module.inaccurateSizes && this.renderModuleSize(module, window.compressionAlgorithm)}
         {module.path &&
           <div>Path: <strong>{module.path}</strong></div>
         }

client/store.js

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

src/viewer.js

@@ -21,6 +21,11 @@ function resolveTitle(reportTitle) {
   }
 }
 
+function resolveDefaultSizes(defaultSizes, compressionAlgorithm) {
+  if (['gzip', 'brotli'].includes(defaultSizes)) return compressionAlgorithm;
+  return defaultSizes;
+}
+
 module.exports = {
   startServer,
   generateReport,
@@ -63,7 +68,7 @@ async function startServer(bundleStats, opts) {
         title: resolveTitle(reportTitle),
         chartData,
         entrypoints,
-        defaultSizes,
+        defaultSizes: resolveDefaultSizes(defaultSizes, compressionAlgorithm),
         compressionAlgorithm,
         enableWebSocket: true
       });
@@ -152,7 +157,7 @@ async function generateReport(bundleStats, opts) {
     title: resolveTitle(reportTitle),
     chartData,
     entrypoints,
-    defaultSizes,
+    defaultSizes: resolveDefaultSizes(defaultSizes, compressionAlgorithm),
     compressionAlgorithm,
     enableWebSocket: false
   });