Adding CI step to compare build size to previous master build. (#450)

.nvmrc

@@ -0,0 +1 @@
+v10.15.1

.travis.yml

@@ -1,7 +1,4 @@
 language: node_js
-node_js:
-- node
-- 10
-- 8
 cache: npm
 script: npm run build
+after_success: npm run sizereport

config/size-report.js

@@ -0,0 +1,204 @@
+const path = require('path');
+const { URL } = require('url');
+
+const gzipSize = require('gzip-size');
+const fetch = require('node-fetch');
+const prettyBytes = require('pretty-bytes');
+const escapeRE = require('escape-string-regexp');
+const readdirp = require('readdirp');
+const chalk = new require('chalk').constructor({ level: 4 });
+
+function fetchTravis(path, options = {}) {
+  const url = new URL(path, 'https://api.travis-ci.org');
+  url.search = new URLSearchParams(options);
+
+  return fetch(url, {
+    headers: { 'Travis-API-Version': '3' },
+  });
+}
+
+function fetchTravisBuildInfo(user, repo, branch) {
+  return fetchTravis(`/repo/${encodeURIComponent(`${user}/${repo}`)}/builds`, {
+    'branch.name': branch,
+    state: 'passed',
+    limit: 1,
+  }).then(r => r.json());
+}
+
+function fetchTravisText(path) {
+  return fetchTravis(path).then(r => r.text());
+}
+
+/**
+ * Recursively-read a directory and turn it into an array of { name, size, gzipSize }
+ */
+async function dirToInfoArray(startPath, {
+  namePrefix = '',
+} = {}) {
+  const results = await new Promise((resolve, reject) => {
+    readdirp({ root: startPath }, (err, results) => {
+      if (err) reject(err); else resolve(results);
+    });
+  });
+
+  return Promise.all(
+    results.files.map(async (entry) => ({
+      name: entry.path,
+      gzipSize: await gzipSize.file(entry.fullPath),
+      size: entry.stat.size,
+    })),
+  );
+}
+
+/**
+ * Try to treat two entries with different file name hashes as the same file.
+ */
+function findHashedMatch(name, buildInfo) {
+  const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(name);
+  if (!nameParts) return;
+
+  const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
+  const matchingEntry = buildInfo.find(entry => matchRe.test(entry.name));
+  return matchingEntry;
+}
+
+const buildSizePrefix = '=== BUILD SIZES: ';
+const buildSizePrefixRe = new RegExp(`^${escapeRE(buildSizePrefix)}(.+)$`, 'm');
+
+async function getPreviousBuildInfo() {
+  const buildData = await fetchTravisBuildInfo('GoogleChromeLabs', 'squoosh', 'master');
+  const jobUrl = buildData.builds[0].jobs[0]['@href'];
+  const log = await fetchTravisText(jobUrl + '/log.txt');
+  const reResult = buildSizePrefixRe.exec(log);
+
+  if (!reResult) return;
+  return JSON.parse(reResult[1]);
+}
+
+/**
+ * Generate an array that represents the difference between builds.
+ * Returns an array of { beforeName, afterName, beforeSize, afterSize }.
+ * Sizes are gzipped size.
+ * Before/after properties are missing if resource isn't in the previous/new build.
+ */
+function getChanges(previousBuildInfo, buildInfo) {
+  const buildChanges = [];
+  const alsoInPreviousBuild = new Set();
+
+  for (const oldEntry of previousBuildInfo) {
+    const newEntry = buildInfo.find(entry => entry.name === oldEntry.name) ||
+      findHashedMatch(oldEntry.name, buildInfo);
+
+    // Entry is in previous build, but not the new build.
+    if (!newEntry) {
+      buildChanges.push({
+        beforeName: oldEntry.name,
+        beforeSize: oldEntry.gzipSize,
+      });
+      continue;
+    }
+
+    // Mark this entry so we know we've dealt with it.
+    alsoInPreviousBuild.add(newEntry);
+
+    // If they're the same, just ignore.
+    // Using size rather than gzip size. I've seen different platforms produce different zipped
+    // sizes.
+    if (
+      oldEntry.size === newEntry.size &&
+      oldEntry.name === newEntry.name
+    ) continue;
+
+    // Entry is in both builds (maybe renamed).
+    buildChanges.push({
+      beforeName: oldEntry.name,
+      afterName: newEntry.name,
+      beforeSize: oldEntry.gzipSize,
+      afterSize: newEntry.gzipSize,
+    });
+  }
+
+  // Look for entries that are only in the new build.
+  for (const newEntry of buildInfo) {
+    if (alsoInPreviousBuild.has(newEntry)) continue;
+
+    buildChanges.push({
+      afterName: newEntry.name,
+      afterSize: newEntry.gzipSize,
+    });
+  }
+
+  return buildChanges;
+}
+
+async function main() {
+  // Output the current build sizes for later retrieval.
+  const buildInfo = await dirToInfoArray(__dirname + '/../build');
+  console.log(buildSizePrefix + JSON.stringify(buildInfo));
+  console.log('\nBuild change report:');
+
+  let previousBuildInfo;
+
+  try {
+    previousBuildInfo = await getPreviousBuildInfo();
+  } catch (err) {
+    console.log(`  Couldn't parse previous build info`);
+    return;
+  }
+
+  if (!previousBuildInfo) {
+    console.log(`  Couldn't find previous build info`);
+    return;
+  }
+
+  const buildChanges = getChanges(buildInfo, previousBuildInfo);
+
+  if (buildChanges.length === 0) {
+    console.log('  No changes');
+    return;
+  }
+
+  // One letter references, so it's easier to get the spacing right.
+  const y = chalk.yellow;
+  const g = chalk.green;
+  const r = chalk.red;
+
+  for (const change of buildChanges) {
+    // New file.
+    if (!change.beforeSize) {
+      console.log(`  ${g('ADDED')}   ${change.afterName} - ${prettyBytes(change.afterSize)}`);
+      continue;
+    }
+
+    // Removed file.
+    if (!change.afterSize) {
+      console.log(`  ${r('REMOVED')} ${change.beforeName} - was ${prettyBytes(change.beforeSize)}`);
+      continue;
+    }
+
+    // Changed file.
+    let size;
+
+    if (change.beforeSize === change.afterSize) {
+      // Just renamed.
+      size = `${prettyBytes(change.afterSize)} -> no change`;
+    } else {
+      const color = change.afterSize > change.beforeSize ? r : g;
+      const sizeDiff = prettyBytes(change.afterSize - change.beforeSize, { signed: true });
+      const percent = Math.round((change.afterSize / change.beforeSize) * 10000) / 100;
+
+      size = `${prettyBytes(change.beforeSize)} -> ${prettyBytes(change.afterSize)}` +
+        ' (' +
+        color(`${sizeDiff}, ${percent}%`) +
+        ')';
+    }
+
+    console.log(`  ${y('CHANGED')} ${change.afterName} - ${size}`);
+
+    if (change.beforeName !== change.afterName) {
+      console.log(`    Renamed from: ${change.beforeName}`);
+    }
+  }
+}
+
+main();

package-lock.json

@@ -556,10 +556,13 @@
       "dev": true
     },
     "ansi-styles": {
-      "version": "2.2.1",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
     },
     "anymatch": {
       "version": "2.0.0",
@@ -711,7 +714,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -825,6 +828,33 @@
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
         "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
       }
     },
     "babel-core": {
@@ -872,7 +902,7 @@
       "dependencies": {
         "jsesc": {
           "version": "1.3.0",
-          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
           "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
           "dev": true
         }
@@ -1068,7 +1098,7 @@
     },
     "babel-plugin-istanbul": {
       "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
+      "resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
       "integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==",
       "dev": true,
       "requires": {
@@ -1895,7 +1925,7 @@
       "dependencies": {
         "resolve": {
           "version": "1.1.7",
-          "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
           "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
           "dev": true
         }
@@ -1903,7 +1933,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -1940,7 +1970,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -1983,7 +2013,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -2189,16 +2219,14 @@
       "dev": true
     },
     "chalk": {
-      "version": "1.1.3",
+      "version": "2.4.2",
-      "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dev": true,
       "requires": {
-        "ansi-styles": "^2.2.1",
+        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.2",
+        "escape-string-regexp": "^1.0.5",
-        "has-ansi": "^2.0.0",
+        "supports-color": "^5.3.0"
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
       }
     },
     "chardet": {
@@ -3235,7 +3263,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -3248,7 +3276,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -3507,6 +3535,12 @@
         "postcss-modules-values": "1.3.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
         "has-flag": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
@@ -3522,6 +3556,29 @@
             "chalk": "^1.1.3",
             "source-map": "^0.5.6",
             "supports-color": "^3.2.3"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+              "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^2.2.1",
+                "escape-string-regexp": "^1.0.2",
+                "has-ansi": "^2.0.0",
+                "strip-ansi": "^3.0.0",
+                "supports-color": "^2.0.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "2.0.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                  "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+                  "dev": true
+                }
+              }
+            }
           }
         },
         "postcss-modules-extract-imports": {
@@ -4531,7 +4588,7 @@
       "dependencies": {
         "globby": {
           "version": "6.1.0",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
           "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
           "dev": true,
           "requires": {
@@ -4544,7 +4601,7 @@
           "dependencies": {
             "pify": {
               "version": "2.3.0",
-              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
               "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
               "dev": true
             }
@@ -4627,7 +4684,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -5049,7 +5106,7 @@
     },
     "events": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
       "dev": true
     },
@@ -5139,7 +5196,7 @@
     },
     "expand-range": {
       "version": "1.8.2",
-      "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
@@ -5745,8 +5802,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5767,14 +5823,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5789,20 +5843,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5919,8 +5970,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5932,7 +5982,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5947,7 +5996,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5955,14 +6003,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5981,7 +6027,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6062,8 +6107,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6075,7 +6119,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6161,8 +6204,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6198,7 +6240,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6218,7 +6259,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6262,14 +6302,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -7049,7 +7087,7 @@
     },
     "http-proxy-middleware": {
       "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
       "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
       "dev": true,
       "requires": {
@@ -7494,7 +7532,7 @@
     },
     "into-stream": {
       "version": "3.1.0",
-      "resolved": "http://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
       "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
       "dev": true,
       "requires": {
@@ -7724,7 +7762,7 @@
     },
     "is-generator-fn": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz",
       "integrity": "sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=",
       "dev": true
     },
@@ -10415,6 +10453,18 @@
         "through2": "^2.0.0",
         "vinyl": "^1.1.0",
         "vinyl-file": "^2.0.0"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "mem-fs-editor": {
@@ -10469,6 +10519,16 @@
           "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
           "dev": true
         },
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        },
         "vinyl": {
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.0.tgz",
@@ -10672,6 +10732,18 @@
         "pumpify": "^1.3.3",
         "stream-each": "^1.1.0",
         "through2": "^2.0.0"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+          "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~2.3.6",
+            "xtend": "~4.0.1"
+          }
+        }
       }
     },
     "mixin-deep": {
@@ -10760,7 +10832,7 @@
     },
     "multimatch": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
       "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=",
       "dev": true,
       "requires": {
@@ -10840,6 +10912,12 @@
       "integrity": "sha1-VfuN62mQcHB/tn+RpGDwRIKUx30=",
       "dev": true
     },
+    "node-fetch": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.3.0.tgz",
+      "integrity": "sha512-MOd8pV3fxENbryESLgVIeaGKrdl+uaYhCSSVkjeOb/31/njTpcis5aWfdqgNlHIrKOLRbMnfPINPOML2CIFeXA==",
+      "dev": true
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -10979,6 +11057,25 @@
             "uri-js": "^4.2.2"
           }
         },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
         "cross-spawn": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -11045,6 +11142,12 @@
             "uuid": "^3.3.2"
           }
         },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
         "tough-cookie": {
           "version": "2.4.3",
           "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
@@ -11086,7 +11189,7 @@
         },
         "strip-ansi": {
           "version": "0.1.1",
-          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz",
           "integrity": "sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE=",
           "dev": true
         }
@@ -11441,7 +11544,7 @@
     },
     "p-cancelable": {
       "version": "0.4.1",
-      "resolved": "http://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
       "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
       "dev": true
     },
@@ -11545,7 +11648,7 @@
     },
     "parse-asn1": {
       "version": "5.1.1",
-      "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
       "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
       "dev": true,
       "requires": {
@@ -11621,7 +11724,7 @@
     },
     "path-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
       "dev": true
     },
@@ -11759,7 +11862,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         }
@@ -12515,6 +12618,33 @@
         "chalk": "^1.1.1",
         "object.assign": "^4.0.1",
         "progress": "^1.1.8"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
       }
     },
     "promise-inflight": {
@@ -12927,7 +13057,7 @@
     },
     "regexpu-core": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
       "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
       "dev": true,
       "requires": {
@@ -13487,7 +13617,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -14004,7 +14134,7 @@
     },
     "stream-browserify": {
       "version": "2.0.1",
-      "resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
       "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=",
       "dev": true,
       "requires": {
@@ -14261,10 +14391,13 @@
       }
     },
     "supports-color": {
-      "version": "2.0.0",
+      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
     },
     "symbol-tree": {
       "version": "3.2.2",
@@ -14291,7 +14424,7 @@
     },
     "temp": {
       "version": "0.8.3",
-      "resolved": "http://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
       "integrity": "sha1-4Ma8TSa5AxJEEOT+2BEDAU38H1k=",
       "dev": true,
       "requires": {
@@ -14301,7 +14434,7 @@
       "dependencies": {
         "rimraf": {
           "version": "2.2.8",
-          "resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
           "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
           "dev": true
         }
@@ -14441,6 +14574,18 @@
             "pumpify": "^1.3.3",
             "stream-each": "^1.1.0",
             "through2": "^2.0.0"
+          },
+          "dependencies": {
+            "through2": {
+              "version": "2.0.5",
+              "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+              "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+              "dev": true,
+              "requires": {
+                "readable-stream": "~2.3.6",
+                "xtend": "~4.0.1"
+              }
+            }
           }
         },
         "p-limit": {
@@ -14646,16 +14791,6 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
-    "through2": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
-      "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "^2.1.5",
-        "xtend": "~4.0.1"
-      }
-    },
     "thunky": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz",
@@ -15040,7 +15175,7 @@
     },
     "tty-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
@@ -15352,7 +15487,7 @@
     },
     "underscore": {
       "version": "1.6.0",
-      "resolved": "http://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
       "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag=",
       "dev": true
     },
@@ -15694,7 +15829,7 @@
       "dependencies": {
         "pify": {
           "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
@@ -15702,7 +15837,7 @@
     },
     "vm-browserify": {
       "version": "0.0.4",
-      "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
       "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
       "dev": true,
       "requires": {
@@ -16708,7 +16843,7 @@
         },
         "globby": {
           "version": "8.0.1",
-          "resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
           "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
           "dev": true,
           "requires": {
@@ -16842,7 +16977,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },

package.json

@@ -7,7 +7,8 @@
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
     "build": "webpack -p",
     "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
-    "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
+    "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
+    "sizereport": "node config/size-report.js"
   },
   "husky": {
     "hooks": {
@@ -22,6 +23,7 @@
     "@webpack-cli/serve": "0.1.3",
     "assets-webpack-plugin": "3.9.7",
     "chokidar": "2.1.0",
+    "chalk": "^2.4.2",
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.1",
     "comlink": "3.1.1",
@@ -29,9 +31,11 @@
     "critters-webpack-plugin": "2.2.0",
     "css-loader": "1.0.1",
     "ejs": "2.6.1",
+    "escape-string-regexp": "^1.0.5",
     "exports-loader": "0.7.0",
     "file-drop-element": "0.0.9",
     "file-loader": "3.0.1",
+    "gzip-size": "^5.0.0",
     "html-webpack-plugin": "3.2.0",
     "husky": "1.3.1",
     "idb-keyval": "3.1.0",
@@ -39,6 +43,7 @@
     "loader-utils": "1.2.3",
     "mini-css-extract-plugin": "0.5.0",
     "minimatch": "3.0.4",
+    "node-fetch": "^2.3.0",
     "node-sass": "4.11.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pointer-tracker": "2.0.3",
@@ -47,6 +52,7 @@
     "pretty-bytes": "5.1.0",
     "progress-bar-webpack-plugin": "1.12.1",
     "raw-loader": "1.0.0",
+    "readdirp": "^2.2.1",
     "sass-loader": "7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "source-map-loader": "0.2.4",