React-scripts build creates a huge CSS file from a small one

[JeffML]

It’s been awhile since I last fiddled with webpack, so I need some basic help on how/where to configure it. My netlify.toml contains:

[build]
  command = "react-scripts build"
  publish = "build"
  build = "esbuild"

[functions]
  directory = "netlify/functions"
  node_bundler = "esbuild"
  external_node_modules = ["express", "import-fresh"]

and my package.json has the lines:

    "build": "react-scripts build",
    "analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped --html ./temp/sme.html"

I have a dependency that contains a 2k symbols.css file. After running yarn build and `yarn analyze, the output shows symbols.css as over 541K:

I suspect it’s because webpack is byte-encoding image links into the CSS. It is suggested to limit the size of byte encoding using this webpack config setting:

{
  loader: 'url-loader',
  options: {
    limit: 8192
  }
}

Where would I configure that in my Netlify project?

[hrishikesh]

I’m not sure how this a Netlify issue. This would very likely happen even locally, at which point this is something to do with your setup than Netlify. If you think otherwise, let us know.

[JeffML]

I was hoping Netlify offered a way to configure react-scripts, through the .toml or something like that. After digging into this further, it appears that react-scripts is not very configurable, so you can close this issue.

[JeffML]

In case anyone runs across this again, back in 2019 the create-react-app team merged a change that checks the environment variable IMAGE_INLINE_SIZE_LIMIT for the threshold value that determines which image files are encoded inline (rather than by URL download).

If, say, IMAGE_INLINE_SIZE_LIMIT is set to 1000, then only images less that 1000 bytes will be Base64-encoded within the webpack bundle. The default is 10000 bytes.

You can set this up in Netlify assigning a local development environment variable, along with the other contexts.