Create-react-app: Support for '--profile' option for webpack from react-scripts build

[jennifersmith]

We had a problem this week where we may have let our production dependencies get a bit out of control and the output from yarn build jumped up in file size as well as time-to-generate.

To diagnose what might have been at fault, I dug around for a bit and found a profile option for webpack. The resulting json I was able to visualise in webpack-analyse and webpack-bundle-analyzer and compare with earlier commits. The latter provided a fairly useful tree map that helped us work out what had happened.

However, to run this my only option was to eject, or to run with the webpack conf directly:

NODE_ENV=production ./node_modules/webpack/bin/webpack.js --config node_modules/react-scripts/config/webpack.config.prod.js --profile --json

I feel like it would be useful to have --profile options for webpack available from react-scripts. The stats produced feel like they would be useful even if you were not doing anything complicated with your webpack setup. I guess it could be similar to react-scripts test and how it passes through options to jest. Actually this was my first guess when I was seeing if it was supported

yarn build -- --profile --json
cheers

[Timer]

You can actually use https://www.npmjs.com/package/source-map-explorer without the need to eject.

[jennifersmith]

Yeah that actually might be a better option for us right now - thanks for the suggestion. I think I can get everything I need from source map analysis via source-map-explorer for our current issue. I guess there are times when you may want to profile webpack but maybe that's not as widely useful to consumers of the library. Happy to close if that makes sense.

[francescarpi]

Hi,

I think thats is important add --profile script. I prefer webpack-bundle-analyzer for analyze multiple bundles.

source-map-explorer doesn't support it, yet.

https://github.com/danvk/source-map-explorer/issues/25

Thanks!

[franklinjavier]

@jennifersmith I highly recommend the Bundle Buddy tool from @samccone

https://twitter.com/franklinjavier/status/931324987654443008?s=17

[gaearon]

Seems like the tools mentioned above are sufficient. Thanks for the issue though!

[stereobooster]

@gaearon not it is not enough. source-map-explorer is good starting point, but if you want to dig dipper you need more. For example, I'm trying to understand where dependencies come from source-map-explorer won't help with this. Bundle Buddy was useless for me, but they are working on improving it https://github.com/samccone/bundle-buddy/issues/29

[gaearon]

If you have specific suggestions on what to improve, let us know.

[moos]

⚠️ Be careful using the method in the first comment -- it actually re-generates the build files and may clobber them since it isn't run through react-scripts. (Found this the hard way as to why I was losing PUBLIC_URL in index.html in certain cases.)