Adding Bundles to ASP.NET 4.0 Web Applications

I recently encountered an opportunity while updating (rewriting the HTML) the UI on an existing application. Having worked on a a couple .Net 4.5/MVC 4 applications previously and learning the awesomeness of the .NET bundling functionality, I wanted to see if I could bring that functionality back into a .Net 4.0 Web Forms application. I hadn't heard of anyone doing it, but doesn't mean it can't happen.

I ran across a couple sites which lead me in the correct direction. They both target .Net 4.5. The Bundles and Minify CSS and Javascript in your ASP.Net Web Form Web Site post pointed me to the Microsoft ASP.NET Web Optimization Framework NuGet package. It didn't say that it required the .Net 4.5 framework so I added it to my project and it worked without issue.

using System.Web.Optimization;
public namespace SomeNS {
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/style.css").Include(
            "~/Content/bootstrap-cust.min.css",
            "~/Content/styles.css"));

        bundles.Add(new StyleBundle("~/bundles/kui.css").Include(
            "~/Content/styles/kendo.common.css",
            "~/Content/styles/kendo.default.css"));

        bundles.Add(new ScriptBundle("~/bundles/kui.js").Include(
                "~/Scripts/kendo.core.js",
                "~/Scripts/kendo.calendar.js",
                "~/Scripts/kendo.popup.js",
                "~/Scripts/kendo.datepicker.js",
                "~/Scripts/kendo.validator.js"));

        bundles.Add(new ScriptBundle("~/bundles/Common.js").Include(
            "~/Scripts/jquery-1.9.1.js",
            "~/Scripts/Common.js"));

        bundles.Add(new ScriptBundle("~/bundles/UserCommon.js").Include(
            "~/Secure/User/Scripts/Script.js",
            "~/Secure/User/Scripts/CustomValidation.js"));

        bundles.Add(new ScriptBundle("~/bundles/SysAdminCommon.js").Include(
            "~/Scripts/jquery-ui-1.8.17.custom.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap.js").Include(
            "~/Scripts/bootstrap-cust.js"));

        BundleTable.EnableOptimizations = true;
    }
}
}

With the NuGet package added to the project all of the functionality surrounding the CDN functionality is available.

Next add the following line to the Application_Start function in the Global.asax.

BundleConfig.RegisterBundles(BundleTable.Bundles);

The post says to use the following block to get the scripts to render. This doesn't work because Scripts/Styles do are not available.

<asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/Scripts/jquery") %>
        <%: Styles.Render("~/Styles/css") %>
</asp:PlaceHolder>

This is not a show stopper; the functions merely generate standard HTML elements. The style bundles can be added to the application pages like the example below.

<link rel="stylesheet" href="/bundles/style.css" type="text/css" />

Similarly, the script bundles can be added to the application pages like the example below.

<script src="/bundles/bootstrap.js"></script>

Using Firebug/developer tools/fiddler, it is easy to see that the files are bundled and minified.

Visual Studio 2008 Post-Build Event and Minify Using YUI Compressor

A time tested way to shrink and optimize JavaScript and CSS is to minify and obfuscate your files. Yahoo (High Performance Web Sites Rule 10) and Google (Minimize Payload Size) have best practices recommending minifying JavaScript.

The YUI Compressor is an excellent open source tool for this; the best I have found. My real world use reduced the size of the regular CSS and JavaScript files by 45%. Gzipping the files reduced CSS files by an additional 25% and JavaScript files by an additional 36%. Resulting in 75%+ smaller files.

Here is a batch file snippet which should speed up implementing this into your build process:

SET YUICOMPRESSOR=%Minify%\yuicompressor-2.4.2.jar
IF "%JAVA_HOME%" == "" (
 ECHO Searching for Java...
 for /f %%j in ("java.exe") do (set JAVA_HOME=%%~dp$PATH:j)
)
ECHO Java: %JAVA_HOME%
ECHO YUICOMPRESSOR: %YUICOMPRESSOR%
IF EXIST "%YUICOMPRESSOR%" (
 IF NOT "%JAVA_HOME%" == "" (
  ECHO Deleting Minified files, TFS can make these readonly and the compressor will not overwrite read only files...
  del /F "%CD%\<Path To Script Directory>\core.min.js"
  del /F "%CD%\<Path To Styles Directory>\core.min.css"
  ECHO Done.

  "%JAVA_HOME%java" -jar "%YUICOMPRESSOR%" -v --type JS -o "%CD%\<Path To Script Directory>\core.min.js" "%CD%\<Path To Script Directory>\core.js"
  "%JAVA_HOME%java" -jar "%YUICOMPRESSOR%" -v --type CSS -o "%CD%\<Path To Styles Directory>\core.min.css" "%CD%\<Path To Styles Directory>\core.css"
 ) ELSE (
  ECHO ERROR: Java is not installed, no Minification
 )
) ELSE (
 ECHO ERROR: YUI Compressor not found.
)

Also note that if a build event echos a line starting with "ERROR", not sure if it is case sensitive, the Visual Studio and Team Foundation Server will set that step as a failure and alert as expected. Remove the "ERROR:" text from the echo lines to allow the build to proceed if it cannot find the compressor or java.