Using Bundling and Minification to Improve Application Performance

JP Lessard November 14, 2014

Using Bundling and Minification to Improve Application Performance

Written by: JP Lessard

With Rapid Application Development being the norm in a Project Lifecycle we tend to use a lot of code that is already available out there. Why create something when it already exists? So with every new problem to solve we ask ourselves a few questions:

1. Has something like that already been done?
2. Are there any controls available to accomplish our goal?
3. Are there any jQuery plugins that will help?
4. Can I use an existing CSS framework to achieve the look and feel I am going for?

And most times the answer to at least one of these questions is YES! So what happens to our project? We end up with a bunch of 3rd party JavaScript and CSS files, etc. This can create issues in web pages and web-based applications.

 

In this post, Pinky Panjwani, Director of Software Technologies at Miles Technologies, shows how bundling and minifcation can improve your application performance.

When a user requests a web page from the server, it ends up being multiple requests: one for each one of the resources we are utilizing on the page. What does that mean? Several roundtrips to the server to serve those resources. Obvious end result: Performance Degradation!

So what can we do to help this scenario? How about combining all the JavaScript files into one and all the CSS files into one? This mechanism of combining all files of the same type together is called “Bundling.” There are various ways to do this from the manual (really?) to using 3rd party utilities to the .NET Framework to help in the bundling process.

 

Demonstrated here is a very simple mechanism that can do this for us:

Step 1: In the Global.asax create the style and script bundles. The order in which you put them in the bundle should the same order in which you would put manual references to them. You would need to import the System.Web.Optimization namespace:

What we are doing here is creating a JavaScript bundle that will be accessed using the path ~/scripts/global/js (this path doesn’t really exist – it’s just used a reference to this bundle) and a stylesheet bundle that will be accessed using the path “~/content/global/css”

 

Doing this will not only bundle the files together but also minify them. This will remove the whitespace, shorten variables etc. so the overall size of the file is smaller.

Step 2: Adding the link reference on the page (or master page)

 

That’s it! Run the page and view source, and you will see the links as below:

 

<link href=”/content/global/css?v=xSL9lw1JcOkXvLq55LhoxVZp2U780PUlj2KpKwA5Q9w1″ rel=”stylesheet”/>

<script src=”/scripts/global/js?v=PD8AggzAviwFddBBMBe8Zgrxsgh7Sjyg4gN9Nv1eo2o1″></script>

 

Thoughts, questions, concerns? Hit us up in the comments section below and we’ll get back to you with an answer!

Interested in learning more about other custom software solutions that can help improve performance for your business? Contact us and speak with a software specialist.





Leave Us a Comment

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

Do great things.

Get Started