How To Implement Bundling And Minification In Asp.Net MVC




In Asp.Net MVC, Bundling means combining multiple files into a single file. So that there will be having less HTTP request to the Server. This would definitely reduces the page load time. Mainly Bundling is done for CSS, JS files.



In Asp.Net MVC, Minification means removing the unwanted white space, comments and line break from the code. Mainly Minification is done for CSS, JS files. Minification reduces the size of the file that needs to be transferred from the server.



Open your Asp.Net MVC Application.

Bundling And Minification In Asp.Net MVC, Bundling, Minification, Asp.Net MVC, Page Optimization In MVC, Page Optimization

Navigate to the Folder App_Start and open BundleConfig.cs file. Inside RegisterBundles method, append following codes as shown in the figure.

Bundling And Minification In Asp.Net MVC, Bundling, Minification, Asp.Net MVC, Page Optimization In MVC, Page Optimization

In the above figure, the first section represent the bundling of Javascript files.

"bundles/jqueryval" is the name of the javascript bundling. Second section represent the bundling of css files. "Content/themes/css" is the name of the css bundling. In both section, the files that needs to be bundled comes inside include region.



Write down the following code on View for Registering and Invoking bundled files.

Bundling And Minification In Asp.Net MVC, Bundling, Minification, Asp.Net MVC, Page Optimization In MVC, Page Optimization

The first section represent the Invoking of Bundled files on View.

The second section represent the Registering of Bundled files on Global.asax.

By this way we can Implement Bundling And Minification In Asp.Net MVC