Minification and Bundle

Hello everybody! Today I am going to talk about Minification and Bundle.

Minification

When you do a request to server, a lot of bytes are transferred between client and server, but there is a way to reduce this transfers optimizing the requests.

This is possible with the use of Minification, Minification delete all useless spaces of the files to reduce file's size.

Normal Javascript File

Minified Javascrpt File

There are a lot of sites that does the minification in your files to get a better performance. Just take a look in internet to find these sites.

Bundle

Did you know, generally the Browsers can just download 6 Javascript or CSS files by time? But, did you know is possible put the files together in a single "package" for the browser download all of them in a single request? You can not mix Javascript files and CSS files in a single "package". 

What makes it possible is the use of Bundle.

It is very simple to configure a Bundle, you just need to open the folder App_Start of your project and then open the class BundleConfig.cs. Look the use of the namespace System.Web.Optimization, needed to optimize the files using Bundle.

Bundle Example

As you can see, the class has a single static method called RegisterBundles with a var of the BundleCollection type called bundles. In this var you will add all your file's "packages".When you call the Add method you need to use a parameter of the Bundle type, you can use ScriptBundle for Javascript files or StyleBundle for CSS files. After you do an instance of a new Bundle you need to use the virtual path of your bundle, like an ID, and after, you need to call the Include method, to include the files that will be in this "package".

We ca'n also look the existence of jquery-{version}.js and jquery.validade*. Jquery-{version} means all files starting with jquery- and having a version in name will be in the Bundle, like jquery-1.8.2.js. The jquery.validate means all files starting with jquery.validate will be in the Bundle.

Bundles are registered in Global.asax.cs file, this class executes every time your application is started.

Global.asax.cs

Look at the end of file, there is a line BundleTable.EnableOptimizations = true;

This line configure the load of the bundles, and tell the application to load minified files. This option is by default equals false, if you want to use this optimization, you need to set the property to true.

The use of bundles in Views, is possible with the helpers @Styles.Render for CSS files and @Scripts.Render() for Javascript files, both needs a parameter with the virtual path of the Bundle.

Bundles in View

Let's take a look in the Bundles loaded by the Browser:

Bundles in Browser

The bundles are loaded in a single request.