How Do I Bundle JavaScript Files in Web Forms?

The other day I was working on trying to create faster page loading in a .NET project and decided to tackle the idea of minifiying my JavaScript files. After trying tiressley to attach a minify routines to my web site between compiling and deploying I was not happy with the results. I would have to build something in each page to load the .min version if I was in debug but the full uncompressed version if I was testing. It seemed like a lot of work to do with many places that things could go wrong. I then remembered an article about bundling in asp.net but it seemed to relate to a feature in asp.net 4.5. What about 4.0? I was pleasantly surprised to see that you can get this to work with 4.0.

I gave it a try, only to find that it works great and I do not have to worry about having a .min version and “un”-.min version and which ones to deploy. The concept is simple. Forget both versions. Just send the full version and tell your application which scripts need to be bundled together and the .net framework does the rest. This is a sample exercise to create a bundling process for a web form’s web site. It is approximately the same for MVC but since I work a lot in web forms I thought I would provide steps to do it this way.

Note: Once you do this you could create a table or xml file that includes all of the javascript and how to group them. But maybe this is for another time.

Create a New Visual Studio Visual Basic Web Form Application 4.0 (I called it Bundling)

Create New Web Site

—>Add the following references (You can get them from Github…see below in assets)

WebGrease.dll
Antlr3.Runtime.dll
System.Web.Optimization

Open up the Global.asax file and add this to the top (Right above the Public Class Global_asax):

Imports System.Web.Optimization

Add this below the closing Global.asax Class. It is important that you create bundles for each grouping of javascript files and to name them different. In this case I have named this bundle ~/bundles/home and it includes two javascript files.

Public Class BundleConfig
    Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
        'BundleTable.EnableOptimizations = True
        bundles.Add(New ScriptBundle("~/bundles/home").Include("~/jsFile1.js", "~/jsFile2.js"))
        bundles.Add(New ScriptBundle("~/bundles/home2").Include("~/jsFile1.js", "~/jsFile3.js"))
    End Sub
End Class

This is where you add each bundle and name each bundle. For the sake of this exercise I have added two javascript files: jsFile1.js and jsFile2.js

Open up the WebForm1.aspx and add the following to the page.

<%@ Import Namespace="System.Web.Optimization">

And then under the page add the following. The name here should match the name that you created above.


 <!--This is the asp.net bundling script-->
 <%: Scripts.Render("~/bundles/home")%>

Open up the web.config file and make sure that the following lines are already in there. The important part of this is the debug=”true”. When this is set the javascript files are NOT compressed and put together. When you deploy to production the setting should be set to be debug=”false”. This will then cause the files to be compressed. If you want to compress them even when you are in debug mode then uncomment out line in the RegisterBundles sub routine that starts with BundleTable.EnableOptimizations=True. This will force compression to occur.

<configuration>
    <system.web>
      <compilation debug="true" strict="false" explicit="true" targetFramework="4.0" />
    </system.web>
</configuration>

When you are done your project should look similar to this one.

Figure2

Now you do not have to worry about changing anything when you deploy to production. To read more about bundling try this article.

Assets for this sample:

http://nuget.org/packages/WebGrease/
https://github.com/stockcer/Bundling-In-Web-Forms

Drop me a line and let me know what you think or if I have missed anything

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under ASP .NET 3.5, ASP .NET 4.0 | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 + 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>