1

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!

osdiab
  • 1,972
  • 3
  • 26
  • 37
  • I wrote up this bash script that does the parsing of `build/index.html` quick and dirty: `grep -o ' – osdiab Jul 08 '19 at 18:59
  • You can just open chrome devtools and check in network tab, how much each javascript file size is and how long did it take to initial paint. – Tomas Bruckner Jul 08 '19 at 19:19
  • To clarify my use case is for an automated check in CI/tests that ensures that initial bundle hasn’t increased significantly between PRs. So opening up the devtools by hand isn’t really what I’m looking for. – osdiab Jul 09 '19 at 05:52

1 Answers1

1

Simply parsing html output won't work if your entry point contains lazy-loaded chunk (either using React.lazy or similar method).

With this PR you can analyze using the JSON output from webpack, by passing --stats to build script: yarn build --stats (if you use npm don't forget to use -- to forward flag to inner scripts: npm run build -- --stats)

This will create build/bundle-stats.json that you can directly import in nodejs script. It contains list of chunks outputted from webpack and its dependency graph

The only alternative I can think of is using puppeteer, but this is more suited for measuring user-specific metrics, like time to interactive. I'd suggest using simple node scripts for any build time measurement

pveyes
  • 413
  • 2
  • 12
  • I’ll give this a go later and see if I can find a way to tell which chunks are for individual pages (defined by react router). – osdiab Jul 09 '19 at 05:54