CSS and JavaScript Bundling and Minification in ASP.NET 4.5

ASP.NET 4.5 includes a new feature to minify and bundle CSS and JavaScript within your web application. If you use any of the default project templates in Visual Studio 2012, this new feature is turned on.

What Is Bundling and Minification?

Most static content files, such as CSS and JavaScript, contain a lot of whitespace and comments. Although the whitespace and comments do not necessarily take up significant space, depending on the client’s Internet speed, the additional space can noticeably slow the page load of the site. Figure 28-13 shows the network traffic before minification.

An example of a JavaScript snippet before minification can be found is as follows:

function helloWorld(firstName) {
    // Declare variables
    var message = "Hello, " + firstName;

    // Display an alert message
    alert(message);
}

In the past, one of the best techniques for compressing static content was to enable HTTP compression on the web server, such as IIS. The most common compression method was to gzip the static files. The issue with this process is that it is very difficult to customize which files to minify. In larger organizations, you may need to get an administrator involved to update the web server for you. In ASP.NET, you now have the ability to have complete control over the minification process without the need for an administrator.

To take the minification process a step further, you can also bundle a group of files, such as all CSS files, into a single minified path.

Enabling Bundling and Minification

There are numerous ways to bundle and minify scripts and styles. One way to handle the bundling is to add a bundle.config file to the project and add the appropriate file listing in the file. However, you can also add the files to the bundle manually during the application start method.

To enable this feature in your projects, download the Microsoft ASP.NET Web Optimization Framework package from the package manager. After it’s downloaded and enabled, head right to theGlobal.asax file. Then, in the Global.asax file, include the namespace System.Web.Optimization. Finally, to bundle and minify CSS files located in the styles folder of your web, for example, add the following to the Application_Start method:

var cssBundle = new Bundle("~/styles/css");
cssBundle.IncludeDirectory("~/styles", "*.css");
BundleTable.Bundles.Add(cssBundle);

Like everything else in ASP.NET, developers can have complete control over the way CSS and JavaScript are bundled. This includes creating custom transforms, including and excluding specific files, and creating multiple bundles. It is important to note that the files are minified and added in the order they are listed. If a script file is dependent upon another file, it’s best to move the dependent file to a bundle above.

Figure 28-14 shows the network traffic after minification.

The JavaScript snippet from earlier, when compressed, will render like so:

function helloWorld(n){var t="Hello, "+n;alert(t)}

NOTE For more about customizing bundling, search online for ASP.NET 4.5 Bundling and Minification. Also note that since this feature is released out-of-band on NuGet (package manager in Visual Studio), additional enhancements will likely be made before the next version of Visual Studio is released.

This article is excerpted from chapter 28 “Configuration” of Wrox’s Professional ASP.NET 4.5 (ISBN: 978-1-118-31182-0, May-2013, copyright John Wiley & Sons).

ABOUT THE AUTHORS

JASON N. GAYLORD is an application developer and Director of Technology at United One Resources in Wilkes-Barre, Pennsylvania. His programming career started with a simple GOTO statement and continued over 15 years of developing Windows and web applications. During this time, Jason has had the opportunity to plan, build, test, and deploy several enterprise applications including integrations with accounting and operating systems and B2B web applications used by some of the top banks in the United States.

Outside of the normal day to day activities, Jason blogs, speaks, and organizes technology events including TECHbash and NEPA GiveCamp. He’s the group leader for the .NET Valley technology user group. Recently, Jason was recognized as a Microsoft MVP for 10 consecutive years. He remains a member of the ASPInsiders, a group that provides product feedback directly to the ASP.NET team. You can find out more about Jason by visiting his website at jasongaylord.com. You can follow him on Twitter at @jgaylord.

CHRISTIAN WENZ started working almost exclusively with web technologies in 1993 and has not looked back since. As a developer and project manager he has been responsible for websites from medium–sized companies up to large, international enterprises. As an author, he has written or co-written over 100 books that have been translated into 10 languages. As a consultant, he helped companies and teams of developers to make their applications more reliable, better performing, and more secure. Christian frequently writes for various IT magazines, is a sought-after speaker at developer conferences around the world, and is always keen on sharing technologies he is excited about with others. He contributes to various open source projects, is a Microsoft ASP.NET MVP and an ASPInsider, and co-author of several developer certifications. You can follow him on Twitter at @chwenz.

PRANAV RASTOGI is a member of the Microsoft ASP.NET product team and is based in Seattle. Over the past years, Pranav has worked on a variety of areas such as ASP.NET Web Forms, Dynamic Data, and more recently ASP.NET SignalR. He is passionate about understanding web developer woes with the Microsoft stack and helps champion tools, packages, or libraries that will enhance the web development experience on the Microsoft stack. Pranav is also a regular speaker on a variety of ASP.NET related topics at various worldwide conferences. He blogs about his experiences athttp://blogs.msdn.com/b/pranav_rastogi/. Before joining Microsoft, Pranav graduated from the University Of Florida with a masters in Computer Science.

Pranav is also a food junkie who sometimes works as a Chef de Cuisine at home. He is an adventure seeker and can be often found backpacking in the wilderness. In this spare time Pranav regularly practices his bartending skills on his friends. If you know anyone who is looking to throw a party and needs a bartender, then get in touch with him. You can follow Pranav on Twitter at @rustd.

TODD MIRANDA is an active proponent of .NET technologies and software craftsmanship as a whole. He has been developing on various platforms for over 20 years and has been involved with .NET since it was previewed in 2000. He has worked with many of the .NET platforms but focuses primarily on ASP.NET. He is the owner of NxtDimension Solutions and provides consulting and training on the Microsoft stack. As a Microsoft MVP, Todd works closely with Microsoft. He is the co-founder of the Birmingham .NET User Group and remains active in the development community. He has recorded hundreds of online training videos on Microsoft development topics including security, JavaScript, Silverlight, WPF, Expression, and ASP.NET. He is an INETA speaker and regularly presents at user groups, community events, and technical conferences. You can follow Todd on Twitter @tmiranda.

SCOTT HANSELMAN is a web developer who has been blogging at http://hanselman.com for over a decade. He works on Azure and ASP.NET for Microsoft out of his home office in Portland, Oregon. Scott has three podcasts, http://hanselminutes.com for tech talk, http://thisdeveloperslife.com on developers’ lives and loves, and http://ratchetandthegeek.com for pop culture and tech media. He’s written a number of books and spoken in person to almost a half million developers worldwide. You can follow Scott on Twitter at @shanselman.

 

Tags:

Comments

Leave a Reply

What is 6 + 2 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)