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)
—>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):
[code language=”vb”]Imports System.Web.Optimization[/code]
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.
[code language=”vb”]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[/code]
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.
[code language=”vb”]
<%@ Import Namespace="System.Web.Optimization">
[/code]
And then under the page add the following. The name here should match the name that you created above.
[code language=”vb”]
<!–This is the asp.net bundling script–>
<%: Scripts.Render("~/bundles/home")%>
[/code]
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.
[code language=”vb”]
<configuration>
<system.web>
<compilation debug="true" strict="false" explicit="true" targetFramework="4.0" />
</system.web>
</configuration>
[/code]
When you are done your project should look similar to this one.
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!
