In my experience, the less complicated the project the better this approach will work. toLowerCase () = extension ) }Įnter fullscreen mode Exit fullscreen modeĪgain, a huge reduction thanks to unused styles being removed. exec const fs = require ( ' fs ' ) const path = require ( ' path ' ) // find the styles css file const files = getFilesFromPath ( '. In my package.json, I have the following scripts:Ĭonst exec = require ( ' child_process ' ). But I needed something that would fit into my project workflow and not be as intrusive. Getting PurgeCSS to work alongside Angular and the Angular CLI is quite a challenge for various reasons. This bloats the CSS that is shipped to the browser which, while not as dramatic as large JavaScript files, does contribute towards higher data use and CPU time to parse. When working in big projects, often with multiple team members or contributors, it is hard to keep track over time when styles are no longer in use. 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. Which brings us to the solution I ended up implementing. Probably more useful for smaller projects that do not have many components/pages. I found this hard to work through in a bigger project, hence why I logged a potential feature request to help.
![lightgallery angularjs lightgallery angularjs](https://i1.wp.com/angularscript.com/wp-content/uploads/2015/03/Light-Customizable-Tooltip-Popup-For-Angular.js.jpg)
There is an npm package called ngx-unused-css that, when installed and run on your project, will scan your files and provide a list of all styles it deems are not used. I do recommend doing development with this plugin installed so that you can easily pick up in your style sheets potential unused style classes that you can clean up as you go. We can use some plugins in our IDE to help identify styles that are not used.įor example there is Unused CSS Clases for JavaScript/Angular/React.Īlthough very useful while building pages and components it does have some drawbacks with Angular and SASS such as not correctly working with SASS mixins, understanding class bindings ="highlight", or working out what is going on inside of ::ng-deep. I want to investigate some other options, and then show you the solution I ended up implementing on some of our bigger projects to show you the savings. It won't remove any unused styles automatically. js files, and all third-party, library or global styles go into a dedicated styles.css in the /dist folder. Angular will put styles from your components directly into the. Wait, doesn't Angular do this already? Not really.
Lightgallery angularjs how to#
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 Angular projects.