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:
command = "react-scripts build"
publish = "build"
build = "esbuild"
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:
Where would I configure that in my Netlify project?
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.
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.
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.