Remove Unused CSS on Angular 9 build process

Question

I have an Angular 9 project which I added Bulma on angular.json > projects.projectName.architect.build.options.styles so it bundles up the framework on styles.css. The thing is that checking the coverage in Chrome I find this:

I tried PurgeCSS and PurifyCSS on their own, working on the "dist" folder and also integrating it using @angular-builders/custom-webpack but without luck.

Also tried: Angular 8/Sass: Find unused css classes and Angular CLI Webpack by AngularRU

I'm trying to keep everything within Angular's build process avoiding ng eject.

How do you do when deploying an Angular App to Production? Because I'm pretty sure I'm not the first that comes up with this problem.

Thank you in advance for any clue you can give me to solve this issue.

Answer 1

Please try to use PurgeCSS

PurceCSS is a well-known tool that scans the output of the built CSS files and will use it's heuristics and extractors to remove unused CSS - predominantly brought to fame thanks to Tailwind.

Refer below link for your reference.

https://dev.to/dylanvdmerwe/reduce-angular-style-size-using-purgecss-to-remove-unused-styles-3b2k