Document Tree
Document Properties
Kbid
B30833
Last Modified
20-Mar-2024
Added to KB
18-Apr-2023
Public Access
Everyone
Status
Online
Doc Type
Guidelines
Product
Intershop Progressive Web App
Guide - Intershop Progressive Web App - Optimizations

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.

Note

Brotli compression is typically only used over HTTPS connections. This is because most modern web browsers only advertise support for Brotli encoding to servers when the connection is secure (HTTPS).

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
Disclaimer
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.