Adding bundling and minification to JavaScript and CSS files

One of the 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 compress any resources that are requested to reduce bandwidth.

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) and then 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; in this recipe, you'll add bundling and minification to a site and see how it impacts your development activities.

Getting ready

We're going to use the project from the previous recipe, Understanding the JavaScript editor improvements. If you haven't already done so, complete that recipe first.

If you...