We want to keep our bundle sizes as low as possible right? I have been investigating how to do this, specifically around the CSS files output by An...
For further actions, you may consider blocking this person and/or reporting abuse
Thank your for the share Dylan! Not in an Angular project but, I've got an issue/reminder open since a couple of months about purgeCSS. Now I know where to begin 👍
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.
Lets say
<mat-toolbar color="primary"></mat-toolbar>post purge css you won't see the primary color on the toolbar. To overcome this instead of color="primary" used the class mat-primary directly
<mat-toolbar class="mat-primary"></mat-toolbar>Please suggest if any other better way of doing this.
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.htmlSo we need to use specific extractors, like so :
This is good but a bit strict.
I made this gist that should be able to read deeper levels of css files and treat those as well.
It can probably can be optimized.
gist.github.com/ruisilva450/a885bf...
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 :)
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
When i run script => it say that "MODULE_NOT_FOUND".
I miss any thing right here? I have install
purgecss: '^4.0.3'I think, it happens because the PATH issue.
Thanks a lot, man! Awesome aticle!
With angular universal just replace dist by dist/client/browser
How I can add some safelist to exec string
To add a safelist to an exec string in Angular, you can use the "DomSanitizer" service to sanitize the string and ensure that it only contains safe values.
Thanks, but I find better and clear solution.
Hi man, thanks for your article does this technique will reduce the bundle size? and you didn't included the prebuild.ts
I am using Angular Material with tailwind. How does it work with tailwind because it by default used purge for production?
Hi, I've tried but I've got the same size as before, it didn't purge any css, does that mean no unused css was found. I've tried with different files but same result.