Work with create react app's output

[siddharthkp]

Problem

As a create-react-app / nexstjs / gatsby user, you don't know the name of the build files ahead of time.

You can use bundlesize's glob matching to get files

[
  {
    // this will catch each file individually, not in total
    "path": "build/static/**/*.js",
    "maxSize": "50 kB"
  }
]

which matches an unknown number of files:

41.58 KB  build/static/js/1.238fbfd9.chunk.js
2.36 KB   build/static/js/main.4ba9e49b.chunk.js
1.53 KB   build/static/css/main.9663333b.chunk.css
763 B     build/static/js/runtime~main.229c360f.js

This can be fine tuned by a bundlesize config:

[
  {
    "path": "build/static/**/main*.js",
     "maxSize": "5 kB"
  },
  {
    "path": "build/static/**/*.chunk.js",
     "maxSize": "50 kB"
  }
]

Which is okay, but, there are two problems with this approach overall:

1. Based on tribal knowledge, you either know where to look or you don't. It's not obvious at all because you would ideally not need to look at the built files.

2. Depends on an implementation detail that can break across different versions of react-scripts

 

Possible solution:

One possible way to enable a better developer experience (DX) is to read the manifest file and pass those files from that to bundlesize. For create-react-app, that's build/asset-manifest.json.

You'll still need to ask for the maxSize but instead of globs, it can be in terms of main and chunk (or page1, page2 depending on the tool)

This probably should not be in the core, but instead in a plugin (see discussion about plugin system in <#placeholder>)

 

Note: Replace create-react-app with nextjs and you have another feature request