React

Example

You can see an example here.

Created with create-react-app

This example shows how to set up PurgeCSS with create-react-app template. Once you initialized your project with npx create-react-app app, install the webpack plugin for PurgeCSS:

npm i --save-dev glob-all purgecss-webpack-plugin

Method 1 - Run PurgeCSS CLI in postbuild

Add the following code in package.json

"scripts": {
"postbuild": "purgecss --css build/static/css/*.css --content build/static/index.html build/static/js/*.js --out build/static/css"
},

Method 2 - eject create-react-app

You need to eject in order to expose the webpack configuration offered by original create-react-app

Now, modify the file config/webpack.prod.conf.js by adding the following code with the rest of the imports:

// import PurgeCSS webpack plugin and glob-all
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

...and directly before new ManifestPlugin(...) in the plugins list, add this:

// Remove unused css with PurgeCSS. See https://github.com/FullHuman/purgecss
// for more information about PurgeCSS.
// Specify the path of the html files and source files
new PurgecssPlugin({
paths: [paths.appHtml, ...glob.sync(`${paths.appSrc}/*`)]
}),

Results

This example is importing the bootstrap css framework. Without PurgeCSS, the base css file size is 138 kB. Using PurgeCSS, the base css file size is 4 kB