-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Display JS and CSS bundle sizes after build #229
Display JS and CSS bundle sizes after build #229
Conversation
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks! |
@@ -9,6 +9,7 @@ | |||
|
|||
process.env.NODE_ENV = 'production'; | |||
|
|||
var filesize = require('filesize'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You want gzip-size
, actually.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was under the impression that the assets have already been gzipped, so I just needed to print out their filesizes? If that's not the case, does this mean we have to read every file to get their estimated gzipped size?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, I think I get it now. Gonna get some food and come back to this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using gzip-size now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also we probably still want filesize
for human readable file sizes.
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
function logBuildSize(assets, extension) { | ||
for (var i = 0; i < assets.length; i++) { | ||
var asset = assets[i]; | ||
if (asset['name'].endsWith(extension)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sup @lvwrence
nit: access the props using dot notation asset.name
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lol hey! what a coincidence seeing you here. done!
@@ -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'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would pass dot free extensions and prepend the dot in logBuildSize
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
a498252
to
52a8605
Compare
When you’re ready please update the screenshot, thanks! |
@gaearon Output looks like this now. Happy to change the formatting/color. |
Thanks! We can tweak minor visual details later. |
This aims to fix #228.
We grab the bundle info from webpack stats, check their extensions and print their names filesizes if they match '.js' or '.css'. This ends up looping over the bundle twice but I doubt we care about performance here.
What it looks like: