Remove unused CSS styles from Bootstrap using PurgeCSS (ok)

https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772

LogoCLI | PurgeCSSpurgecss.com
LogoWordPress | PurgeCSSpurgecss.com
LogoPurgeCSS 2.0 Introduction: Remove Unused CSS From Your Project | HackerNoonhackernoon

https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/

https://discourse.roots.io/t/removing-unused-css-with-purgecss-uncss/11586

https://jeffochoa.me/whitelist-selectors-on-purgecss

Một ví dụ thành công :)

C:\xampp\htdocs\abc\package.json

C:\xampp\htdocs\abc\index.html

C:\xampp\htdocs\abc\bootstrap-grid.min.css

Sau kh tối ưu :)

C:\xampp\htdocs\abc\dist\bootstrap-grid.min.css

Remove unused CSS styles from Bootstrap using PurgeCSS

Nghia PhamNghia PhamFollowFeb 1, 2019 · 3 min readImage for postImage for postYou just want to bootstrap grid. eg: col-12 col-10md… But you have a bunch of unused CSS grid classes in your CSS file

Introduction

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:Your HTML file

Now look at bootstrap-grid.min.css:Image for postImage for post

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:Image for postImage for post

Usage

Purgecss can be installed with npm packagenpm i --save-dev purgecss

Basically, you run it against your CSS files and your HTML/JavaScript files. It will parse and analyze which CSS content will be used and remove unused CSS content.

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.Image for postImage for postProject Structure

Here is the syntax of CLI command:

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 bootstrap-grid.min.css in index.html to:

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 removedImage for postImage for postContents of CSS file after removed unused CSS classesImage for postImage for postFile size decrease from 48kb to 651bytes. Amazing

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:My project webpack config

In my index.js file, I simply import bootstrap grid CSS.

Here is the build output which includes CSS grid fileImage for postImage for postCSS File took up to 47.3 kb

To use Purgecss with Webpack simply install this Webpack plugin:

Then add it to plugin section in Webpack config file:Image for postImage for postmain.css file after being optimized is must smaller thanks to purgecss

Full example repository: https://github.com/PhmNgocNghia/purge-css-example-webpack

Conclusion

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.

PreviousPurifyCSS OnlineRemove unused CSS code from your stylesheets (ok)NextThêm column, media bootstrap, custom bootstrap (ok)

Last updated

Was this helpful?