diff --git a/package.json b/package.json index 15eaec52374..0dbaf6a6012 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,9 @@ "opn": "4.0.2", "postcss-loader": "0.9.1", "promise": "7.1.1", + "recursive-readdir": "^2.0.0", "rimraf": "2.5.4", + "strip-ansi": "^3.0.1", "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": "1.13.1", diff --git a/scripts/build.js b/scripts/build.js index e57e040bd6e..be1f40e4a4d 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -18,79 +18,121 @@ var rimrafSync = require('rimraf').sync; var webpack = require('webpack'); var config = require('../config/webpack.config.prod'); var paths = require('../config/paths'); +var recursive = require('recursive-readdir'); +var stripAnsi = require('strip-ansi'); -// Remove all content but keep the directory so that -// if you're in it, you don't end up in Trash -rimrafSync(paths.appBuild + '/*'); +function removeFileNameHash(fileName) { + return fileName.replace(paths.appBuild, '') + .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, function(match, p1, p2, p3) { + return p1 + p3; + }); +} -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); +function sizeDifference(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 ''; } +} - console.log(chalk.green('Compiled successfully.')); - console.log(); +recursive(paths.appBuild, function (err, fileNames) { + fileNames = 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; + }, {} ); - 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); - var size = gzipSize(fileContents); - return { - folder: path.join('build', path.dirname(asset.name)), - name: path.basename(asset.name), - size: size, - sizeLabel: filesize(size) - }; - }); - assets.sort((a, b) => b.size - a.size); + // Remove all content but keep the directory so that + // if you're in it, you don't end up in Trash + rimrafSync(paths.appBuild + '/*'); + + build(previousSizeMap); +}); - var longestSizeLabelLength = Math.max.apply(null, - assets.map(a => a.sizeLabel.length) - ); - assets.forEach(asset => { - var sizeLabel = asset.sizeLabel; - if (sizeLabel.length < longestSizeLabelLength) { - var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLabel.length); - sizeLabel += rightPadding; +function build(previousSizeMap) { + 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(sizeLabel) + - ' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name) - ); - }); - console.log(); - var openCommand = process.platform === 'win32' ? 'start' : 'open'; - var homepagePath = require(paths.appPackageJson).homepage; - if (homepagePath) { - console.log('You can now publish them at ' + homepagePath + '.'); - console.log('For example, if you use GitHub Pages:'); + console.log(chalk.green('Compiled successfully.')); console.log(); - console.log(' git commit -am "Save local changes"'); - console.log(' git checkout -B gh-pages'); - console.log(' git add -f build'); - console.log(' git commit -am "Rebuild website"'); - console.log(' git filter-branch -f --prune-empty --subdirectory-filter build'); - console.log(' git push -f origin gh-pages'); - console.log(' git checkout -'); + + console.log('File sizes after gzip:'); console.log(); - } else { - console.log('You can now serve them with any static server.'); - console.log('For example:'); + 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 = sizeDifference(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) + ); + }); console.log(); - console.log(' npm install -g pushstate-server'); - console.log(' pushstate-server build'); - console.log(' ' + openCommand + ' http://localhost:9000'); + + var openCommand = process.platform === 'win32' ? 'start' : 'open'; + var homepagePath = require(paths.appPackageJson).homepage; + if (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"'); + console.log(' git checkout -B gh-pages'); + console.log(' git add -f build'); + console.log(' git commit -am "Rebuild website"'); + console.log(' git filter-branch -f --prune-empty --subdirectory-filter build'); + console.log(' git push -f origin gh-pages'); + console.log(' git checkout -'); + console.log(); + } else { + 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(); + console.log(chalk.dim('The project was built assuming it is hosted at the root.')); + console.log(chalk.dim('Set the "homepage" field in package.json to override this.')); + console.log(chalk.dim('For example, "homepage": "http://user.github.io/project".')); + } console.log(); - console.log(chalk.dim('The project was built assuming it is hosted at the root.')); - console.log(chalk.dim('Set the "homepage" field in package.json to override this.')); - console.log(chalk.dim('For example, "homepage": "http://user.github.io/project".')); - } - console.log(); -}); + }); +}