New Bundling and Minification Support (ASP.NET 4.5 Series)

This is the sixth in a series of blog posts I'm doing on ASP.NET 4.5.

The next release of .NET and Visual Studio include a ton of great new features and capabilities.  With ASP.NET 4.5 you'll see a bunch of really nice improvements with both Web Forms and MVC - as well as in the core ASP.NET base foundation that both are built upon.

Today’s post covers some of the work we are doing to add built-in support for bundling and minification into ASP.NET - which makes it easy to improve the performance of applications.  This feature can be used by all ASP.NET applications, including both ASP.NET MVC and ASP.NET Web Forms solutions.

Basics of Bundling and Minification

As more and more people use mobile devices to surf the web, it is becoming increasingly important that the websites and apps we build perform well with them. We’ve all tried loading sites on our smartphones – only to eventually give up in frustration as it loads slowly over a slow cellular network.  If your site/app loads slowly like that, you are likely losing potential customers because of bad performance.  Even with powerful desktop machines, the load time of your site and perceived performance can make an enormous customer perception.

Most websites today are made up of multiple JavaScript and CSS files to separate the concerns and keep the code base tight. While this is a good practice from a coding point of view, it often has some unfortunate consequences for the overall performance of the website.  Multiple JavaScript and CSS files require multiple HTTP requests from a browser – which in turn can slow down the performance load time. 

Simple Example

Below I’ve opened a local website in IE9 and recorded the network traffic using IE’s built-in F12 developer tools. As shown below, the website consists of 5 CSS and 4 JavaScript files which the browser has to download. Each file is currently requested separately by the browser and returned by the server, and the process can take a significant amount of time proportional to the number of files in question.

image

Bundling

ASP.NET is adding a feature that makes it easy to “bundle” or “combine” multiple CSS and JavaScript files into fewer HTTP requests. This causes the browser to request a lot fewer files and in turn reduces the time it takes to fetch them.   Below is an updated version of the above sample that takes advantage of this new bundling functionality (making only one request for the JavaScript and one request for the CSS):

image

The browser now has to send fewer requests to the server. The content of the individual files have been bundled/combined into the same response, but the content of the files remains the same - so the overall file size is exactly the same as before the bundling.   But notice how even on a local dev machine (where the network latency between the browser and server is minimal), the act of bundling the CSS and JavaScript files together still manages to reduce the overall page load time by almost 20%.  Over a slow network the performance improvement would be even better.

Minification

The next release of ASP.NET is also adding a new feature that makes it easy to reduce or “minify” the download size of the content as well.  This is a process that removes whitespace, comments and other unneeded characters from both CSS and JavaScript. The result is smaller files, which will download and load in a browser faster.  The graph below shows the performance gain we are seeing when both bundling and minification are used together:

image

Even on my local dev box (where the network latency is minimal), we now have a 40% performance improvement from where we originally started.  On slow networks (and especially with international customers), the gains would be even more significant.

Using Bundling and Minification inside ASP.NET

The upcoming release of ASP.NET makes it really easy to take advantage of bundling and minification within projects and see performance gains like in the scenario above. The way it does this allows you to avoid having to run custom tools as part of your build process –  instead ASP.NET has added runtime support to perform the bundling/minification for you dynamically (caching the results to make sure perf is great).  This enables a really clean development experience and makes it super easy to start to take advantage of these new features.

Let’s assume that we have a simple project that has 4 JavaScript files and 6 CSS files:

image

Bundling and Minifying the .css files

Let’s say you wanted to reference all of the stylesheets in the “Styles” folder above on a page.  Today you’d have to add multiple CSS references to get all of them – which would translate into 6 separate HTTP requests:

image

The new bundling/minification feature now allows you to instead bundle and minify all of the .css files in the Styles folder – simply by sending a URL request to the folder (in this case “styles”) with an appended “/css” path after it.  For example:

   image

This will cause ASP.NET to scan the directory, bundle and minify the .css files within it, and send back a single HTTP response with all of the CSS content to the browser. 

You don’t need to run any tools or pre-processor to get this behavior.  This enables you to cleanly separate your CSS into separate logical .css files and maintain a very clean development experience – while not taking a performance hit at runtime for doing so.  The Visual Studio designer will also honor the new bundling/minification logic as well – so you’ll still get a WYSWIYG designer experience inside VS as well.

Bundling and Minifying the JavaScript files

Like the CSS approach above, if we wanted to bundle and minify all of our JavaScript into a single response we could send a URL request to the folder (in this case “scripts”) with an appended “/js” path after it:

  image

This will cause ASP.NET to scan the directory, bundle and minify the .js files within it, and send back a single HTTP response with all of the JavaScript content to the browser.  Again – no custom tools or builds steps were required in order to get this behavior.  And it works with all browsers.

Ordering of Files within a Bundle

By default, when files are bundled by ASP.NET they are sorted alphabetically first, just like they are shown in Solution Explorer. Then they are automatically shifted around so that known libraries and their custom extensions such as jQuery, MooTools and Dojo are loaded before anything else. So the default order for the merged bundling of the Scripts folder as shown above will be:

  1. Jquery-1.6.2.js
  2. Jquery-ui.js
  3. Jquery.tools.js
  4. a.js

By default, CSS files are also sorted alphabetically and then shifted around so that reset.css and normalize.css (if they are there) will go before any other file. So the default sorting of the bundling of the Styles folder as shown above will be:

  1. reset.css
  2. content.css
  3. forms.css
  4. globals.css
  5. menu.css
  6. styles.css

The sorting is fully customizable, though, and can easily be changed to accommodate most use cases and any common naming pattern you prefer.  The goal with the out of the box experience, though, is to have smart defaults that you can just use and be successful with.

Any number of directories/sub-directories supported

In the example above we just had a single “Scripts” and “Styles” folder for our application.  This works for some application types (e.g. single page applications).  Often, though, you’ll want to have multiple CSS/JS bundles within your application – for example: a “common” bundle that has core JS and CSS files that all pages use, and then page specific or section specific files that are not used globally.

You can use the bundling/minification support across any number of directories or sub-directories in your project – this makes it easy to structure your code so as to maximize the bunding/minification benefits.  Each directory by default can be accessed as a separate URL addressable bundle. 

Bundling/Minification Extensibility

ASP.NET’s bundling and minification support is built with extensibility in mind and every part of the process can be extended or replaced.

Custom Rules

In addition to enabling the out of the box - directory-based - bundling approach, ASP.NET also supports the ability to register custom bundles using a new programmatic API we are exposing. 

The below code demonstrates how you can register a “customscript” bundle using code within an application’s Global.asax class.  The API allows you to add/remove/filter files that go into the bundle on a very granular level:

    image

The above custom bundle can then be referenced anywhere within the application using the below <script> reference:

    image

Custom Processing

You can also override the default CSS and JavaScript bundles to support your own custom processing of the bundled files (for example: custom minification rules, support for Saas, LESS or Coffeescript syntax, etc).

In the example below we are indicating that we want to replace the built-in minification transforms with a custom MyJsTransform and MyCssTransform class. They both subclass the CSS and JavaScript minifier respectively and can add extra functionality:

    image

The end result of this extensibility is that you can plug-into the bundling/minification logic at a deep level and do some pretty cool things with it.

2 Minute Video of Bundling and Minification in Action

Mads Kristensen has a great 90 second video that shows off using the new Bundling and Minification feature.  You can watch the 90 second video here.

Summary

The new bundling and minification support within the next release of ASP.NET will make it easier to build fast web applications.  It is really easy to use, and doesn’t require major changes to your existing dev workflow.  It is also supports a rich extensibility API that enables you to customize it however you want.

You can easily take advantage of this new support within ASP.NET MVC, ASP.NET Web Forms and ASP.NET Web Pages based applications.

Hope this helps,

Scott

P.S. In addition to blogging, I use Twitter to-do quick posts and share links. My Twitter handle is: @scottgu

Published Sunday, November 27, 2011 8:58 PM by ScottGu

Comments

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:05 AM by Phillip Haydon

WOOHOO! This is an awesome new feature.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:13 AM by Demis Bellot

Cool, you should consider including a CoffeeScript & Less solution in-the-box, they're popular choices amongst HTML5 devs and its easier not use it, then to include it - and well worst things have been bundled :)

Also can we please have a node.exe in the next update of Visual Studio, many custom tooling and build scripts are being made available in npm/node.js and it would be nice we had easy access to it.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:16 AM by Bin Byaahi Maa

Great work. Now, please don't add the coffeescript crap like rails has.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:23 AM by Rey Rahadian

Cool, this will come in handy

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:32 AM by Chris Hammond

This is great, but if you need it now you should check out DotNetNuke V6.1 as the capabilities are included in the Framework.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:37 AM by DaRKoN_

Hrmm this has already been solved (several times over) by projects within the community. I think resources should have been spent elsewhere. Combres / Client Dependency etc. all manage this already, and all are dead easy to install via NuGet.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:39 AM by Demis Bellot

@Anonymous

Yeah bundling the same features as a popular pro-web framework definitely sounds like a bad idea. Not sure why they're even bothering with Minification & Bundling.

.NET should wait a few years until they're the last ones left to add it, again.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:51 AM by Shannon Deminick

ClientDependency is part of both Umbraco and now DotNetNuke and handles all of this stuff out of the box with lots of extensibility points and there's def a bunch of other libs out there. I guess this is cool but have to agree with DaRKoN.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 12:53 AM by Ragesh

Good to see something like this being baked in to the framework. It looks a lot like Cassette (getcassette.net), though.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 1:05 AM by Scott Rudy

I have to wonder if that 40% gain via minification took gzip compression into account. If not then what's the real difference? My guess is that it might be a single digit gain at best on a static resource that is more than likely cached. I have witnessed compression giving 90% savings. Not to mention it takes no work on the developers part if it is turned on in IIS and almost all modern browsers support it. It would be nice to see bundling make it into IIS too. Then the developers can get back to solving business problems.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 1:05 AM by Fırat Esmer

Well, I was waiting for this. Thanks!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 1:08 AM by Erik

Perfect implementation. Great syntax, feels appropriate - awesome job!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 2:06 AM by vtl

Could be very useful for my current project. However in my case js & css tags are dynamically appended to view model by using controller\action name (something like unobstructive js & css using name conventions :) so I'm not sure that I will be able to use new features (since I need provide folder name but I'm using controller names with inheritance and my js & css files are physically located in different folder).

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 2:13 AM by Ben Joyce

Looks interesting.  Thanks for the update.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 2:26 AM by Raymond

There is an nuget package, called "ASP.NET Optimization - Bundling".

Is this the same package ? and if so, will it work in asp.net 4 ?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 2:27 AM by Hemanshu Bhojak

There are a couple of similar solutions already existing on the internet, but its good to have an out of the box solution for the same. Is there an option for minifying HTML in the pipeline?  

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 2:48 AM by Ben E

A much-needed feature which will keep those pesky min files out of source code and allow use to develop using vsdoc without having to worry about optimisation.  Nice one!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 3:29 AM by Geert Vanden Boer

can we use this for our xap files in silverlight too? we were thinking about spreading them to different urls to speed up the download (as you only get 6 connections to the same base-address at the same time)

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 3:37 AM by loginitin

Having the feature in ASP.Net itself saves a lot of time :)

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 4:12 AM by Spikeh

Brilliant feature - though I can't imagine Mobile Phone broadband is too far off :)

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 4:32 AM by Andy

Does this work with VirtualPathProviders?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 5:08 AM by Stilgar

Cool. Any plans to support AJAX Enabled WCF service proxies in bundling. When you have an AJAX heavy site with a lot of services you may end up with a lot of proxies. Proxies are good but I wish we could combine them into a single file.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 5:11 AM by Fero

Excellent, Chirp can do all this today but I prefer to have this functionality already implemented within Visual Studio.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 5:15 AM by Yeurch

We often use a query string parameter to force a client to get the latest version of a CSS file from the server; following a release this is to ensure that old cached versions of the CSS file do not cause problems.

Is this supported with the new syntax?

E.g. <link href="styles/css?v=44" rel="stylesheet" />

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 5:28 AM by Arnaud

How does this (especially the bundling) with regard to proxies/caching devices? People tend to rely on changing the name of the file (ie: jquery-1.6.1.js, jquery-1.6.2.js, etc...) to force devices to re-cache (since the very first rule is to check the cache hash table for an entry with the file name), even before the HTTP headers kick in.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 5:57 AM by webdiyer

Great, does vs2010 support .net 4.5?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 6:24 AM by Liam

I like the idea of multiple bundles but I could see it as being a problem for source control (needing multiple copied of your main JS or CSS files in multiple places). The dynamic bundles give a lot more control but is quite a leap from the directory approach if you just need to make minor changes.

A feature that would go well would be to have a file in the directory that can be read with a list of other directories to add, this can keep the filetree approach more flexible without having to add stuff into global.asax

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 6:44 AM by Sukant

@Scott Rudy: Gzipping is not a replacement for Minification. After unzipping, the browser needs to spend time parsing and executing the file. A minified file does away with most of the fat, and some tools even do code optimizations for a swift parsing. This is why, the minified version will always parse and execute faster than the original version even when gzip is in play. And this is why most of the libraries are minified.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 7:41 AM by Peter

This is great news! Having it built into ASP.NET will be very handy.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 7:50 AM by Håkan Save Hansson

@scottgu Useful feature. I just implemented the same functionality via my own pretty straight forward MVC controller.

Another idea for .NET/MVC/VS:

"Razor CSS" (.cscss) where you can use standard Razor/C# code in CSS files in the same way as in Razor views. Why use (and have to configure and learn) another language, like SASS, LESS etc, to precompile your CSS when you already have the power of Razor/C# at your fingertips? And the power of "CSS helpers".

As you've already guessed I've implemented this feature on my own as well, but it would be nice with built in full VS support for the technique. Let me know if you want me to elaborate on the idea.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 8:12 AM by Ajala Deji

Nice work, I love that we don't need to use external libraries anymore for this.

I also agree that the syntax should reflect its function for discoverablity. Perhaps a type="javascript/mifified"?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 8:32 AM by Esben

@scottgu

This sounds great. But what about caching the combined files in the browser? Will there be send any header information telling the browser to cache the combined files in the browser? And if so how do we update the cache?

The CompositeScript combiner of the ScriptManager todays handles this very well.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 8:41 AM by Jeremy Holovacs

Interesting!  Where do you see the custom bundling logic go in an MVC model?  It seems like it would go in the view as render logic, but the code seems like it belongs in the controller.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 9:02 AM by Programmer

Such tricks are possible today, without waiting for NET 4.5.

Everyone can use VirtualPathProvider, some caching, creative imagination and few hours of programming/experimenting, to make similar solution, probably better suited to individual needs.

The real challenge is merging multiple small images into one single image loaded into browser, then splitting it into smaller images to display them in their locations. Is this possible ? HTML5 canvas may be used to draw 'uncompressed' images, but what about non canvas scenario ? MS should make some 'heavy inwestment' to make this feature, if it is possible.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 9:15 AM by Darren

Hi Scott!  

This looks great and is an interesting dynamic way of doing this.  For those of us who are optimizing the distribution of our static content away from our dynamic content (separation of responsibilities, etc) - is there a way for you to enable this functionality as a context menu in Visual Studio?  Enable the developer to click on multiple js or css files and turn them into a static bundle which is compressed and minified for inclusion as part of the web deployment?  I know there are tools out there already that do this, but it would be great to have it built into a context menu and then part of an MSBuild / Web Deployment tool.

Thanks!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 9:30 AM by jrummell

Does the combining and minifying happen at run time or compile time? I'm currently using a build script to do this at build time.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 9:41 AM by Donny V

Whats the release date for this?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 10:00 AM by Symons

Nice! Now I can stop doing it manually.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 10:53 AM by Mike

@Scott Rudy - This is exactly what I've been saying about minification ever since it became trendy. HTML (gzip) compression will always beat "compression" achieved by dinking around with whitespace. Plus it's simpler, easier to maintain, and leaves your source files in easy-to-read format. I can't figure out why Microsoft would waste time on this ... maybe to maintain feature-parity with Linux-based web platforms? Maybe to have something cool to show during demos? Not sure...

Similarly, client-side caching (of images and CSS) makes bundling somewhat unnecessary. There might be a bit of delay for the first request, but after that the browser already has the data it needs.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 1:04 PM by Wallace Breza

What's the caching story for this feature?  How do we ensure that the client is always getting the latest bits?  In the past I've had to introduce a querystring hash value or unique filename to ensure clients weren't using stale scripts.  Example, if I introduce a new file that should be part of the combined output, or if a file is updated in a new release?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 1:11 PM by Don

Ok.... Thanks Scott and I know you're busy trying to make Azure into something competitive with Amazon, but why no focus on the server controls?  We've had the same control set since 3.5 and even then the only new addition to that release was the listview.  ACT is effectively dead so shouldn't the controls be refreshed a bit to target the HTML5 tag set and CSS3?  Can we get the controls away from pure table rendering and put in hooks for JSON and node?  How about adding a new approach to using tableadapters with node and create a nodeDS and JSONDS? I'm certain you guys can find ways to abstract away the layers to have the tooling handle the heavy lifting, while offering the next level of client/server interactivity.  Quite disappointed though in what is coming out for this next big release and pondering the commitment to long term viability of the technology.  Not placing any blame on you or your teams, but the focus has really shifted to well, who knows what.  Sorry for the negativity, but I'm being honest.  Guess I'll wait to see what version 5 brings.  Thanks.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 3:15 PM by Charlie

Will be possible to get a reference to the final HTTP Request to CSS/JS?

This is needed when having wanting to pre-load resources across apps.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 9:39 PM by Robert Phillips

This is a great feature!

How will we be able to custom select CSS files based on browser type? For example, let's say I have a number of CSS files specifically for Internet Explorer quirks. How can I override the bundled/minified CSS file reference with my custom one at runtime?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Monday, November 28, 2011 11:57 PM by Jason

Sometimes I wish people would read what they write.

Somewhat? might be a bit of delay? But after that? Well you just said it yourself the reasoning for this...

"Similarly, client-side caching (of images and CSS) makes bundling somewhat unnecessary. There might be a bit of delay for the first request, but after that the browser already has the data it needs."

Embarassing moment in programming history, when I was 12 (24 years ago) I minified c++ code thinking it would run faster. So now yeah compile faster, I guess, run faster ummm no. Very hard to read? yes!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 12:48 AM by ScottGu

@Demis,

>>>>>> Cool, you should consider including a CoffeeScript & Less solution in-the-box, they're popular choices amongst HTML5 devs and its easier not use it, then to include it - and well worst things have been bundled :)

I think folks on the team are looking to enable clean integration of these (either as NuGet packages or via the VS Web Tooling Extension).  So should be easy to take advantage of.

>>>>>> Also can we please have a node.exe in the next update of Visual Studio, many custom tooling and build scripts are being made available in npm/node.js and it would be nice we had easy access to it.

My team is also working with the Node team to enable that to work well on Windows and Azure.  

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 12:52 AM by ScottGu

@Scott,

>>>>>>> I have to wonder if that 40% gain via minification took gzip compression into account. If not then what's the real difference? My guess is that it might be a single digit gain at best on a static resource that is more than likely cached. I have witnessed compression giving 90% savings. Not to mention it takes no work on the developers part if it is turned on in IIS and almost all modern browsers support it. It would be nice to see bundling make it into IIS too. Then the developers can get back to solving business problems.

Some of the gain comes from making fewer HTTP requests.  Because browsers typically cap the maximum number of requests they send out at once, reducing the total number can lead to non-trivial performance wins.  In the case of JavaScript in particular, there are also a lot of gains you can get when comments are stripped out of the source (which is part of what minification does).  

I definitely agree gzip is super important as well (note: IIS does that by default in recent releases even for dynamic content).  But bundling/minification can make a big difference as well.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 12:55 AM by ScottGu

@Hemanshu Bhojak,

>>>>>> There are a couple of similar solutions already existing on the internet, but its good to have an out of the box solution for the same. Is there an option for minifying HTML in the pipeline?  

I don't think there is at the moment - although in theory it wouldn't be too hard to enable that. I will forward to the team for them to look at.

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 12:57 AM by ScottGu

@Geert,

>>>>>> can we use this for our xap files in silverlight too? we were thinking about spreading them to different urls to speed up the download (as you only get 6 connections to the same base-address at the same time)

Unfortunately I don't think there is anyway to enable this for .xap files (since they can't be easily merged at runtime). :-(

Sorry!

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 12:58 AM by ScottGu

@Andy,

>>>>>> Does this work with VirtualPathProviders?

Yes I believe so.  

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 12:58 AM by ScottGu

@James,

>>>>>> I take it the files will be rendered as is in debug mode? Also, is there going to be a cache-busting id appended to the end of the release mode script reference request that automatically updates when the underlying files are updated? I've just started using Cassette (http://getcassette.net) which claims to do all of this.

I believe it is using ETAGs to invalidate the cache but will double check on the id appending.

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:00 AM by ScottGu

@Yeurch,

>>>>> We often use a query string parameter to force a client to get the latest version of a CSS file from the server; following a release this is to ensure that old cached versions of the CSS file do not cause problems.  Is this supported with the new syntax?

Yes - that should still work. I believe it also uses ETAGs to invalidate cache entries as well.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:01 AM by ScottGu

@Arnaud,

>>>>>> How does this (especially the bundling) with regard to proxies/caching devices? People tend to rely on changing the name of the file (ie: jquery-1.6.1.js, jquery-1.6.2.js, etc...) to force devices to re-cache (since the very first rule is to check the cache hash table for an entry with the file name), even before the HTTP headers kick in.

Good question - I will forward to the team to find out.  I believe we use ETAGs to invalidate as an option (automatically).  Need to check on appending version strings as well.

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:02 AM by ScottGu

@webdiver,

>>>>>> Great, does vs2010 support .net 4.5?

No - but ASP.NET MVC 4 will work with .NET 4 and VS 2010 and support this feature as well.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:03 AM by ScottGu

@Samir,

>>>>>> Just a question, can we customize each JavaScript group with selected files so one group is referenced on top of the page and another on the bottom of the page in order not to wait long for all JavaScript files to Download first.

You should be able to reference the bundles from anywhere - including both at the top and bottom of the page.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:04 AM by ScottGu

@Liam,

>>>>>> I like the idea of multiple bundles but I could see it as being a problem for source control (needing multiple copied of your main JS or CSS files in multiple places). The dynamic bundles give a lot more control but is quite a leap from the directory approach if you just need to make minor changes.  A feature that would go well would be to have a file in the directory that can be read with a list of other directories to add, this can keep the filetree approach more flexible without having to add stuff into global.asax

I believe you can also specify sub-directories in bundles as well - so something like what you proposed is doable.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:05 AM by ScottGu

@Esben,

>>>>>> This sounds great. But what about caching the combined files in the browser? Will there be send any header information telling the browser to cache the combined files in the browser? And if so how do we update the cache?

I believe we send an ETAG which hashes the version of the bundle to handle this invalidation automatically.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:05 AM by ScottGu

@Jeremy,

>>>>> Interesting!  Where do you see the custom bundling logic go in an MVC model?  It seems like it would go in the view as render logic, but the code seems like it belongs in the controller.

In general I'd recommend setting up the bundle rules at the app level - that way all controllers+views would use it automatically.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:06 AM by ScottGu

@Programmer,

>>>>>> The real challenge is merging multiple small images into one single image loaded into browser, then splitting it into smaller images to display them in their locations. Is this possible ? HTML5 canvas may be used to draw 'uncompressed' images, but what about non canvas scenario ? MS should make some 'heavy inwestment' to make this feature, if it is possible.

You can actually do this today with sprite images - that will work not just in HTML5 but also with older versions of HTML.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:07 AM by ScottGu

@Darren,

>>>>>>> This looks great and is an interesting dynamic way of doing this.  For those of us who are optimizing the distribution of our static content away from our dynamic content (separation of responsibilities, etc) - is there a way for you to enable this functionality as a context menu in Visual Studio?  Enable the developer to click on multiple js or css files and turn them into a static bundle which is compressed and minified for inclusion as part of the web deployment?  I know there are tools out there already that do this, but it would be great to have it built into a context menu and then part of an MSBuild / Web Deployment tool.

You should be able to just make your bundle URLs to be CDN cacheable - which would allow you to push down the distribution of the files to the very edge of your network.  That might be the best way to distribute the work and get the best performance possible.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:08 AM by ScottGu

@jrummell,

>>>>> Does the combining and minifying happen at run time or compile time? I'm currently using a build script to do this at build time.

This new feature does it at runtime - which eliminates the need for a build script.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:09 AM by ScottGu

@Donny,

>>>>>> Whats the release date for this?

We haven't announced a final release date just yet.  We are working hard on it though!

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:10 AM by ScottGu

@Jag,

>>>>> Anything on image optimization?

I know we've been looking at a few things - but need to check on their status :)

Thanks,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:13 AM by ScottGu

@Don,

>>>>> Ok.... Thanks Scott and I know you're busy trying to make Azure into something competitive with Amazon, but why no focus on the server controls?  We've had the same control set since 3.5 and even then the only new addition to that release was the listview.  ACT is effectively dead so shouldn't the controls be refreshed a bit to target the HTML5 tag set and CSS3?  Can we get the controls away from pure table rendering and put in hooks for JSON and node?  How about adding a new approach to using tableadapters with node and create a nodeDS and JSONDS? I'm certain you guys can find ways to abstract away the layers to have the tooling handle the heavy lifting, while offering the next level of client/server interactivity.  Quite disappointed though in what is coming out for this next big release and pondering the commitment to long term viability of the technology.  Not placing any blame on you or your teams, but the focus has really shifted to well, who knows what.  Sorry for the negativity, but I'm being honest.  Guess I'll wait to see what version 5 brings.  Thanks.

I'm only on post 6 of my series - there are many more posts coming. :) As part of this you'll see some nice improvements/updates to server side controls.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:14 AM by ScottGu

@Charlie,

>>>>> Will be possible to get a reference to the final HTTP Request to CSS/JS?  This is needed when having wanting to pre-load resources across apps.

The URLs are deterministic - so you will be able to preload them if you want within your app.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 1:15 AM by ScottGu

@Robert,

>>>>>> How will we be able to custom select CSS files based on browser type? For example, let's say I have a number of CSS files specifically for Internet Explorer quirks. How can I override the bundled/minified CSS file reference with my custom one at runtime?

You should be able to continue doing this just fine.  The bundling/minification won't impact your ability to have browser specific styles.  If you want separate stylesheets for each device you can do that too by placing them in separate bundles.

Hope this helps,

Scott

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 4:29 AM by BIGMEAT

Sounds like a great feature, would be great if it auto integrated with Asp.Net Themes, eg in web.config you could enable minification and bundling of the CSS files and specify filename of minified css file that is out putted?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 6:21 AM by Burton Taylor

The example given is really very fine. It helps in understanding the article very fine.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 7:01 AM by solideagle

hi Scott,

nice feature indeed, could you please tell me will this features be for images as well? for heavily loaded image website (base64 embed etc)?

or for images there is some new perks :)

<asp:Image Path="your path" Embed ="true" runat="server"/>

thanks in advance

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 7:42 AM by Joe White

> (for example: custom minification rules, support for Saas, LESS or Coffeescript syntax, etc).

I think you meant "Sass", not "Saas". Two very different things.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 8:55 AM by Ivan Franjic

This is a great new feature. Can't wait to use it, but it would be even more great if we could use response compression on such simple way.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 11:21 AM by CodeSniper

tl;dr

Yawn...

Why not just use one of the many existing tools for this?

Surely there are more important problems to re-solve...

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 11:32 AM by sam

tl;dr

i agree that M$ should be spending time on more serious endeavors...I hear no serious conversation from Redmond around single page js apps.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, November 29, 2011 5:27 PM by Ted

Will this work inside an UpdatePanel?  If a component that is loaded via AJAX inside an UpdatePanel needs JS/CSS will that get on the page?  If this same component (again loaded via AJAX inside an UpdatePanel) needs jQuery to work, and jQuery is already on the page, will this know NOT to reload jQuery?  

Also, if multiple components try to load jQuery, is it smart enough to load it only once?

Or does is just basically "do what it's told", and then the developer needs to manage what's already been loaded?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Wednesday, November 30, 2011 12:07 PM by Don

Thanks Scott.  Very much looking forward to more posts!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Wednesday, November 30, 2011 4:06 PM by Martin From

As far as i am aware best practice is to put static content on a separate domain, to prevent transmitting cookies (and also usually there is no reason to go through the integrated pipeline, and hit all the modules running for the application), how is that possible with this implementation ?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Thursday, December 1, 2011 1:05 AM by hansonfree@live.com

Scott. ,ASP.NET need node.js's single-threaded and non-blocking operations

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Thursday, December 1, 2011 4:22 AM by Zeeshan Umar

Asp.net 4.5 is coming with really nice features, thanks for sharing Scott.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Thursday, December 1, 2011 1:14 PM by Marthijn Wassink

This is a nice feature!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Thursday, December 1, 2011 8:07 PM by Rob

Very excelent, intuitive, and clean.  Well done.  +1 for LESS and Sass too.

Is there a way to disable minification / combining?  For instance, if I forget that I put _mySecretAdminScript.js in the dir, I don't want every user getting it.

Also is there an option to do this at build-time instead so I can push the result to a CDN and/or the web server can serve this as static, freeing the machine to get back to computing dynamic content?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Friday, December 2, 2011 12:26 AM by Ben

I might have missed something here but if

jquery.js

mycommon.js

pageX.js

all get bundled into a single file for distribution yes we would save time on this page through less requests but on the next page where I bundle

jquery.js

mycommon.js

pageY.js

Isnt the client wasting a bunch of time downloading jquery and mycommon again as part of another bundle? The Same would be true for CSS.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Friday, December 2, 2011 10:12 AM by SLer

looking for Silverlight 5, 6 ,7 .....

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Friday, December 2, 2011 10:36 AM by Jason Baginski

I'm with BIGMEAT..I hope that it automatically understands App_Themes.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Friday, December 2, 2011 11:05 AM by thorn

+1 for a TameJS postprocessor. It would be so consistent with the new async/await features of C#!

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Sunday, December 4, 2011 6:03 PM by Dread Peter

Is there any control on order when bundling?

There have been many times when I have my default CSS files and then an additional one that overrides default styles; made for specific pages and or templates, This is especially true in the case of <UL> and <LI> with "module" based content. As long as these styles are loaded after the defaults then what I want works, if they are loaded first then the defaults do the overriding. Is there a predefined order files are bundled from a directory? Is it alphabetical / date created / date modified / other?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, December 6, 2011 2:04 AM by Cine

Since this is now being sent in managed mode, does it lock the session object?

Are you looking at any of the bug/features that is being sent on NuGet page?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Thursday, December 8, 2011 2:44 PM by warazen

Scott,

Since you are working on updates to Visual Studio, can you please provide an option in the editor to assume that a tag prefixed with <asp: has an assumed attribute of runat="server"?

Keep the default setting as it is, so purists who insist on seeing that attribute can still see it.  And provide us with a checkbox option to 'Imply runat="server" on <asp: tags.' under the Tools > Options > Text Editor > HTML > Miscellaneous dialog in Visual Studio.

The runat="server" attribute is visual clutter.  Removing it will make the code cleaner and easier to read.  Thanks.

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Thursday, December 8, 2011 2:58 PM by Kamyar Nazeri

Scott,

The new Bundling feature sounds promising, however, is there any way to make use of Minification within the code? For example, I've got a server control with dozens of script files embedded right into the assembly which are written into the ASP pipeline at the run-time, the Bundling process can be easily done in a server control but Minification needs third-party software either at compile time, or via advanced text processing (minification) at the run-time! I wonder if it is possible to take advantage of the built-in Minification process in .Net for such scenarios?

And how about run-time added scripts which are registered by Page.ClientScript? I mean those which make use of WebResource.axd or ScriptResource.axd script handlers? can I somehow bundle them together as well?

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Tuesday, December 20, 2011 3:08 PM by upgraders

Easier to post this for my request...since you are working on it

connect.microsoft.com/.../allow-design-view-for-mvc3-and-razor-view-engine

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Sunday, January 8, 2012 8:49 PM by Matthew Wills

Can this new functionality easily be extended to support the media attribute as well?

   <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

   <link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />

# re: New Bundling and Minification Support (ASP.NET 4.5 Series)

Sunday, January 22, 2012 5:18 PM by JohnJin

Hmm,I don't think this is the best way to bundle resource. The better way is to let the browser to send multi-file request.

For example, the page needs 100 CSS files, 100JS files and 100 img files, the browser is able to know which one has been cached, and then should send one request to and tell the server: "please send me 50 css files,50 js files, 40 img files in one response."  

html5js.wordpress.com