Related Github Documents
Document Properties
Kbid
297A97
Last Modified
01-Nov-2022
Added to KB
18-Feb-2021
Public Access
Everyone
Status
Online
Doc Type
Guidelines, Concepts & Cookbooks
Product
Intershop Progressive Web App

Guide - Intershop Progressive Web App - Optimizations

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.

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.

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.

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 missing 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

Further References

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.

Customer Support
Knowledge Base
Product Resources
Tickets