Description
Summary
When you are using this plugin with a service like Netlify, you end up generating a lot more files to upload at each build, than you need to. Pages that don't change at all, but include <BgImage />-components will get a new hashed className on each rebuild. This will invalidate Netlifys cache and the file will be uploaded as a new one. This will on some scale be detrimental to build times and because of the cache-busting might even lead to worse page speed scores.
(And aren't we all after the perfect 100/100/100 with Gatsby? 🥇)
Basic example
This will be rendered by the component:
<div
class="arbitrary-class gbi-1355162470-9c1tdoNQuJjhFPBaGNHdzZ"
style="...some style"
>
{ ... some stuff }
</div>
on the next rebuild, the hash-value will change -> problem
I just added the "arbitrary-class" for demonstration purposes.
Motivation
- possibly better lighthouse scores
- definitely faster build times (depending on the scope/size of your project)
- more efficient caching
Possible Solution
I propose a prop/flag that lets you opt out of hashed classes. I know the reasons why the hash-value is there, but it currently generates some unwanted and detrimental behaviors. I guess if you're using this flag, you can get away with setting individual classNames for every instance of the component, but that's something that you need to be aware of. Maybe therefore name the prop something like "dangerouslyOptOutOfHashes" to remind yourself of setting a distinct className? 🤔