How does ASP.NET MVC handle Minify (i.e. .min.js) js and regular (i.e. .js) js files with debug option true and false?
Kailash...
206
Points
23
Posts
Introduction
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser. Bundling and minification techniques were introduced in MVC 4 to improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript).
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser. Bundling and minification techniques were introduced in MVC 4 to improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript).
Minification performs a variety of different code optimizations to scripts or css, such as removing unnecessary white space and comments and shortening variable names to one character.
Debugging Bundled and Minified JavaScript
You can still debug your JavaScript in a development environment with the compilation Element
- in the Web.config file is set to debug="true"
- or, in bundleConfig.cs file set BundleTable.EnableOptimizations = true;
because the JavaScript files are not bundled or minified.
Controlling Bundling and Minification
You can enable or disable Bundling and minification by setting the value of the debug attribute in the compilation Element in the Web.config file. In the following XML, if you set debug to true then bundling and minification will be disable.
<system.web> <compilation debug="true" /> </system.web>
And you can enable bundling and minification by setting the debug value to "false". Alternately, you can override the Web.config setting with the EnableOptimizations property on the BundleTable class. The following code enables bundling and minification and overrides any setting in the Web.config file.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
BundleTable.EnableOptimizations = true;
}
Note
As we have option <compilation debug="false" targetFramework="4.5" />, if this option is “false” then ASP.Net starts using of the bundling and minification. If it found already minified version of some file (e.g. angular-material.min.js) then it will use it. If there is no minified version then ASP.Net will minify Javascript code by itself. So be careful in case if you modified regular js file and minification is enable and you have minify version of that file (example .min.js). In this case you need to update this minified file or just remove it.
Conclusion
Above article describes how you can apply different options during debug and release. I hope this article will help to understand the bundling and minification in ASP.NET MVC.
1 Comments
Rahul Maurya
05-May-2017 at 07:59