How to integrate PurgeCSS with Angular CLI project
This configuration works for me and giving me results from 126kb
to 34kb
on my styles.[hash].css
output for production build.
First, install this:
npm install -D @angular-builders/custom-webpack purgecss-webpack-plugin
Then, create webpack.config.js
in the root of the project:
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
module.exports = {
plugins: [
new PurgeCSSPlugin({ paths: glob.sync('./src/**/*.html', { nodir: true }) })
]
};
and edit your angular.json
configuration as follows:
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
My result without this plugin:
styles.ca3c7399cc89e60cfa2d.css | styles | 128.99 kB
And now with the purgecss-webpack-plugin
:
styles.ca3c7399cc89e60cfa2d.css | styles | 34.46 kB
Which is amazing, first when I saw this output I went checked my app in the browser and all styles have been included properly :-).
Only downside may be that this doesn't work on inlined html if any in angular components, I think.
I created this bash script to use PurgeCSS with my Angular app. It reduced my 'styles.css' file size from 63kb to only 3kb! Hope it works for you too.
Steps:
- create a new file named
purgecss.sh
inside your project folder - insert the code below into
purgecss.sh
file - run
./purgecss.sh
from CLI
#!/bin/bash
# run production build
ng build --prod --output-hashing none
# go to the dist/yourProjectName folder
cd ./dist/yourProjectName
# make a new directory named 'css' (you can name it anything)
mkdir css
# run PurgeCSS & make a new '.css' file inside the 'css' directory
purgecss --css ./styles.css --content ./index.html ./*.js --out ./css
# replace the 'dist/yourProjectName/styles.css' file with the 'dist/yourProjectName/css/styles.css' file
mv ./css/styles.css ./styles.css
# delete the previously created 'css' directory
rm -r css
There is another way which is more in line with Angular CLI and Webpack config:
You need to install
npm install -D @angular-builders/custom-webpack postcss-scss @fullhuman/postcss-purgecss
Then create a webpack.config.js
config file:
const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('autoprefixer'),
purgecss({
content: ['./**/*.html'],
// Example to let PurgeCss know how to exclude cdk and mat prefixes if your using Angular CDK and Angular Material
whitelistPatterns: [/^cdk-|mat-/]
})
]
}
}
]
}
};
Then change your angular.json
file to use this new configurations:
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
}
},
...
Make sure you run this configuration only in production mode, when you bundle the final application.
Hope this helps.
I created a post to explain how in detail - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02