diff --git a/docs/README.md b/docs/README.md index 79a03d23ff..ca419dfd7b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -66,6 +66,7 @@ kb_sync_latest_only - [Guide - Hybrid Approach and ICM URL Rewriting](./guides/hybrid-approach-icm-url-rewriting.md) - [Concept - Logging](./concepts/logging.md) - [Guide - CI](./guides/continuous-integration.md) +- [Guide - Optimizations](./guides/optimizations.md) ### Third-party Integrations diff --git a/docs/guides/optimizations.md b/docs/guides/optimizations.md new file mode 100644 index 0000000000..f4a8505852 --- /dev/null +++ b/docs/guides/optimizations.md @@ -0,0 +1,39 @@ + + +# Optimizations + +## Nginx Optimizations + +The Nginx building block applies: + +- Compression of responses +- PageSpeed optimization + +for further information, please refer to the [Guide - Building and Running nginx][nginx-startup]. + +## Custom Webpack Build + +The PWA uses a customized webpack build, that opens the doors to additional optimizations. +The build can be customized in the file [`webpack.custom.ts`](../../templates/webpack/webpack.custom.ts). + +If the PWA is built using `production` configuration. (Either by building with `--configuration=,production` or by building the docker image with `--build-arg configuration=,production`), the following optimizations are applied: + +- 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). + +# Further References + +- [Guide - Building and Running nginx Docker Image][nginx-startup] + +[nginx-startup]: ./nginx-startup.md