Minification and Bundle
Minification
When you do a request to the server, a lot of bytes are transferred between client and server, but there is a way to reduce it by optimizing the requests.
It is possible with the use of Minification, Minification delete all useless spaces of the files to reduce its size.
There are a lot of websites that minifies 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 download only 6 Javascript or CSS files by request? But, did you know is possible put the files together in a single “package” and then the browser can download all of them in a single request? Mix of CSS and Javascript files in the same package is not allowed.
What makes it possible is the use of Bundle.
It is very simple to configure a Bundle in a ASP.NET MVC Application, you have to open the folder App_Start of your project and then open the class BundleConfig.cs. Pay attention to the use of the System.Web.Optimization namespace, it is needed to create Bundles.
As you can see, the class has a single static method called RegisterBundles with a parameter of BundleCollection type called bundles. In this variable you will set your packages.When you call the Add method you need to use a parameter of Bundle type, you can use ScriptBundle for Javascript files or StyleBundle for CSS files. After you create an instance of a new Bundle you have to use the virtual path of your bundle, like an ID, and after, you need to call the Include method, to include the list of files that will be added in this “package”.
We can also find a parameter with jquery-{version}.js and jquery.validade* text. Jquery-{version} means that all files starting with “jquery-” and having a version in its name will be added into the Bundle, like jquery-1.8.2.js. The “jquery.validate*” means that all files starting with “jquery.validate” will be added into the Bundle.
Bundles are registered in Global.asax.cs file, this class executes every time your application is started.
Take a look at the end of file, there is a line with “BundleTable.EnableOptimizations = true;”, this line sets up the load of bundles, and tells the application to load minified files. This option is false by default, if you want to use this optimization, you need to set it to true.
The use of bundles in Views is possible with the the use of helpers, you should use “@Styles.Render” for CSS files and “@Scripts.Render()” for Javascript files, both needs a parameter with the virtual path of the Bundle, the one you has customized in BundleConfig class.
And how it is loaded by the browser? Let’s take a look on it.
As you can see, the bundles I have created are loaded in a single request. But you have to be careful, you should load only files you will really use to avoid the load of useless files, so think about what you will use or not when creating your Bundles.
You can find an example of an application which uses ASP.NET MVC which I am using Bundles in my GitHub: https://github.com/rlima05/SOLID-DDD
