extract generic build functions to react-dev-utils (facebook#1726)

* Temp rename

* Rename to change the case

* extract generic build functions to react-dev-utils

* tweak package json files and move removeFileNameHash

* revert removeFileNameHash

* use paths.appBuild in printFileSizes

* use paths.appBuild in removeFileNameHash

* change curried functions to regular functions

* add fs-extra to react-dev-utils deps

* move getDifferenceLabel inside printFileSizes

* inline copyPublicFolder

* combine printFileSizes and removeFileNameHash to fileSizeReporter

* fix typo

* Tweak APIs and fix issues

* Fix heading

* Remove missing file

* Newline

* Newline

* Trailing space

* Update FileSizeReporter.js

* Update build.js

package.json

@@ -46,18 +46,14 @@
     "eslint-plugin-react": "6.4.1",
     "extract-text-webpack-plugin": "2.0.0",
     "file-loader": "0.10.0",
-    "filesize": "3.3.0",
     "fs-extra": "0.30.0",
-    "gzip-size": "3.0.0",
     "html-webpack-plugin": "2.28.0",
     "http-proxy-middleware": "0.17.3",
     "jest": "18.1.0",
     "object-assign": "4.1.1",
     "postcss-loader": "1.3.1",
     "promise": "7.1.1",
     "react-dev-utils": "^0.5.1",
-    "recursive-readdir": "2.1.1",
-    "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "2.2.1",

scripts/build.js

@@ -22,14 +22,13 @@ var chalk = require('chalk');
 var fs = require('fs-extra');
 var path = require('path');
 var url = require('url');
-var filesize = require('filesize');
-var gzipSize = require('gzip-size').sync;
 var webpack = require('webpack');
 var config = require('../config/webpack.config.prod');
 var paths = require('../config/paths');
 var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-var recursive = require('recursive-readdir');
-var stripAnsi = require('strip-ansi');
+var FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+var measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
+var printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 
 var useYarn = fs.existsSync(paths.yarnLockFile);
 
@@ -38,88 +37,20 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
-// Input: /User/dan/app/build/static/js/main.82be8.js
-// Output: /static/js/main.js
-function removeFileNameHash(fileName) {
-  return fileName
-    .replace(paths.appBuild, '')
-    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
-}
-
-// Input: 1024, 2048
-// Output: "(+1 KB)"
-function getDifferenceLabel(currentSize, previousSize) {
-  var FIFTY_KILOBYTES = 1024 * 50;
-  var difference = currentSize - previousSize;
-  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
-  if (difference >= FIFTY_KILOBYTES) {
-    return chalk.red('+' + fileSize);
-  } else if (difference < FIFTY_KILOBYTES && difference > 0) {
-    return chalk.yellow('+' + fileSize);
-  } else if (difference < 0) {
-    return chalk.green(fileSize);
-  } else {
-    return '';
-  }
-}
-
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
-recursive(paths.appBuild, (err, fileNames) => {
-  var previousSizeMap = (fileNames || [])
-    .filter(fileName => /\.(js|css)$/.test(fileName))
-    .reduce((memo, fileName) => {
-      var contents = fs.readFileSync(fileName);
-      var key = removeFileNameHash(fileName);
-      memo[key] = gzipSize(contents);
-      return memo;
-    }, {});
-
+measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
   // Remove all content but keep the directory so that
   // if you're in it, you don't end up in Trash
   fs.emptyDirSync(paths.appBuild);
 
   // Start the webpack build
-  build(previousSizeMap);
+  build(previousFileSizes);
 
   // Merge with the public folder
   copyPublicFolder();
 });
 
-// Print a detailed summary of build files.
-function printFileSizes(stats, previousSizeMap) {
-  var assets = stats.toJson().assets
-    .filter(asset => /\.(js|css)$/.test(asset.name))
-    .map(asset => {
-      var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
-      var size = gzipSize(fileContents);
-      var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
-      var difference = getDifferenceLabel(size, previousSize);
-      return {
-        folder: path.join('build', path.dirname(asset.name)),
-        name: path.basename(asset.name),
-        size: size,
-        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
-      };
-    });
-  assets.sort((a, b) => b.size - a.size);
-  var longestSizeLabelLength = Math.max.apply(null,
-    assets.map(a => stripAnsi(a.sizeLabel).length)
-  );
-  assets.forEach(asset => {
-    var sizeLabel = asset.sizeLabel;
-    var sizeLength = stripAnsi(sizeLabel).length;
-    if (sizeLength < longestSizeLabelLength) {
-      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
-      sizeLabel += rightPadding;
-    }
-    console.log(
-      '  ' + sizeLabel +
-      '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
-    );
-  });
-}
-
 // Print out errors
 function printErrors(summary, errors) {
   console.log(chalk.red(summary));
@@ -131,7 +62,7 @@ function printErrors(summary, errors) {
 }
 
 // Create the production build and print the deployment instructions.
-function build(previousSizeMap) {
+function build(previousFileSizes) {
   console.log('Creating an optimized production build...');
 
   var compiler;
@@ -163,7 +94,7 @@ function build(previousSizeMap) {
 
     console.log('File sizes after gzip:');
     console.log();
-    printFileSizes(stats, previousSizeMap);
+    printFileSizesAfterBuild(stats, previousFileSizes);
     console.log();
 
     var openCommand = process.platform === 'win32' ? 'start' : 'open';