Add step to generate stats.json file

[colingalindo]

• Added a step in the production build to generate a stats.json file
  in the build directory
• To test I ran npm run create-react-app my-app went in to the
  my-app directory and ran npm run build and verified the stats.json
  file was output.
  Add some analyze script for npm packages #798

[gaearon]

Is there any different in build time because of this?

[colingalindo]

Any suggestions for checking the build times?

[gaearon]

time npm run build

[gaearon]

(Run it several times to get a better sample, both with and without the change.)

[colingalindo]

I ran time npm run build 10 times both with and without the changes and here are the averages.

Without:

real	0m6.7996s
user 0m6.6376s
sys	0m0.4406s

With:

real	0m6.6578s
user	0m6.477s
sys	0m0.4398s

And here is all the times.

Without:

real 0m6.467s
user 0m6.329s
sys 0m0.406s

real 0m6.729s
user 0m6.566s
sys 0m0.443s

real 0m6.807s
user 0m6.682s
sys 0m0.444s

real 0m6.775s
user 0m6.615s
sys 0m0.444s

real 0m6.960s
user 0m6.800s
sys 0m0.444s

real 0m6.754s
user 0m6.576s
sys 0m0.438s

real 0m6.891s
user 0m6.722s
sys 0m0.442s

real 0m6.854s
user 0m6.703s
sys 0m0.439s

real 0m6.980s
user 0m6.788s
sys 0m0.461s

real 0m6.779s
user 0m6.595s
sys 0m0.445s

With:

real 0m6.729s
user 0m6.498s
sys 0m0.468s

real 0m6.732s
user 0m6.576s
sys 0m0.436s

real 0m6.415s
user 0m6.261s
sys 0m0.416s

real 0m6.511s
user 0m6.308s
sys 0m0.425s

real 0m6.447s
user 0m6.265s
sys 0m0.434s

real 0m6.467s
user 0m6.302s
sys 0m0.417s

real 0m6.868s
user 0m6.685s
sys 0m0.453s

real 0m6.553s
user 0m6.422s
sys 0m0.432s

real 0m6.896s
user 0m6.733s
sys 0m0.449s

real 0m6.960s
user 0m6.720s
sys 0m0.468s

[Timer]

I know concerns have been expressed before of switching away from webpack (I know it's probably unlikely), but I think it's worth noting that we're exporting something specific to webpack which may result in a breaking change in the future.

I'd be more interested in learning what people believe is valuable about the build stats and implementing them ourselves in a standardized create-react-app format.

[gaearon]

I'm not very concerned about being webpack-specific since this is an extra bonus and not a vital part. If you want to analyze the bundle, it might as well be bundler-specific, and you might want to switch the analyzer tool if we switch the bundler.

However I'm more concerned about Webpack stats being misleading about the source size because (AFAIK) they count modules before minification. Other insights it provides (like prefetching opportunities during compilation) are useless without access to the config anyway.

AFAIK source-map-explorer is a more reliable (and bundler independent) analyzer, and maybe we should promote / integrate it instead. It doesn't need a special file either.

[colingalindo]

@gaearon I can implement source-map-explorer instead in this PR.

[gaearon]

How do you imagine the integration?

[colingalindo]

I came up with a couple implementations. Either just add some documentation to the README to let people know to add source-map-explorer to analyze the bundles, add a new script in react-scripts called analyze that could run the command to analyze the bundle, or just add something like "analyze": "source-map-explorer build/static/js/main.* " to the init.js scripts section

[gaearon]

Either just add some documentation to the README to let people know to add source-map-explorer to analyze the bundles

Let's start with this. Want to send a PR?

[colingalindo]

Ok I will do that.

[gaearon]

Closing this one for now then.