Skip to content
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

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

Closed
gregtillbrook opened this issue Dec 27, 2017 · 13 comments · Fixed by #733
Closed

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

gregtillbrook opened this issue Dec 27, 2017 · 13 comments · Fixed by #733

Comments

@gregtillbrook
Copy link

gregtillbrook commented Dec 27, 2017

Hiya is it possible to get parcel build to output more info about final bundle size + a breakdown of modules that contributed to the bundles size?

@ssuman
Copy link
Contributor

ssuman commented Dec 28, 2017

I'll take this ! How about an option to generate the stats i.e. --stats ?

@devongovett
Copy link
Member

Seems like something we could print by default after a successful build.

@gregtillbrook
Copy link
Author

gregtillbrook commented Dec 29, 2017

A detailed report could be quite long so it may be useful to have a terse summary by default and a more detailed report behind a flag. e.g.

default output

Bundles created:
                        File Size        Time to generate (secs)
   index.js             123kB            3
   index.css            20kB             13
  ---------------------------------------------------
   Totals               143kB            16

For the detailed breakdown it'd be great to have something like the report that webpack-bundle-analyzer creates https://www.npmjs.com/package/webpack-bundle-analyzer (you could generate the tree data as a first step and other folks could hook in different visualisations later).

@jamiebuilds
Copy link
Member

Here's a good place to start:

parcel/src/Bundler.js

Lines 140 to 148 in 8a65676

// Build the queued assets, and produce a bundle tree.
let bundle = await this.buildQueuedAssets(isInitialBundle);
let buildTime = Date.now() - startTime;
let time =
buildTime < 1000
? `${buildTime}ms`
: `${(buildTime / 1000).toFixed(2)}s`;
this.logger.status(emoji.success, `Built in ${time}.`, 'green');

In watch mode you'll probably want to update some of the code in the logger to replace the lines everytime. Looking at it quickly I think it can only handle single line statuses.

parcel/src/Logger.js

Lines 76 to 110 in 8a65676

writeLine(line, msg) {
if (!this.color) {
return this.log(msg);
}
let n = this.lines - line;
let stdout = process.stdout;
readline.cursorTo(stdout, 0);
readline.moveCursor(stdout, 0, -n);
stdout.write(msg);
readline.clearLine(stdout, 1);
readline.cursorTo(stdout, 0);
readline.moveCursor(stdout, 0, n);
}
status(emoji, message, color = 'gray') {
if (this.logLevel < 3) {
return;
}
let hasStatusLine = this.statusLine != null;
if (!hasStatusLine) {
this.statusLine = this.lines;
}
this.writeLine(
this.statusLine,
this.chalk[color].bold(`${emoji} ${message}`)
);
if (!hasStatusLine) {
process.stdout.write('\n');
this.lines++;
}
}

@totsteps
Copy link
Contributor

totsteps commented Dec 30, 2017

I like the way bankai web compiler generates a report. Here's the code.

screenshot from 2017-12-30 18-38-40

@nnnikolay
Copy link

It would be really great to have a view like here webpack-bundle-analyzer

@gregtillbrook
Copy link
Author

gregtillbrook commented Feb 14, 2018

#733 looks spot on 👍

Any chance v1.5.2 will be released soon? 😁

@lbguilherme
Copy link
Contributor

@gregtillbrook Looks like it will be released this week.

@gregtillbrook
Copy link
Author

btw - I had a look through the report code and it gave me enough pointers to bosh together a bundle visualiser plugin POC in an evening - so thanks again 😄

https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser

@TimNZ
Copy link

TimNZ commented Mar 11, 2018

@gregtillbrook great work mate.

Even the visualisation of relative size has been very useful straight away for identifying things to refine.

I'm quite partial to stats webpack spits out, specifically module size and dependencies.
Keep us in the loop of what enhancements you are planning (maybe via Github Projects), as I'd been keen to contribute.

@gregtillbrook
Copy link
Author

@TimNZ Ive just released v1 which now includes some actual numbers on hover. To be honest Ive not got much in the way of future plans atm - just gunna see what feedback/requests I get.

@TimNZ
Copy link

TimNZ commented Mar 20, 2018

@gregtillbrook Perfect.

I'll fork and have a play as well.

@TimNZ
Copy link

TimNZ commented Mar 20, 2018

@gregtillbrook #1030

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants