Skip to content
GitLab
Commit cfc4325e authored by Elijah Manor's avatar Elijah Manor
Browse files

Display Build Size Difference

parent 884d5673
2 merge requests!340Display Build Size Difference,!353Add check-filename-webpack-plugin to warn on JSX file extension
Hide whitespace changes
Inline Side-by-side
Showing
with 101 additions and 64 deletions
+101 -64
package.json
+ 1
- 0
View file @ cfc4325e
...@@ -66,6 +66,7 @@ ...@@ -66,6 +66,7 @@
"opn": "4.0.2", "opn": "4.0.2",
"postcss-loader": "0.9.1", "postcss-loader": "0.9.1",
"promise": "7.1.1", "promise": "7.1.1",
"recursive-readdir": "^2.0.0",
"rimraf": "2.5.4", "rimraf": "2.5.4",
"style-loader": "0.13.1", "style-loader": "0.13.1",
"url-loader": "0.5.7", "url-loader": "0.5.7",
......
scripts/build.js
+ 100
- 64
View file @ cfc4325e
...@@ -18,79 +18,115 @@ var rimrafSync = require('rimraf').sync; ...@@ -18,79 +18,115 @@ var rimrafSync = require('rimraf').sync;
var webpack = require('webpack'); var webpack = require('webpack');
var config = require('../config/webpack.config.prod'); var config = require('../config/webpack.config.prod');
var paths = require('../config/paths'); var paths = require('../config/paths');
var recursive = require('recursive-readdir');
// Remove all content but keep the directory so that function removeFileNameHash(fileName) {
// if you're in it, you don't end up in Trash return fileName.replace(paths.appBuild, '')
rimrafSync(paths.appBuild + '/*'); .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, function(match, p1, p2, p3) {
return p1 + p3;
});
}
console.log('Creating an optimized production build...'); function sizeDifference(currentSize, previousSize) {
webpack(config).run(function(err, stats) { if (previousSize === undefined) { return ''; }
if (err) { var difference = currentSize - previousSize;
console.error('Failed to create a production build. Reason:'); var fileSize = filesize(difference);
console.error(err.message || err); if (difference > 0) {
process.exit(1); return chalk.red('+' + fileSize);
} else if (difference <= 0){
return chalk.green((difference === 0 ? '+' : '') + fileSize);
} }
}
console.log(chalk.green('Compiled successfully.')); recursive(paths.appBuild, function (err, fileNames) {
console.log(); 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:'); // Remove all content but keep the directory so that
console.log(); // if you're in it, you don't end up in Trash
var assets = stats.toJson().assets rimrafSync(paths.appBuild + '/*');
.filter(asset => /\.(js|css)$/.test(asset.name))
.map(asset => { build(previousSizeMap);
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);
var longestSizeLabelLength = Math.max.apply(null, function build(previousSizeMap) {
assets.map(a => a.sizeLabel.length) console.log('Creating an optimized production build...');
); webpack(config).run(function(err, stats) {
assets.forEach(asset => { if (err) {
var sizeLabel = asset.sizeLabel; console.error('Failed to create a production build. Reason:');
if (sizeLabel.length < longestSizeLabelLength) { console.error(err.message || err);
var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLabel.length); process.exit(1);
sizeLabel += rightPadding;
} }
console.log(
' ' + chalk.green(sizeLabel) +
' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
);
});
console.log();
var openCommand = process.platform === 'win32' ? 'start' : 'open'; console.log(chalk.green('Compiled successfully.'));
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();
console.log(' git commit -am "Save local changes"');
console.log(' git checkout -B gh-pages'); console.log('File sizes after gzip:');
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(); console.log();
} else { var assets = stats.toJson().assets
console.log('You can now serve them with any static server.'); .filter(asset => /\.(js|css)$/.test(asset.name))
console.log('For example:'); .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 => a.sizeLabel.length)
);
assets.forEach(asset => {
var sizeLabel = asset.sizeLabel;
if (sizeLabel.length < longestSizeLabelLength) {
var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLabel.length);
sizeLabel += rightPadding;
}
console.log(
' ' + chalk.yellow(sizeLabel) +
' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
);
});
console.log(); console.log();
console.log(' npm install -g pushstate-server');
console.log(' pushstate-server build'); var openCommand = process.platform === 'win32' ? 'start' : 'open';
console.log(' ' + openCommand + ' http://localhost:9000'); 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();
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();
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment