Purgecss
Github
Search
⌃K
Links
Comment on page

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.

Method 1 - Use craco

Custom PostCSS plugins (including PurgeCSS) can be added to Create React App apps using craco. Follow the craco installation instructions, then install the PurgeCSS PostCSS plugin and add it to the craco config:
npm i --save-dev @fullhuman/postcss-purgecss
// craco.config.js
const purgecss = require('@fullhuman/postcss-purgecss');
​
module.exports = {
style: {
postcss: {
plugins: [
purgecss({
content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
}),
],
},
},
};

Method 2 - 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 3 - eject create-react-app

You need to eject in order to expose the webpack configuration offered by original create-react-app
Install the webpack plugin for PurgeCSS:
npm i --save-dev glob-all purgecss-webpack-plugin
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
Previous
Guides
Next
Vue
Last modified 4yr ago