[Discussion] Reduce Angular style size (using PurgeCSS to remove unused styles) — DEV Community (2024)

David Dal Busco

• Jan 20 '21

Swaminathan

• Apr 23 '21

Many thanks, Dylan! It worked. 👍

In angular material, color="primary" changed to mat-primary in runtime. Post-build (PurgeCss), All the mat classes are removed from styles.css which are not used in any of the HTML/js files.

Alain Boudard

• Mar 29 '22

Hello all, just a quick note about some css frameworks, they often use the 2 dots notation : for handling media queries, and this kind of notation doesn't work out of the box with purgecss, as stated here : purgecss.com/extractors.html

So we need to use specific extractors, like so :

defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],

Rui

• Mar 21 '21

Zaki Mohammed

• Jan 29 '23

Wonderful article, I have tried all the steps and it actually worked with significant difference in the file size.

But as you mentioned it's not that straightforward with complicated UI packages. I have tried with Kendo UI for Angular, and the results were not appealing, in some places it removed the actual Kendo CSS those were needed and broken the UI.

I have tried with Purge CSS's safelist solution too but if I add the Keno CSS then the size of the bundle results to be almost same size of the original one.

So, we have to be very sure this work with third party packages properly or not. I am thinking to park this approach for now will do some more experimenting later. Anyways nice read though and very well explained the problem.

Bookmarked and already loved the article, thanks :)

Christofer Huber

• Mar 20 '23 • Edited on Mar 20 • Edited

Thanks for the article Dylan. It gave me the right direction to reduce the css bundle size. But it introduce an issue with the update process of the service worker. Due to the fact that the css file is modified post build it causes a hash mismatch.

This leads to the fact that my app wont update in production. To solve this you could add @angular-builders/custom-webpack to the project and create a webpack configuration. This then could be integrated with the angular cli and takes care of the purgecss logic during the angular build.

A good example could be found here: stackoverflow.com/a/59500146/1315263

Minh Phú

• Apr 2 '21

1antares1

• Mar 5 '21

Fabian Lainé

• May 7 '23

Funny t1

• Apr 6 '23

Ahmed Rebai

• Nov 7 '22

Samiullah Khan

• Jun 20 '21

Tamir

• Mar 17 '22