Starting in version 4, ASP.NET MVC has been capable of bundling script and style files and minifying them to help make sites faster. Bundling and minification is not a black box. Its easy to see what is going on using only your browser. The image below is a default MVC application that has not been bundled.
Without Bundling and Minification
Without bundling, every CSS and JS file that is being used, a separate HTTP request is issued. Keep in mind that this is a very small list. Your applications are likely to have many, many more files, especially JS files. There could hundreds. This would not be uncommon for large-scale applications.
There is only one situation where this is ideal. If you are debugging.
With Bundling and Minfication
If we look at App_Start\BundleConfig.cs file, there are five default bundles built for us. One for jQuery, one for jQuery Validation, one for modernizr, one for bootstrap, and one for the css files. By default, the jQuery Validation bundle is not used. We go from six requests for CSS and JS files to four. However, look at the size of the files. jQuery is roughly 33% of it’s uncompressed size and Bootstrap is about 50%. This alone should be enough to sell you on the virtues of bundling and minification. If not, though, again picture the scenario that has hundreds of files. The time that is saved, and the smaller sizes leads to massive performance improvements. This will definitely create the perception of a better application and that perception wins clients and earns money.
But what is going on here? First, the files that are linked in the Bundles are downloaded as a single file instead of multiple files. This means fewer HTTP requests. Second, when possible, a minified version of the files are used instead of their uncompressed counterparts. Minified files have all possible whitespace removed and the smallest variable names possible. Most open source and commercial CSS and JS files have a minified version already built for you and those files are used instead of their uncompressed versions. If you look in the scripts folder, you will see bootstrap.js and bootstrap.min.js. The min file is the minified version. There are also versions for jQuery, jQuery Validation, and respond.js.
Using Bundles
The best way to enabled or disable bundling and minification is by modifying the debug value in the setting below in the system.web element of the web.config file.
<compilation debug="false" targetFramework="4.6.1"/>
You can toggle this setting on or off in the BundleConfig.cs file as well but that value will be over-ridden by the web.config file so why bother?
Using a bundle is very easy. In your layout or other cshtml file, using code similar to the below will allow you to use your own bundles.
@Styles.Render("~/Content/cssbundle")
@Scripts.Render("~/bundles/jsbundle")
What to watch out for
There are a couple of gotchas. First, you should keep the path to your bundles consistent to their location. For example, if you have a css file in the \Content\css folder and that css file has a reference to another css file in that folder, you will want to make sure the name of your bundle is ~/content/css/your_file_name_here or it won’t be able to find it. Second, be mindful of how you are bundling your files. Even a lazy loaded system such as Angular will download everything in a bundle, regardless of whether or not it is needed or not.
Conclusion
As the size of web apps continue to grow and grow and stretch every boundary, the value of Bundling and Minification continues to go up as well. Put it in your toolbox and use it. You should be able to do that now.