Reducing assets size is one of the most practical ways to speed up your web application. I have a simple use case, lets imagine your HTML file looks like this:
Now look at
Quite huge isn’t it? Thanks to Purgecss here is the CSS file after being purged will only contain parts of the CSS file (only used selectors), as you can see horizontal scrollbar is not very long:
Purgecss can be installed with npm package
npm i --save-dev purgecss
PurgeCSS can be used as a CLI. This is our project structure, we gonna need to transform CSS files so we have to download bootstrap distro and get file we want to transform.
Here is the syntax of CLI command:
purgecss --css <css file> --content <content file to parse css> --out <output-directory>
Since Purgecss is installed in
/node_modules we must run this command through npm script. We use
--out dist option to store output CSS files in
dist folder after transformed. Now change the path of
<link rel="stylesheet" href="./dist/bootstrap-grid.min.css" />
Then create npm script to run purgecss:
Then run npm run build, you should see new bootstrap-grid.min.css in dist folder with unused CSS content being removed
You can view full CLI options at https://www.purgecss.com/cli
Example repository: https://github.com/PhmNgocNghia/purge-css-demo-cli
Setup using Webpack
Purge CSS can be used together with built tools such as webpack, gulp, grunt,… etc. You can view it’s documentation at https://www.purgecss.com/
I’m going to demonstrate how to integrate with Webpack. This is my simple project which integrate project and Webpack:
In my index.js file, I simply import bootstrap grid CSS.
// Import CSS Grid min CSSimport 'bootstrap/dist/css/bootstrap-grid.min.css'
Here is the build output which includes CSS grid file
To use Purgecss with Webpack simply install this Webpack plugin:
npm i purgecss-webpack-plugin -D
Then add it to plugin section in Webpack config file:
Full example repository: https://github.com/PhmNgocNghia/purge-css-example-webpack
With Purgecss, our
bootstrap-grid.main.css file reduce from 47kb to 601byte. All unused selectors has been removed. You can view the documentation at https://www.purgecss.com/ which contain details instruction and api references.
Not only bootstrap, you can use Purgecss with many css libraries such as TailwindCSS, Zurb foundation,... etc.