Display JS and CSS bundle sizes after build

Author: lvwrence

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-react": "5.2.2",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
+    "filesize": "^3.3.0",
     "fs-extra": "0.30.0",
     "html-webpack-plugin": "2.22.0",
     "json-loader": "0.5.4",

scripts/build.js

@@ -9,6 +9,7 @@
 
 process.env.NODE_ENV = 'production';
 
+var filesize = require('filesize');
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
 var config = require('../config/webpack.config.prod');
@@ -18,6 +19,15 @@ 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)) {
+      console.log('Size of ' + asset['name'] + ': ' + filesize(asset['size']));
+    }
+  }
+}
+
 webpack(config).run(function(err, stats) {
   if (err) {
     console.error('Failed to create a production build. Reason:');
@@ -48,6 +58,9 @@ webpack(config).run(function(err, stats) {
     console.log('  hs');
     console.log('  ' + openCommand + ' http://localhost:8080');
     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.');
 });