webpack-bundle-analyzer for create-react-app

webpack-bundle-analyzer is awesome. If you never have used it, you will be surprised with weight of some of the libraries and their existence in the bundle.

But create-react-app comes without bundle-analyzer backed in and without ejecting (and we want to delay this moment as long as possible) there is no way to patch it in.

Or is it?

Turns out for this particular purpose we can patch create-react-app without ejecting. And it’s also very clean since it does not mess without your configuration.

You just need to create .js file (I use scripts folder for such things and file name is analyze.js) and add following code:

You (obviously) will need to install mentioned dependencies but if you are reading about analyzing webpack bundles I just guess you can figure it out.

Thats it; running node scripts/analyze.js will run production build of your application and run bundle-analyzer server for you:

Notes:

1. Please not that this script is using internal create-react-app files and api, no one going to guarantee that it will not break; tested as of react-scripts@2.1.4 ;
2. You obviously not limitied to using this particular plugin, this one is just my personal favorite;