15 49.0138 8.38624 1 0 4000 1 https://codeisall.com 300
bundling and minificationj in mvc

Bundling and Minification in ASP.NET MVC

Introduction

In the previous article, you have learned about what is data annotation, types of Data Annotation, Syntax of Data Annotation, and how to use them yo achieve validation in MVC application.

In this article, you will learn about what is bundling and minification, benefits of them, and how we can achieve for the better performance of MVC application,

This article will be helpful to beginners and students who are learning MVC. 

Pre-Requisites

  • You need to create an ASP.NET MVC Project (You can refer our article to create a new project), Or you can add this to the existing project.

What are Bundling and Minification?

Bundling:

Bundling is a new feature of Asp.net MVC 4. Bundling means to bundle Specific types of files. So bundling allows loading this specific type of files from the server into one HTTP request at a single time,

Note: we can only bundle same type of files, We can not bundle css and js files together, we have to bundle them Separately.

Lets understand this with an example,

Before Bundling :

After Bundling :

As shown in above figures, Before bundling it was 2 HTTP request that was sent for each js file, and after bundling all the js files that are bundled can be load in just a single HTTP request.

Minification :

Minification is used to reduce the size of the JavaScript or CSS file. Minification removes all the unnecessary space and comments from the file and also shorten the variable name to reduce the size of the file.

Lets understand this with an example, below.

Normal JS Code

As you can see in the above code snippet there is one function called fnShowName that is having 5 lines of code. Size is 84 Bytes

Minified JS Code

Now see the above code snippet, there is only one line that represents the whole function, space is removed and a variable name is also shorted. Size is 43 Bytes.

Advantages

The main benefit of Bundling and Minification is the Performance improvement of your web site.

  • Bundling and Minification improve the first page hit download time.
  • Reduces the number of HTTP requests to the server by bundling all the same category files into each bundle.
  • Minification reduces the download size of javascript or CSS file by removing white space, comments and also shortening the variable names.

How to achieve in MVC

Bundling:

To achieve Bundling MVC, Open a project and Open a BundleConfig.cs file from the App_Start folder and apply below bundling CSS code to it.

If you see above code then these three css files are bundled. The name of the bundle represents the virtual path of that files. The bundle virtual path must not be same as the files virtual paths

Now if you want to use them on any view page just write down below code there.

Bundle doesn’t work in the debug mode so have to set the debug mode off in the web.confif file, add below code to do that.

Now run the project, you will notice that all the bundled CSS and js files are loaded in one CSS and js file.

Minification

Minification can be achieved by any online tools and we can use that minified files in the project,

 There are some available extensions: for example Minify or JS & CSS Minifier. You can find extensions on the VS Code Marketplace.

So you can minify any js and CSS files and use that on any page to get the better performance of the website. Check out the below code for that.

I hope this article will help you to understand how bundling and minification can be used in MVC application and also how beneficial they are to use. we will be happy to help you if you have any issues or queries. Comment your suggestions and issues and we will try to resolve it.

Share:
Category:MVC
PREVIOUS POST
Data Annotation in MVC
NEXT POST
Cookies & Session in ASP.NET MVC