Display gzip size of built assets

package.json

@@ -53,6 +53,7 @@
     "file-loader": "0.9.0",
     "filesize": "3.3.0",
     "glob": "7.1.0",
+    "gzip-size": "3.0.0",
     "inquirer": "1.2.1",
     "install": "0.8.1",
     "jest": "15.1.1",

utils/__tests__/printAssets.test.js

@@ -19,19 +19,29 @@ const assets = [{ name: 'main-1087ba4603e1150cbc80.js',
     chunkNames: ['main'],
     emitted: true }];
 
+const fs = {
+  readFileSync: jest.fn(),
+};
+
+const gzSize = {
+  sync: jest.fn().mockReturnValueOnce(200000).mockReturnValueOnce(60000),
+};
+
+jest.setMock('fs', fs);
+jest.setMock('gzip-size', gzSize);
 jest.mock('../../cli/logger');
 
 describe('printAssets', () => {
   const logger = require('../../cli/logger');
   require('../printAssets')({
     toJson: () => ({ assets }),
-  });
+  }, { output: { path: '' } });
 
   it('should print asset stats', () => {
     expect(logger.log)
-      .toBeCalledWith('    648.98 KB    build/public/main-1087ba4603e1150cbc80.js');
+      .toBeCalledWith('    648.98 KB    (195.31 KB gzip)    build/public/main-1087ba4603e1150cbc80.js');
 
     expect(logger.log)
-      .toBeCalledWith('    169.2 KB     build/public/main-9b8998c0b9922c283729.css');
+      .toBeCalledWith('    169.2 KB     (58.59 KB gzip)     build/public/main-9b8998c0b9922c283729.css');
   });
 });

utils/printAssets.js

@@ -1,33 +1,52 @@
 
 // Prints webpack asset stats
+const fs = require('fs');
 const path = require('path');
 const filesize = require('filesize');
+const gzipSize = require('gzip-size');
 const stripAnsi = require('strip-ansi');
 const logger = require('../cli/logger');
 
-module.exports = (stats) => {
+module.exports = (stats, clientConfig) => {
+  const assetPath = clientConfig.output.path;
   const assets = stats.toJson().assets
     .filter(asset => /\.(js|css)$/.test(asset.name))
-    .map(asset => ({
-      folder: path.join('build/public', path.dirname(asset.name)),
-      name: path.basename(asset.name),
-      size: asset.size,
-      sizeLabel: filesize(asset.size),
-    }));
+    .map((asset) => {
+      const file = fs.readFileSync(path.resolve(assetPath, asset.name));
+      const gzSize = gzipSize.sync(file);
+      return {
+        folder: path.join('build/public', path.dirname(asset.name)),
+        gzSize,
+        gzSizeLabel: `(${filesize(gzSize)} gzip)`,
+        name: path.basename(asset.name),
+        size: asset.size,
+        sizeLabel: filesize(asset.size),
+      };
+    });
 
   assets.sort((a, b) => b.size - a.size);
 
   const longestSizeLabelLength = Reflect.apply(Math.max, null,
     assets.map(a => stripAnsi(a.sizeLabel).length)
   );
 
-  assets.forEach((asset) => {
-    let sizeLabel = asset.sizeLabel;
-    const sizeLength = stripAnsi(sizeLabel).length;
-    if (sizeLength < longestSizeLabelLength) {
-      const rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
-      sizeLabel += rightPadding;
+  const longestGzSizeLabelLength = Reflect.apply(Math.max, null,
+    assets.map(a => stripAnsi(a.gzSizeLabel).length)
+  );
+
+  const addLabelPadding = (label, longestLength) => {
+    let padded = label;
+    const length = stripAnsi(label).length;
+    if (length < longestLength) {
+      const rightPadding = ' '.repeat(longestLength - length);
+      padded += rightPadding;
     }
-    logger.log(`    ${sizeLabel}    ${asset.folder + path.sep + asset.name}`);
+    return padded;
+  };
+
+  assets.forEach((asset) => {
+    const sizeLabel = addLabelPadding(asset.sizeLabel, longestSizeLabelLength);
+    const gzSizeLabel = addLabelPadding(asset.gzSizeLabel, longestGzSizeLabelLength);
+    logger.log(`    ${sizeLabel}    ${gzSizeLabel}    ${asset.folder + path.sep + asset.name}`);
   });
 };