diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx
index 1afe3a9b..0bac4939 100644
--- a/client/components/ModulesTreemap.jsx
+++ b/client/components/ModulesTreemap.jsx
@@ -21,7 +21,8 @@ import ModulesList from './ModulesList';
 const SIZE_SWITCH_ITEMS = [
   {label: 'Stat', prop: 'statSize'},
   {label: 'Parsed', prop: 'parsedSize'},
-  {label: 'Gzipped', prop: 'gzipSize'}
+  {label: 'Gzipped', prop: 'gzipSize'},
+  {label: 'Brotli', prop: 'brotliSize'}
 ];
 
 @observer
@@ -162,7 +163,9 @@ export default class ModulesTreemap extends Component {
   };
 
   @computed get sizeSwitchItems() {
-    return store.hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1);
+    return store.hasParsedSizes ?
+      SIZE_SWITCH_ITEMS.filter(item => item.label !== "Brotli") : 
+      SIZE_SWITCH_ITEMS.slice(0, 1);
   }
 
   @computed get activeSizeItem() {
@@ -317,6 +320,7 @@ export default class ModulesTreemap extends Component {
         {this.renderModuleSize(module, 'stat')}
         {!module.inaccurateSizes && this.renderModuleSize(module, 'parsed')}
         {!module.inaccurateSizes && this.renderModuleSize(module, 'gzip')}
+        {!module.inaccurateSizes && this.renderModuleSize(module, 'brotli')}
         {module.path &&
           <div>Path: <strong>{module.path}</strong></div>
         }
diff --git a/package.json b/package.json
index 2ea759bb..81062ca5 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   "dependencies": {
     "acorn": "^8.0.4",
     "acorn-walk": "^8.0.0",
+    "brotli-size": "^4.0.0",
     "chalk": "^4.1.0",
     "commander": "^7.2.0",
     "gzip-size": "^6.0.0",
diff --git a/src/analyzer.js b/src/analyzer.js
index be11bbf1..f3cfe27a 100644
--- a/src/analyzer.js
+++ b/src/analyzer.js
@@ -3,6 +3,7 @@ const path = require('path');
 
 const _ = require('lodash');
 const gzipSize = require('gzip-size');
+const brotliSize = require('brotli-size');
 
 const Logger = require('./Logger');
 const Folder = require('./tree/Folder').default;
@@ -103,6 +104,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     if (assetSources) {
       asset.parsedSize = Buffer.byteLength(assetSources.src);
       asset.gzipSize = gzipSize.sync(assetSources.src);
+      asset.brotliSize = brotliSize.sync(assetSources.src);
     }
 
     // Picking modules from current bundle script
@@ -157,6 +159,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     statSize: asset.tree.size || asset.size,
     parsedSize: asset.parsedSize,
     gzipSize: asset.gzipSize,
+    brotliSize: asset.brotliSize,
     groups: _.invokeMap(asset.tree.children, 'toChartData')
   }));
 }