With all that at play, how can any tool give us a truly accurate picture of unused CSS, to the point that actually removing that CSS isn’t just as dangerous as leaving it alone?
So, I said:
And yet, I don’t think these tools are useless — they are just…tools. Their use can actually be a positive step toward better code. Their use says OK, I admit it, I’m a little afraid our CSS. You could use this tool to get a broad picture of what your unused CSS might be, then combine that with your own knowledge of your CSS code base to make more informed decisions.
I stand by that, and it’s worth pointing out some successful use cases.
Sarah Dayan just wrote How I dropped 250KB of dead CSS weight with PurgeCSS. She was using Tailwind CSS, an atomic CSS library that a lot of people have had success with.
In my case, not only did I load the entire Tailwind CSS library, but I also added several variants to some modules. That ended up making the final minified CSS file weight 259 KB (before GZip).
PurgeCSS can’t detect that I need to keep selectors such as
.ais-Highlight, because the components that use it only show up in the DOM at runtime.
So she split off some of that CSS and updated the configuration. Then…
With this new configuration, my final CSS file has gone from 259 KB to…9 KB!
I love it. Using the tool, being super aware of what is happening on your site, and making final choices for a combined win.
Tree shaking is a form of dead code elimination.