search

diegonetto / generator-ionic

Build hybrid mobile apps using the Ionic Framework
MIT License
1.74k stars 336 forks source link

Grunt uncss #91

Open fmammoli opened 10 years ago

fmammoli commented 10 years ago

Have anyone considered using grunt-uncss on the build phase? Since Ionic is getting pretty big, it may be useful to have only the used css rules.

diegonetto commented 10 years ago

@fmammoli the largest benefit of using grunt-uncss is to reduce the size of your stylesheets so that your pages load faster across the network. I follow Addy's work so I've come across this project in the past, but didn't think to include it within the context of this generator because at the end of the day, all your assets are packaged inside a Cordova application, where there is no network communication for loading assets.

However, there is an argument to be made about "reducing your final Cordova application size". This might seem like a worthy idea to pursue, but then you realize the entire Ionic CSS library is currently 168KB in its minified version. Even if you're only using 10% of those styles, we're talking about a savings of ~ 151KB in the final packaged application, which, from where I'm standing, hardly justifies introducing additional complexity to the build system.

The only other argument I can think of that might justify adding grunt-uncss is that "bloated CSS slows down overall performance because the UA has to parse hundreds of unused selectors". If you want to get into the nitty gritty, here's a great article - http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

To be honest, this last argument sparked my curiousity, so I went about implementing grunt-uncss into one of my Ionic apps. Unfortunately, its not as easy as I thought it would be. Since Ionic's AngularJS directives make heavy use of inline templates, all of these need to be discovered and respective classes included in the ignore option property. Furthermore, grunt-uncss ignores all @media queries except for all and screen so the ones used in Ionic.css would have to be included in the media option property.

I gave this a shot, but it ended up being more of a hassle for what I believe would be a hard to measure increase in CSS performance.

diegonetto commented 10 years ago

Digging further into the grunt-uncss configuration options, I noticed there was a url option that would make the integration a bit easier if anyone wants to implement this manually into their project.

EDIT - Unfortunately the url option has been deprecated.

diegonetto commented 10 years ago

Didn't mean to close this, let's leave it open for discussion!

hakib commented 8 years ago

I know this one is a bit old but I was wondering if anyone has an up to date "ignore" list of classes used by ionic. This SO question has an example of using uncss with angular by excluding classes angular uses.

I agree with @diegonetto 's argument - it might be an overkill to use uncss when you serve css locally. In my case I have certain components loading css files from the server so the file size does matter.