Parcel: 🙋 Report of generated bundle size + breakdown of contents

[gregtillbrook]

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]

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

[devongovett]

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

[gregtillbrook]

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]

Here's a good place to start:

https://github.com/parcel-bundler/parcel/blob/8a65676023f88a53372ab4bf0b6daada49de6b49/src/Bundler.js#L140-L148

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.

https://github.com/parcel-bundler/parcel/blob/8a65676023f88a53372ab4bf0b6daada49de6b49/src/Logger.js#L76-L110

[totsteps]

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

[nnnikolay]

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

[gregtillbrook]

733 looks spot on 👍

Any chance v1.5.2 will be released soon? 😁

[lbguilherme]

@gregtillbrook Looks like it will be released this week.

[gregtillbrook]

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]

@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]

@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]

@gregtillbrook Perfect.

I'll fork and have a play as well.

[TimNZ]

@gregtillbrook https://github.com/parcel-bundler/parcel/issues/1030