Any experience combining JS / CSS in MVC?

Question

I'm planning to implement a solution for combining multiple js/css files into single files in my MVC project, but currently I doubt between the following two possibilities:

Telerik Extensions for ASP.NET MVC (www.telerik.com/products/aspnet-mvc.aspx)

• Supports combining multiple files into one request
• Supports groups of web assets
• Supports caching groups
• Caching is disabled when application is in Debug mode
• Groups of assets must be defined in masterpage or (partial) view
• Supports GZip compression
• Supports CDN
• More than only a compression / combining solution (eg. JQuery helpers)

Combres - WebForm & MVC Client-side Resource Combine Library (combres.codeplex.com)

• Supports combining multiple files into one request
• Supports minifying resources
• Supports groups of web assets
• Supports caching of groups
• Supports versions of groups (invalidates the browser's cache and server's cache)
• Supports debugmode (disables caching/minifying)
• Groups of assets must be defined in a web config section
• Supports GZip compression
• A custom route must be added
• Supports custom filters
• Uses the YUI Compressor library

Does anyone has experience with one of these or maybe another combining solution? I'm particularly interested in YSlow scores (before and after) and/or compression statistics/performances.

Answer 1

I'm using this approach (actually, i think that's what telerik has underneath).
Works like a charm.

Answer 2

Are you planning to use the Telerik MVC Extensions when they become available? If so, then their script combiner seems like a natural choice, as their widgets integrate with it...

If you're going to use script and css resources from multiple sources, then how about a good old-fashioned build script in your build environment of choice?

• It is generally easy to set up a build tool to merge text files and run external compressors.
• Using a build tool is a natural fit for continuous integration and one-step deploy.
• And you can easily do static file serving from a separate cookie-less domain for maximum download speed and minimal server overhead.
• And it will make it easy to add a CDN later on, if needed. (AFAIK Teleriks solution can link to a file already available on a CDN, but cannot minify a local file and upload it to a CDN.)

I'm particularly interested in YSlow scores (before and after) and/or compression statistics/performances.

Don't worry too much over a few percentage differences in achieved compression, or a single HTTP header that isn't strictly needed. If you just combine files where possible, minify whitespace, enable HTTP compression and set proper caching headers; then you're far ahead of the average website out there...

If you prefer to keep minification inside MVC, then it boils down to maturity of the library IMHO. I don't know which one should be the top pick right now. But have a look at IncludeCombiner too; it is part of MVCContrib now, and as such will get a good deal of exposure in the future.

Answer 3

You could use MvcContrib.IncludeHandling. Supports:

• Combining multiple files into one request
• Combining CSS
• Combining JS
• Debug-mode via MvcContrib.Filters.DebugFilter
• Cache-headers
• GZip / Deflate compression
• Configuration
• Swapping out the default implementations of the parts it relies on with your own implementations (for example; swap out the cache with your own implementation)
• Registering includes in views as well as masters - will ignore duplicate registrations.

All happens at run-time; no build-steps etc required. No custom route required. Uses YUICompressor.