Improve readability of asset-size printer and include Brotli sizes

lib/models/asset-size-printer.js

@@ -5,46 +5,48 @@ const path = require('path');
 const walkSync = require('walk-sync');
 const workerpool = require('workerpool');
 
-module.exports = class AssetPrinterSize {
+module.exports = class AssetSizePrinter {
   constructor(options) {
-    Object.assign(this, options);
+    this.outputPath = options.outputPath;
+    this.ui = options.ui;
   }
 
-  print() {
-    const { filesize } = require('filesize');
-    let ui = this.ui;
+  async print() {
+    let files = await this.makeAssetSizesObject();
 
-    return this.makeAssetSizesObject().then((files) => {
-      if (files.length !== 0) {
-        ui.writeLine(chalk.green('File sizes:'));
-        return files.forEach((file) => {
-          let sizeOutput = filesize(file.size);
-          if (file.showGzipped) {
-            sizeOutput += ` (${filesize(file.gzipSize)} gzipped)`;
-          }
+    if (files.length !== 0) {
+      const { filesize } = require('filesize');
+      const { table } = require('table');
 
-          ui.writeLine(chalk.blue(` - ${file.name}: `) + sizeOutput);
+      let tableHeaders = ['File', 'Size', 'Size (Gzip)', 'Size (Brotli)'];
+      let tableData = [tableHeaders.map((header) => chalk.bold(header))];
+
+      files
+        .sort((a, b) => (a.size > b.size ? -1 : 1))
+        .forEach((file) => {
+          tableData.push([
+            chalk.green(file.name),
+            filesize(file.size),
+            file.size ? filesize(file.gzipSize) : '/',
+            file.size ? filesize(file.brotliSize) : '/',
+          ]);
         });
-      } else {
-        ui.writeLine(chalk.red(`No asset files found in the path provided: ${this.outputPath}`));
-      }
-    });
+
+      this.ui.writeLine('File sizes:');
+      this.ui.write(table(tableData));
+    } else {
+      this.ui.writeLine(chalk.red(`No asset files found in the provided path: ${this.outputPath}`));
+    }
   }
 
-  printJSON() {
-    let ui = this.ui;
-    return this.makeAssetSizesObject().then((files) => {
-      if (files.length !== 0) {
-        let entries = files.map((file) => ({
-          name: file.name,
-          size: file.size,
-          gzipSize: file.gzipSize,
-        }));
-        ui.writeLine(JSON.stringify({ files: entries }));
-      } else {
-        ui.writeLine(chalk.red(`No asset files found in the path provided: ${this.outputPath}`));
-      }
-    });
+  async printJSON() {
+    let files = await this.makeAssetSizesObject();
+
+    if (files.length !== 0) {
+      this.ui.writeLine(JSON.stringify({ files }));
+    } else {
+      this.ui.writeLine(chalk.red(`No asset files found in the provided path: ${this.outputPath}`));
+    }
   }
 
   async makeAssetSizesObject() {
@@ -83,7 +85,7 @@ module.exports = class AssetPrinterSize {
         .map((x) => path.join(outputPath, x));
     } catch (e) {
       if (e !== null && typeof e === 'object' && e.code === 'ENOENT') {
-        throw new Error(`No asset files found in the path provided: ${outputPath}`);
+        throw new Error(`No asset files found in the provided path: ${outputPath}`);
       } else {
         throw e;
       }

lib/models/gzip-stats.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const fs = require('fs');
+const zlib = require('zlib');
+
+module.exports = function (file) {
+  let contentsBuffer = fs.readFileSync(file);
+
+  return {
+    brotliSize: zlib.brotliCompressSync(contentsBuffer).length,
+    gzipSize: zlib.gzipSync(contentsBuffer).length,
+    name: file,
+    size: contentsBuffer.length,
+  };
+};

lib/models/worker.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const workerpool = require('workerpool');
-const gzipStats = require('./gzipStats');
+const gzipStats = require('./gzip-stats');
 
 // create worker and register public functions
 workerpool.worker({

package.json

@@ -122,6 +122,7 @@
     "silent-error": "^1.1.1",
     "sort-package-json": "^1.57.0",
     "symlink-or-copy": "^1.3.1",
+    "table": "^6.8.0",
     "temp": "0.9.4",
     "testem": "^3.9.0",
     "tiny-lr": "^2.0.0",

tests/unit/models/asset-size-printer-test.js

@@ -60,12 +60,10 @@ describe('models/asset-size-printer', function () {
     await sizePrinter.print();
 
     expect(sizePrinter.ui.output).to.include('File sizes:');
-    expect(sizePrinter.ui.output).to.include('some-project.css: ');
-    expect(sizePrinter.ui.output).to.include('some-project.js: ');
-    expect(sizePrinter.ui.output).to.include('24 B');
-    expect(sizePrinter.ui.output).to.include('32 B');
-    expect(sizePrinter.ui.output).to.include('(44 B gzipped)');
-    expect(sizePrinter.ui.output).to.include('(52 B gzipped)');
+    expect(sizePrinter.ui.output).to.include('some-project.css');
+    expect(sizePrinter.ui.output).to.include('some-project.js');
+    expect(sizePrinter.ui.output).to.include('24 B │ 44 B        │ 22 B');
+    expect(sizePrinter.ui.output).to.include('32 B │ 52 B        │ 24 B');
   });
 
   it('does not print gzipped file sizes of empty files', async function () {
@@ -75,7 +73,8 @@ describe('models/asset-size-printer', function () {
     });
 
     await sizePrinter.print();
-    expect(sizePrinter.ui.output).to.not.include('0 B gzipped)');
+
+    expect(sizePrinter.ui.output).to.include('0 B  │ /           │ /');
   });
 
   it('does not print project test helper file sizes', async function () {
@@ -119,7 +118,7 @@ describe('models/asset-size-printer', function () {
     expect(output.files[1].name).to.include('nested-asset.js');
     expect(output.files[1].size).to.equal(32);
     expect(output.files[1].gzipSize).to.equal(52);
-    expect(output.files[0]).to.not.have.property('showGzipped');
+    expect(output.files[1].brotliSize).to.equal(24);
   });
 
   it('creates an array of asset objects', async function () {
@@ -133,7 +132,7 @@ describe('models/asset-size-printer', function () {
 
     assetObjectKeys = Object.keys(assetObject[0]);
 
-    expect(assetObjectKeys).to.deep.equal(['name', 'size', 'gzipSize', 'showGzipped']);
+    expect(assetObjectKeys).to.deep.equal(['brotliSize', 'gzipSize', 'name', 'size']);
     expect(assetObject[0].name).to.include('nested-asset.css');
     expect(assetObject[1].name).to.include('nested-asset.js');
     expect(assetObject[2].name).to.include('empty.js');
@@ -151,7 +150,7 @@ describe('models/asset-size-printer', function () {
 
     return expect(sizePrinter.print()).to.be.rejectedWith(
       Error,
-      `No asset files found in the path provided: ${outputPath}`
+      `No asset files found in the provided path: ${outputPath}`
     );
   });
 });

yarn.lock

@@ -890,6 +890,16 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.0.1:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 amd-name-resolver@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/amd-name-resolver/-/amd-name-resolver-1.3.1.tgz#ffe71c683c6e7191fc4ae1bb3aaed15abea135d9"
@@ -1136,6 +1146,11 @@ ast-types@^0.13.2:
   dependencies:
     tslib "^2.0.1"
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-disk-cache@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/async-disk-cache/-/async-disk-cache-1.3.5.tgz#cc6206ed79bb6982b878fc52e0505e4f52b62a02"
@@ -5528,6 +5543,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@@ -5880,6 +5900,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+
 lodash.uniq@^4.2.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7563,6 +7588,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -7990,6 +8020,15 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 smart-buffer@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
@@ -8443,6 +8482,17 @@ sync-disk-cache@^1.3.3:
     rimraf "^2.2.8"
     username-sync "^1.0.2"
 
+table@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
+  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
 tap-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/tap-parser/-/tap-parser-7.0.0.tgz#54db35302fda2c2ccc21954ad3be22b2cba42721"