Remove unused CSS classes from frameworks like bootstrap in a react project

Question

We are currently developing a react project using webpack and babel and would like to have automatically removed unused CSS classes in the CSS frameworks Bootstrap and AdminLTE 2 which we use.

In the project we use webpack (v4.41.0), babel (v7.6.2) and react (16.10.1). To use CSS classes we are using the babel plugin babel-plugin-react-css-modules which uses css modules.

What is a modern and contemporary way to do this?

Answer 1

As djfdev already wrote purgecss works quite well: purgcss simply searches all JavaScript files for occurrences of the CSS class strings of the used CSS files and removes those which cannot be found.