mwrock
Maximum size on CSS
When combining CSS files the resulting file can end up to be very large. This is a problem since IE cuts the CSS after 288 KB. It would be nice to be able to set a maximum size on CSS files.
I created an issue for this a while back. The same applies to the minified javascript. I'll raise its importance now on my priorities. Curious: Is this causing a broken experience with your css?
Yes, it causes my css to break because we need some style that ends up in the end of the file. It's a SharePoint site so there are some big css that we must use.
Sorry to be a pest, but is there any news on this? I'm running into this issue, too.
Nope. Not being a pest at all, but it is the pest who gets their bugs fixed the fastest :)
This is probably the highest priority "non feature" (ie bug) but its been put off because it is not trivial. Thanks for the comment because it tells me just how much more important it is.
A maximum number of resources per bundle would not be too hard to implement. That would require some case-by-case configuration tuning.
Yeah think it should be byte based. Ideally using the same configuration value specified in spriteSizeLimit. Obviously we wouldn't want to truncate the fie at any point. So if your limit is 50k and you process file 1 and you have 30k then add file 2 and have 49k and finally file 3 brings you to 55k, you then cut the bundle which will include file 1-3.
When resources are loaded, we could populate a dictionary of (original-url, original-size). This would be used as feedback into the transformer for adjusting the size of the bundles on the next transformation, so a few hits of the site would be necessary to "calibrate" the size of each bundle.
Each server in a web farm would need to "calibrate" itself this way, unless we persist the information.
This would all be calculations on the original size of the resources, since they are minified in bundles, not individually, so we dont know how big each resource will be when minified.
We could "calibrate" even more by "test-minifying" each resource individually to build a dictionary of (original-url, minified-size).
EDIT: Actually we would NEED to persist the size-information, since maybe only one of the servers in a farm will ever load the resource itself..
Perhaps a better (simpler) way for CSS, would be to keep it all inside the CssReducer, and make it "@import" a flexible number of child-stylesheets, like it is referring a flexible number of sprites now.
Yeah I think there are a couple feasible approaches to cutting up the bundle, The challenge, which may be simpler than I think (or harder than I think), is the fact that there are a few areas in RR code that rely on the assumption of a single CSS file per group of original css files on a page. My feeling is that some of these areas will pop up in a surprising manner. But hey! Who doesn't like surprises?!
Anyways unit tests and integration tests should catch these.
I just tested the "@import" in IE7, and it accepts my 400 kb CSS, if I split it into two smaller CSS-files, and @import one into the other.
I think the problem with relying on @import is that you incur an extra blocking request. The blocking is particularly bad and can also create odd styling results in IE. If the bundle is split accross multiple LINKs, they can be loaded in parallel.
Here's some more information on IE's CSS limitations: http://big-webowsky.meetpollux.com/2011/10/css-size-limit-in-internet-explorer-8/
There are file size limits, file count limits, nesting limits, and rules per file limits.
Been a couple years. What's the status on this problem?
IE9 is still a fairly heavily supported browser with a max selectors per file of 4095. Pretty easy to hit that limit with bootstrap and a few extra controls and sprites.
I haven’t been developing RR actively for a while now. One work around would be to use the RequestReduce API to filter out CSS like bootstrap that has a bunch of selectors.
From: Joel P [mailto:[email protected]] Sent: Friday, April 18, 2014 9:00 AM To: mwrock/RequestReduce Subject: Re: [RequestReduce] Maximum size on CSS (#114)
Been a couple years. What's the status on this problem?
IE9 is still a fairly heavily supported browser with a max selectors per file of 4095. Pretty easy to hit that limit with a bootstrap and a few extra controls and sprites.
— Reply to this email directly or view it on GitHub https://github.com/mwrock/RequestReduce/issues/114#issuecomment-40819732 . https://github.com/notifications/beacon/655165__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxMzQ1NTk3NywiZGF0YSI6eyJpZCI6MzAzMzMzNDZ9fQ==--d97c18458df8861df0620721f92438723bb31e05.gif