My team wrote a web application with create-react-app
and we want to keep the bundle size small for the initial page load. Right now we're just running gzip
and wc
on the outputted javascript files in build/
to get a sense of the size of the bundle overall (similar to the output of react-scripts build
), but that isn't granular enough to tell us the size of all the bundles that are required for an initial page load.
For now I'm planning to rely on parsing build/index.html
and finding which script tags refer to absolute paths (to avoid counting third party scripts) in order to identify which chunks are loaded on the initial page load, though I do wonder if it's possible for code to be loaded javascript-side that would be important for the initial paint. I don't think so but I also don't understand how CRA works enough to say that definitively.
My teammate also is thinking maybe we should just load the landing page in a headless browser and determine what scripts loaded on page load that way, though it'd be nice to have a lighter-weight way to do this check than that.
Thanks in advance!