perf: purgecss for css minification integrated into webpack build (#562)

Dockerfile

@@ -16,8 +16,6 @@ ARG serviceWorker
 RUN node schematics/customization/service-worker ${serviceWorker} || true
 COPY templates/webpack/* /workspace/templates/webpack/
 RUN npm run ng -- build -c ${configuration}
-COPY purgecss.config.js /workspace/
-RUN npm run postbuild
 # synchronize-marker:pwa-docker-build:end
 
 # ^ this part above is copied to Dockerfile_noSSR and should be kept in sync

Dockerfile_noSSR

@@ -16,8 +16,6 @@ ARG serviceWorker
 RUN node schematics/customization/service-worker ${serviceWorker} || true
 COPY templates/webpack/* /workspace/templates/webpack/
 RUN npm run ng -- build -c ${configuration}
-COPY purgecss.config.js /workspace/
-RUN npm run postbuild
 # synchronize-marker:pwa-docker-build:end
 
 # ^ this part above is copied from the standard Dockerfile and should be kept in sync

angular.json

@@ -72,8 +72,8 @@
                 },
                 {
                   "type": "initial",
-                  "maximumWarning": "3mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "4mb"
                 },
                 {
                   "type": "anyComponentStyle",

docs/guides/optimizations.md

@@ -26,11 +26,8 @@ If the PWA is built using `production` configuration. (Either by building with `
 - Angular CLI [build-optimizer](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_optimizer#angular-build-optimizer)
 - Webpack [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) is instructed to produce only `main`, `vendor`, `polyfills` and one `common` bundle for the code for optimized compression and download of the application.
 - All `data-testing` attributes are removed from the HTML templates to reduce output.
-
-## CSS Optimization
-
-On npm `postbuild`, we integrated [PurgeCSS](https://purgecss.com) to remove unused CSS classes from the CSS output.
-[Configuration](https://purgecss.com/configuration.html), especially whitelisting certain classes, can be done in [`purgecss.config.js`](../../purgecss.config.js).
+- [PurgeCSS](https://purgecss.com) is used to remove unused CSS classes from the CSS output.
+  [Configuration](https://purgecss.com/configuration.html), especially [safelisting](https://purgecss.com/safelisting.html) certain classes, can be done on the plugin configuration or directly in your CSS with a special comment.
 
 # Further References
 

package.json

@@ -38,7 +38,6 @@
     "synchronize-lazy-components": "ng g lazy-components",
     "build:watch": "ng build --aot --watch",
     "build": "node scripts/build-pwa",
-    "postbuild": "purgecss --config purgecss.config.js",
     "analyze": "ng build --prod --stats-json && npx webpack-bundle-analyzer --host 0.0.0.0 dist/browser/stats.json dist/browser",
     "serve": "node dist/server/main.js",
     "start": "npm-run-all build serve",
@@ -132,7 +131,7 @@
     "npm-run-all": "^4.1.5",
     "postinstall": "^0.7.0",
     "prettier": "^2.2.1",
-    "purgecss": "^4.0.0",
+    "purgecss-webpack-plugin": "^4.0.0",
     "rxjs-tslint-rules": "^4.34.7",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",

src/styles/pages/content-pages/page-content.scss

@@ -16,6 +16,7 @@ ol {
 
 // HELPDESK
 
+/* purgecss start ignore */
 .helpdesk-info-box {
   width: 100%;
   padding: $space-default/2;
@@ -33,6 +34,8 @@ ol {
   }
 }
 
+/* purgecss end ignore */
+
 // SITEMAP
 
 .sitemap-navigation {

templates/webpack/webpack.custom.ts

@@ -1,9 +1,12 @@
 import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';
 import { AngularCompilerPlugin } from '@ngtools/webpack';
 import { existsSync } from 'fs';
+import * as glob from 'glob';
 import { join, resolve } from 'path';
 import * as webpack from 'webpack';
 
+const purgecssPlugin = require('purgecss-webpack-plugin');
+
 const log = (...txt) => {
   // tslint:disable-next-line: no-console
   console.log('Custom Webpack:', ...txt);
@@ -68,6 +71,17 @@ export default (
       test: /\.html$/,
       use: [{ loader: join(__dirname, 'data-testing-id-loader.js') }],
     });
+
+    log('setting up purgecss CSS minification');
+    config.plugins.push(
+      new purgecssPlugin({
+        paths: glob.sync('./{src,projects}/**/*', { nodir: true }),
+        safelist: {
+          standard: [/(p|m)(l|r|x|y|t|b)?-[0-5]/],
+          greedy: [/\bfa\b/, /\bmodal\b/, /\bswiper\b/, /\bcarousel\b/, /\bslide\b/],
+        },
+      })
+    );
   }
 
   if (key) {