Adding bundling and minification to JavaScript and CSS files

One of the most common techniques for improving website performance is to reduce the number of requests a browser needs to make in order to get the resources required for the page, and to reduce the size of the data requested.

When it comes to both JavaScript and CSS, this generally means combining all of the files of the same type into a single large file (bundling), removing unnecessary whitespace from them, and renaming variables to use the minimum amount of space possible while still leaving the functionality unchanged (minification).

Since version 4.5, ASP.NET supports automatic bundling and minification. By having these processes applied in an automatic way, you can work with the unmodified files to make development easier, while your users get the benefit of the optimized files.

In this recipe, you'll add bundling and minification to a site, and see how it impacts your development activities.

Getting ready

You can use Visual...