From 2749026af3ff4ea082a0d0bb566169031ec78ca0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 28 Jul 2016 20:43:49 +0100
Subject: [PATCH] Make filesize stats prettier (#265)
---
scripts/build.js | 48 ++++++++++++++++++++++++++++++------------------
1 file changed, 30 insertions(+), 18 deletions(-)
diff --git a/scripts/build.js b/scripts/build.js
index 7642ce3f4..49231ffea 100644
--- a/scripts/build.js
+++ b/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,16 +23,7 @@ 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:');
@@ -38,11 +31,33 @@ webpack(config).run(function(err, stats) {
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();
});
--
GitLab