Monday 28 November 2011

CSS and JavaScript Bundling and Minification

Unfortunately, this is not something ​immediately available, but it looks like this will be in the next version of Visual Studio. The bundling features I've read about will automatically bundle a specified selection of files into a single HTTP request.

The astute among you will probably already be aware that there's already support for JavaScript "bundling" in the current version of Visual Studio (and SharePoint) in the form of the Script Manager control which you can use to create what's called a Composite Script and something we've exploited in our SharePoint 2010 publishing projects. As the name implies, it only manages scripts so what it lacks is any kind of support for CSS.

The next version appears to not only enhance the current "bundling" functionality but also extend it for use with CSS files (and there may even be some possibility of extending this to other file types if the class model will allow). This means that multiple CSS files can then be "bundled" in the same way, thereby minimising the number of HTTP requests. Not only can we do that, but we will also be able to minify the bundled files.

Misspelled WordMinification is the process of removing unnecessary characters from a file, like spaces, carriage-returns, possibly semi-colons, comments etc. It can be used to reduce files size considerably, and if the file size is small, the HTTP request will be quicker to return to the browser. There are already sites out there that can be used to do this, but to have it within Visual Studio will be very useful. How much this will be integrated with SharePoint I don't know. As SharePoint is based on a specific version of the Misspelled Word.Net framework this functionality may not make it into the next version - we'll have to wait and see.

The main drive behind these changes appear to come from the necessity to provide a better web UX for mobile devices where low and slow bandwidth can inhibit use of a website. We'll just have to wait and see how and if it surfaces in the next version of SharePoint.

If you want to know more, check out Scott Guthrie's blog post: http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx

2 comments:

  1. Give http://RequestReduce.com a try. I would imagine it should be able to bundle/minify js and css in sharepoint. It's a response filter so as long as you can install the httpmodule, it needs no extra code or config and can find all css and js in the response. The minified and bundled assets are cached of course.

    ReplyDelete
  2. @Matt Wrock: Thanks for the comment. The only downside of using a HttpModule is access to a server. There may be occasions when this level of access is restricted, such as SharePoint Online. While I know of many minification resources already available, it was more speculative about how vNext of Visual Studio was shaping up and whether any of it may impact or get in to the next version of SharePoint. I'll certainly have a look at your RequestRetry product, but as with most things it's finding the time to properly look at things before using them in production!

    ReplyDelete