Cleaning unused CSS with Purgecss and Laravel Mix

I’m always looking for easy wins to optimise my development workflow and improve the end user experience, so figured after hearing about Purgecss I’d look into it and see how I could integrate it into my work flow.

“Purgecss is a tool to remove unused CSS”

With frameworks like Bootstrap and Zurb providing so many CSS classes that often don’t get used, this looked like it really would be an easy win situation!

This week I deployed my first site over at Netlify for the new company I’m working at.

The site I’d been working on is written in Laravel and as it didn’t have a backend it was a great candidate for extracting it out to a static site. Converting a laravel app to a static site is now totally doable using the new Laravel Export package from the excellent folks over at Spatie. I figured this would also be a great candidate for trying out Purgecss.

First lets look at the processes already in place and the filesize being output.

As this is a Laravel app it makes sense that the project would use Laravel Mix for its asset bundling.

With an out of the box Laravel 5.8 config our webpack.mix.js file looks like this:

1
2
3
4

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

After building the site this config built assets of the following sizes in dev and production mode.

We’re not going to interested in the size of the JS file since we’d expect Purgecss to only impact the outputted CSS files.

Adding Purgecss to the site was even easier than I’d expected, the team at Spatie had built a plugin for laravel-mix.

1

yarn add -D laravel-mix-purgecss

Or if you use npm

1

npm install laravel-mix-purgecss --save-dev

Update webpack.mix.js to use the new plugin:

1
2
3
4
5
6

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss();

Re-running the build process gave us the following size for our CSS file:

The Purgecss plugin is only run during production builds but the size of the production file is tiny in comparison. 147kb down to 16.5kb.
That’s an 88.7% file size saving just from running one command and adding 2 lines of code.

I did find one problem with the outputted CSS, the cookie banner package we’d been using had a custom theme that wasn’t being detected and thus leaving our cookie banner unstyled.
So I had to make a minor change to the config and add a whitelist rule for the generated classes:

1
2
3
4
5
6

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
   .purgeCss({
        whitelistPatterns: [/Cookie--nx-theme$/],
        whitelistPatternsChildren: [/Cookie--nx-theme$/]
    });

The final CSS file generated was 22kb and after the browser gzipping the file only 5.18kb of data is actually sent down the wire.
Compared with the 24kb gzipped file that was being sent prior to using Purgecss.

Wait, the gzipped file being sent originally was bigger than the actual file after using Purgecss?

This really is an easy win!