NGINX Optimizations

The NGINX building block applies:

• Compression of responses

ngx_brotli is used to compress files on NGINX because Brotli has a better compression ratio compared to gzip.
The configuration of the module is described in Guide - Building and Running NGINX.

Custom Webpack Build

The PWA uses a customized webpack build, that allows for additional optimizations.
The build can be customized in the file webpack.custom.ts.

If the PWA is built using production configuration (either by building with --configuration=<other>,production or by building the Docker image with --build-arg configuration=<other>,production), the following optimizations are applied:

• Angular CLI build-optimizer
• Webpack SplitChunksPlugin 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.
• PurgeCSS is used to remove unused CSS classes from the CSS output.

PurgeCSS

PurgeCSS is a tool to remove unused CSS. It can be part of your development workflow. When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc. But you will only use a small set of the framework, and a lot of unused CSS styles will be included.

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.

https://purgecss.com/introduction.html

While the described function for deleting unused CSS styles is very helpful, the mechanism for determining which styles are used is not without problems.
PurgeCSS can only analyze the strings in the actual source code of the project for used styles.

So, styles that get added to the rendered HTML by third-party libraries (e.g., Bootstrap, Swiper) would not be found.
The same applies for styles used in server-loaded content (e.g., CMS, product descriptions).
Also style selectors that are dynamically generated would not be found.

Safelisting

To solve this problem, PurgeCSS provides different options for safelisting specific styles.
This can either be done in the plugin configuration or directly in your SCSS/CSS files with special comments.

The PurgeCSS plugin configuration can be found in the project’s webpack.custom.ts.
This method is used and recommended to include required styles of the third-party libraries used, which would otherwise be purged.
For the different configuration options, refer to the PurgeCSS documentation.

To protect styles defined in the Intershop PWA project source code, Intershop recommends safelisting them directly in your SCSS/CSS with special comments.
To include nested SCSS definitions, use /* purgecss start ignore */ and /* purgecss end ignore */.

Development

When using the standard way of developing the PWA with ng s, PurgeCSS is not activated and styling should work as expected.
This way, styling issues because of PurgeCSS often first show up in deployed environments.
To test or develop with enabled PurgeCSS, the development server needs to be started with ng s -c=b2b,production (or your desired theme instead of b2b).

In this startup process the following line can be read, indicating the usage of PurgeCSS similar to the deployed builds:

serve@b2b,production: setting up purgecss CSS minification

• Guide - Building and Running NGINX Docker Image