DEV Community

loading...

๐Ÿ—œ How I purged 95% of unused CSS from my Gatsby website

Chandu J S
๐Ÿ’ป Full Stack Developer โ€ข Photographer โ€ข Freelancer ๐Ÿ‡ฎ๐Ÿ‡ณ Indian โ€ข Code โ€ข Music โ€ข Coffee โ˜•๏ธ
Originally published at chandujs.dev ใƒปUpdated on ใƒป1 min read

I was using bootstrap for a long time. The last project I used bootstrap is the website I made with Gatsby.

But most of the time, I use only the responsive classes in bootstrap. The bootstrap.css file itself is 152 kb in size. I had to find a way to remove unnecessary CSS from the code. I was using bootstrap from the first version of this website. I didn't want to change.

So, I used gatsby-plugin-purgecss to remove unnecessary CSS from the production build.

Build Screenshot

Even though this is NOT an install and forgets type plugin (mentioned in their documentation), for my website, adding to the gatsby-config.js file did a good job.

Discussion (6)

Collapse
calag4n profile image
calag4n

I tried a few times but it broke the style each time (even with some config though).

So... Remember to commit before ๐Ÿ˜„

But if that easily works on your project it's such a huge tool!

Collapse
ctrleffive profile image
Chandu J S Author

I'm using emotion for managing styles btw. ๐Ÿ˜ƒ

Collapse
calag4n profile image
calag4n

Great combo for sure ๐Ÿ‘

Collapse
irreverentmike profile image
Mike Bifulco

Was there anything special to the config you used, or was it just a simple resolve?

Collapse
ctrleffive profile image
Chandu J S Author

For me, adding to plugins array works just fine.

//[
//  },
      `gatsby-plugin-purgecss`,
//  {
//]

Check the file here

Collapse
waylonwalker profile image
Waylon Walker

Impressive, I haven't used that one yet, but will definitely have it in mind.