2 years ago

In this tutorial we're going to learn how we can use a JavaScript library called https://www.npmjs.com/package/css-purge to MASSIVELY reduce the sizes of CSS files. The way it will reduce the CSS file by searching for all the used classes and ID's in your source code and remove any CSS that isn't used. For this tutorial I'm going to use Laravel mix to process the webpack building of the CSS file.

https://paulund.co.uk/reduce-css-file-size-with-css-purge#add-css-purge-webpack-plugin-to-mixAt the top of your Laravel webpack.mix.js file you need to include Purge CSS and Glob.

Now if we turn on purge CSS and re-run npm run prod we're now left with the following file sizes.