Create-react-app: Build size info

Created on 5 Oct 2016 · 5Comments · Source: facebook/create-react-app

Would it be useful to try and give a breakdown of the build size when you build? Sometimes I include a few libraries and the bundle size balloons out and I'm not too sure why, and with create-react-app wrapping webpack it's a bit cumbersome to run these tools eg webpack-bundle-size-analyzer.

Is it worth looking into some way of displaying this when npm run build is used, similar to how gzip size is shown now?

Source

tbillington

Most helpful comment

Seems source-map-explorer is a more accurate way of seeing built module size.

The data looks like this (from the visual tool).
source-map-explorer

tbillington on 5 Oct 2016

👍12

All 5 comments

Seems source-map-explorer is a more accurate way of seeing built module size.

The data looks like this (from the visual tool).
source-map-explorer

tbillington on 5 Oct 2016

👍12

Example build output

File sizes after gzip:

  134.87 KB  build/static/js/main.195ff791.js
  1.4 KB     build/static/css/main.3a26db49.css

Dependencies

  35% (50 KB)  immutable-js
  32% (30 KB)  moment-js
  21% (25 KB)  react-js
  ...

tbillington on 5 Oct 2016

I had also some similar proposal, see here #798.

themre on 5 Oct 2016

Ah, missed that. Seems analysing the js map wasn't mentioned though, it seems like a more accurate way of determining the sizes over the pre-webpack build sizes.

tbillington on 5 Oct 2016

@tbillington This sounds reasonable! I’ll close in favor of #798 but you are welcome to submit a pull request implementing what you suggested.