Optimization for production

When you are building a website, you might decide to use a CSS framework like Thales Design System @qtm/css/dist/index.css or @qtm/css/dist/utilities.css which provides you a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS.

You will only use a small set of the framework, and a lot of unused CSS styles will be included. It is required to optimize your code in production.

This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your CSS files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your CSS, resulting in smaller CSS files.

Angular: Get the base setup running

As you probably know, the Angular CLI still uses Webpack under the hood.

To customize the build system, the angular-builders custom-webpack utility created/maintained by “JeB” Barabanov is recommended.

First of all, you need to install the following dependency:

npm install --save-dev @angular-builders/custom-webpack

Once done, you need to modify the angular.json file in your project in order to use the custom builders and provide the path to your custom Webpack configuration.

Replace the builder in your build section. "builder": "@angular-devkit/build-angular:browser" becomes "builder": "@angular-builders/custom-webpack:browser".

You can do (depending on your setup you need to) the same thing for all the other steps as well

• serve: "builder": "@angular-devkit/build-angular:dev-server" becomes "builder": "@angular-builders/custom-webpack:dev-server".
• extract-i18n (for localization): "builder": "@angular-devkit/build-angular:extract-i18n" becomes "builder": "@angular-builders/custom-webpack:extract-i18n".
• tests: "builder": "@angular-devkit/build-angular:karma" becomes "builder": "@angular-builders/custom-webpack:karma".

Inside your step section in the angular.json where you just adapted the builder, there is an options object that now supports a property called customWebpackConfig.

Add the path to your configuration. This could look something like this:

"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./extra-webpack.config.js"
            },
    // rest of the configuration

Create a file extra-webpack.config.js (works with TS files as well) with an empty configuration.

// extra-webpack.config.js
module.exports = {};

If your project worked previously with the angular-cli it now should still work. In the next section we cover how to setup a proper custom webpack configuration with purge css.

PurgeCSS with webpack

You can use either the Webpack plugin directly in your webpack configuration or use the PostCSS plugin when you are using the Webpack postCSS loader.

Install the purge css webpack plugin.

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

Modify your extra-webpack.config.js with the following configuration

// extra-webpack.config.js
const Purgecss = require('purgecss-webpack-plugin');

module.exports = {
  plugins: [
    new Purgecss({
      paths: glob.sync('./src/**/*.{html,ts,js}'),
    }),
  ],
};

Purge is now working 🎊 -> 11MB to 78ko 😄