perf: purgecss for css minification integrated into webpack build

intershop · Feb 19, 2021 · a2b507f · a2b507f · github-actions · Feb 19, 2021
1 parent c37f9d6
commit a2b507f
Show file tree

Hide file tree

Showing 7 changed files with 489 additions and 20 deletions.
diff --git a/Dockerfile b/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

diff --git a/Dockerfile_noSSR b/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

diff --git a/docs/guides/optimizations.md b/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 whitelisting certain classes, can be done on the plugin configuration.
 
 # Further References