Log bundle metrics #733

DeMoorJasper · 2018-02-02T16:00:09Z

Feature requested in closes #415

Minimal report (default behaviour)

Detailed report (cli flag --detailed-report)

codecov-io · 2018-02-02T16:28:57Z

Codecov Report

Merging #733 into master will increase coverage by 0.33%.
The diff coverage is 94.11%.

@@            Coverage Diff             @@
##           master     #733      +/-   ##
==========================================
+ Coverage    94.1%   94.43%   +0.33%     
==========================================
  Files          64       66       +2     
  Lines        2036     2103      +67     
==========================================
+ Hits         1916     1986      +70     
+ Misses        120      117       -3

Impacted Files	Coverage Δ
src/Bundler.js	`91.66% <100%> (+0.18%)`	⬆️
src/packagers/HTMLPackager.js	`97.43% <100%> (+0.06%)`	⬆️
src/Bundle.js	`98.94% <100%> (+0.09%)`	⬆️
src/packagers/SourceMapPackager.js	`100% <100%> (ø)`	⬆️
src/packagers/RawPackager.js	`92.3% <100%> (+0.64%)`	⬆️
src/utils/prettifyTime.js	`100% <100%> (ø)`
src/packagers/CSSPackager.js	`100% <100%> (ø)`	⬆️
src/utils/bundleReport.js	`91.48% <91.48%> (ø)`
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6d23efd...c83f611. Read the comment docs.

brandon93s · 2018-02-03T01:49:28Z

src/Bundle.js

@@ -18,6 +18,14 @@ class Bundle {
    this.siblingBundles = new Set();
    this.siblingBundlesMap = new Map();
    this.offsets = new Map();
+    this.startTime = new Date().getTime();


Possibly a micro-optimization, but Date.now() is historically faster.

I will change it, performance boosts are always a good thing

brandon93s · 2018-02-03T01:53:45Z

src/packagers/CSSPackager.js

@@ -23,6 +23,7 @@ class CSSPackager extends Packager {
    }

    await this.dest.write(css);
+    this.bundle.addAssetSize(asset, this.dest);


Any way for this to be in the base Packager without reading the file every time? Or maybe stat is efficient enough? Would be nice to not have to re-implement this for every Packager (and remember to do so in the future).

I can possibly move it to asset, but stat is an extra operation and it wouldn't keep in mind things like treeshaking and uglifying. So i guess this is the correct implementation, keeping in mind that some Packagers have a different way of writing files, for example sourcemap writes everything at the end and rawPackager copies the file (without a writestream)
I did my best to abstract it using bundle.addAssetSize

brandon93s · 2018-02-03T01:57:34Z

src/utils/bundleReport.js

+  return `${size.toFixed(2)} ${sizeTypes[type]}`;
+}
+
+function prettifyTime(time) {


Similar logic exists in Bundler.js and could be consolidated into a util:

parcel/src/Bundler.js

Lines 196 to 201 in 391e17f

let buildTime = Date.now() - startTime;

let time =

buildTime < 1000

? `${buildTime}ms`

: `${(buildTime / 1000).toFixed(2)}s`;

logger.status(emoji.success, `Built in ${time}.`, 'green');

Will change

brandon93s · 2018-02-03T02:01:35Z

src/utils/bundleReport.js

+    size = size / 1024;
+    type++;
+  }
+  return `${size.toFixed(2)} ${sizeTypes[type]}`;


While unlikely, you could overflow your array in which case you'd end up with 1.54 undefined. Should at least safe-guard against it and stop dividing by 1024.

Ow yeah, thought it wouldn't be an issue as a bundle larger than 1024 GB would be insane for a web application (or any other application)
But i've fixed it anyway

brandon93s · 2018-02-03T02:01:45Z

src/utils/bundleReport.js

@@ -0,0 +1,106 @@
+const path = require('path');
+const sizeTypes = ['B', 'KB', 'MB', 'GB'];


Should KB be kB?

It should be KB as it's 1024 not 1000
"1 KB" means 1024 bytes (as Windows would report it, traditional usage)
"1 kB" means 1000 bytes (as Mac OS would report it, IEC usage)
"1 KiB" means 1024 bytes (unambiguous, but perhaps unfamiliar terminology)

brandon93s · 2018-02-03T02:05:56Z

src/utils/bundleReport.js

+const path = require('path');
+const sizeTypes = ['B', 'KB', 'MB', 'GB'];
+
+function spaces(amount) {


Can use String.prototype.repeat() here:

function spaces(count) { return ' '.repeat(count); }

It also correctly returns an empty string for 0.

There is also String.prototype.padEnd() in Node 8+ which may simplify some code.

I'll use the repeat as babel didn't catch padEnd when i tried to build

brandon93s · 2018-02-03T02:10:26Z

Curious why the total time is so much greater (as a %) than the bundle time in both of the screenshots.

DeMoorJasper · 2018-02-03T09:57:17Z

@brandon93s the bigger time is because the total time in the metrics is the total processing time, basically the time it would've taken if ran on a single thread/worker.
The total build time or the time parcel runs is the perceived time, not the actual processing time.
So in theory the metrics total time would be near total bundle time * threads on large projects

lbguilherme · 2018-02-04T13:43:06Z

src/utils/bundleReport.js

@@ -0,0 +1,95 @@
+const path = require('path');
+const prettifyTime = require('./prettifyTime');
+const sizeTypes = ['B', 'KB', 'MB', 'GB'];


What about using KiB, MiB, GiB or changing the factor to 1000 instead of 1024, for correctness?

I'm not sure, the current implementation seems like the accurate notation, as it's being used by a lot of OS's (I've changed it anyway so that it is 100% correct)

I know that Windows uses the wrong KB notation, and that most Linux distros use KiB notation. Don't know about Mac, Android, iOS and others.
(nice!)

devongovett · 2018-02-04T19:17:23Z

Question: should we only do this on parcel build and not in development mode? Seems like bundle sizes aren't that useful in development, and will be wrong anyway since code isn't minified/optimized in dev mode anyway. Thoughts?

…e/logger-details

devongovett · 2018-02-14T05:59:03Z

Ok I ended up reworking this a bit to make it a bit prettier. Here's what it looks like:

When you want a detailed report it looks like this:

As you can see, it's clearer which items are bundles, and which items are assets within bundles. Bundles are bold, and assets are dimmed and indented. Plus it's colorful! Directory names are dimmed and filenames highlighted. 🎨

It will also warn when you have a large bundle size with a warning triangle and yellow text:

I moved the table rendering stuff to the logger class, and used the widely used filesize module to format file sizes. I also made it so each packager doesn't need to manually add each asset size - the bundler handles that as it is packaging. There is a default getSize function in the packager that returns the current output size of the file, and the base Packager implements the default version of this. Only RawPackager needed to override it.

Let me know what you think!

DeMoorJasper added 6 commits January 24, 2018 09:56

Merge branch 'master' of github.com:parcel-bundler/parcel

3722dba

Merge branch 'master' of github.com:parcel-bundler/parcel

272d7c8

Merge branch 'master' of github.com:parcel-bundler/parcel

ffd39f0

Merge branch 'master' of github.com:parcel-bundler/parcel

a9acaf9

done

c028cf2

tiny improvements

6c6b51f

brandon93s suggested changes Feb 3, 2018

View reviewed changes

Brandon's improvements

6489c50

lbguilherme reviewed Feb 4, 2018

View reviewed changes

DeMoorJasper and others added 10 commits February 4, 2018 21:24

correct size notation? bundle metrics only on build

8e319e6

Merge branch 'master' into feature/logger-details

c83f611

Merge branch 'master' of github.com:parcel-bundler/parcel into featur…

3fe35b4

…e/logger-details

Prettify bundle report

1dd8ce3

wip

2865ede

Clean up bundle report

c936743

Move asset size calculation out of each packager

d9c1f40

Clean up

d66bc1c

Clean up formatting

f9ed0ea

Fix tests

0752620

devongovett approved these changes Feb 14, 2018

View reviewed changes

devongovett merged commit 6deec80 into master Feb 14, 2018

devongovett deleted the feature/logger-details branch February 14, 2018 06:40

gregtillbrook mentioned this pull request Feb 14, 2018

🙋 Report of generated bundle size + breakdown of contents #415

Closed

davidnagli mentioned this pull request Mar 6, 2018

🐛 Bundle metrics showing incorrect time #949

Closed

devongovett pushed a commit that referenced this pull request Oct 15, 2018

Log bundle metrics (#733)

b4232e8

devongovett pushed a commit that referenced this pull request Oct 15, 2018

Log bundle metrics (#733)

b1a2b4a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Log bundle metrics #733

Log bundle metrics #733

DeMoorJasper commented Feb 2, 2018 •

edited

codecov-io commented Feb 2, 2018 •

edited

brandon93s Feb 3, 2018

DeMoorJasper Feb 3, 2018 •

edited

brandon93s Feb 3, 2018

DeMoorJasper Feb 3, 2018 •

edited

brandon93s Feb 3, 2018 •

edited

DeMoorJasper Feb 3, 2018

brandon93s Feb 3, 2018

DeMoorJasper Feb 3, 2018 •

edited

brandon93s Feb 3, 2018

DeMoorJasper Feb 3, 2018 •

edited

brandon93s Feb 3, 2018

DeMoorJasper Feb 3, 2018

brandon93s commented Feb 3, 2018

DeMoorJasper commented Feb 3, 2018 •

edited

lbguilherme Feb 4, 2018

DeMoorJasper Feb 4, 2018 •

edited

lbguilherme Feb 5, 2018

devongovett commented Feb 4, 2018

devongovett commented Feb 14, 2018

	let buildTime = Date.now() - startTime;
	let time =
	buildTime < 1000
	? `${buildTime}ms`
	: `${(buildTime / 1000).toFixed(2)}s`;
	logger.status(emoji.success, `Built in ${time}.`, 'green');

		@@ -0,0 +1,106 @@
		const path = require('path');
		const sizeTypes = ['B', 'KB', 'MB', 'GB'];

Log bundle metrics #733

Log bundle metrics #733

Conversation

DeMoorJasper commented Feb 2, 2018 • edited

codecov-io commented Feb 2, 2018 • edited

Codecov Report

Choose a reason for hiding this comment

DeMoorJasper Feb 3, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DeMoorJasper Feb 3, 2018 • edited

Choose a reason for hiding this comment

brandon93s Feb 3, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DeMoorJasper Feb 3, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DeMoorJasper Feb 3, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brandon93s commented Feb 3, 2018

DeMoorJasper commented Feb 3, 2018 • edited

Choose a reason for hiding this comment

DeMoorJasper Feb 4, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devongovett commented Feb 4, 2018

devongovett commented Feb 14, 2018

DeMoorJasper commented Feb 2, 2018 •

edited

codecov-io commented Feb 2, 2018 •

edited

DeMoorJasper Feb 3, 2018 •

edited

DeMoorJasper Feb 3, 2018 •

edited

brandon93s Feb 3, 2018 •

edited

DeMoorJasper Feb 3, 2018 •

edited

DeMoorJasper Feb 3, 2018 •

edited

DeMoorJasper commented Feb 3, 2018 •

edited

DeMoorJasper Feb 4, 2018 •

edited