Make filesize stats prettier (#265)

Author: gaearon

scripts/build.js

@@ -9,9 +9,11 @@
 
 process.env.NODE_ENV = 'production';
 
+var chalk = require('chalk');
 var fs = require('fs');
+var path = require('path');
 var filesize = require('filesize');
-var gzipSize = require('gzip-size');
+var gzipSize = require('gzip-size').sync;
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
 var config = require('../config/webpack.config.prod');
@@ -21,28 +23,41 @@ var paths = require('../config/paths');
 // if you're in it, you don't end up in Trash
 rimrafSync(paths.appBuild + '/*');
 
-function logBuildSize(assets, extension) {
-  for (var i = 0; i < assets.length; i++) {
-    var asset = assets[i];
-    if (asset.name.endsWith('.' + extension)) {
-      var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
-      console.log('Size (gzipped) of ' + asset.name + ': ' + filesize(gzipSize.sync(fileContents)));
-    }
-  }
-}
-
+console.log('Creating an optimized production build...');
 webpack(config).run(function(err, stats) {
   if (err) {
     console.error('Failed to create a production build. Reason:');
     console.error(err.message || err);
     process.exit(1);
   }
 
+  console.log(chalk.green('Compiled successfully.'));
+  console.log();
+
+  console.log('File sizes after gzip:');
+  console.log();
+  var assets = stats.toJson().assets
+    .filter(asset => /\.(js|css)$/.test(asset.name))
+    .map(asset => {
+      var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
+      return {
+        name: asset.name,
+        size: gzipSize(fileContents)
+      };
+    });
+  assets.sort((a, b) => b.size - a.size);
+  assets.forEach(asset => {
+    console.log(
+      '  ' + chalk.dim('build' + path.sep) + chalk.cyan(asset.name) + ': ' +
+      chalk.green(filesize(asset.size))
+    );
+  });
+  console.log();
+
   var openCommand = process.platform === 'win32' ? 'start' : 'open';
   var homepagePath = require(paths.appPackageJson).homepage;
-  console.log('Successfully generated a bundle in the build folder!');
   if (homepagePath) {
-    console.log('You can now deploy it to ' + homepagePath + '.');
+    console.log('You can now publish them at ' + homepagePath + '.');
     console.log('For example, if you use GitHub Pages:');
     console.log();
     console.log('  git commit -am "Save local changes"');
@@ -54,16 +69,13 @@ webpack(config).run(function(err, stats) {
     console.log('  git checkout -');
     console.log();
   } else {
-    console.log('You can now serve it with any static server.');
+    console.log('You can now serve them with any static server.');
     console.log('For example:');
     console.log();
     console.log('  npm install -g pushstate-server');
     console.log('  pushstate-server build');
     console.log('  ' + openCommand + ' http://localhost:9000');
     console.log();
-    var assets = stats.toJson()['assets'];
-    logBuildSize(assets, 'js');
-    logBuildSize(assets, 'css');
   }
-  console.log('The bundle is optimized and ready to be deployed to production.');
+  console.log();
 });