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.
You can use Visual Studio Express 2015 for Web, Visual Studio 2015 Community Edition, or any of the premium editions for this recipe. We are going to use the project created in the Getting started with a Bootstrap-based SPA recipe, but feel free to substitute your own.
This recipe assumes that your browser of choice has developer tools that are able to capture network traffic. If you use Internet Explorer, you will need Internet Explorer 11 or higher, which is what this recipe assumes you are using.
Bundling and minification are important steps to remember when moving your code into production (even if just testing for production-like environments). Let's see how to do it:
- Build the application, and run it without the debugger by pressing Ctrl + F5 or navigating to Debug | Start Without Debugging from the menu.
- Navigate to the
http://localhost:37271/Managepage in your browser, and open the browser's developer tools. If you are using Internet Explorer 11, you can press F12 to open them. - Go to the Network tab (Ctrl + 4), and click on the Start Capturing (F5) button. In the browser window, press Ctrl + F5 to force a complete refresh of the page. The network trace should show that a lot of files are required to load the page. This can be seen in the following screenshot:
- Look at all those requests! If you want a faster loading page, you need to reduce this. Leaving the browser open, switch back to Visual Studio, and in the Solution Explorer window, find and open the
BundleConfig.csfile. ( It is located in the project'sApp_Startfolder.) - In this file, you will see the bundles defined for the project. Existing JavaScript files for this project are already configured. For example, look at how Bootstrap is bundled:
- When you add custom JavaScript to your project (typically, in the project's
Scriptsfolder), you will undoubtedly want the bundles file for your own custom JavaScript. To do that, you can define your own bundle by adding a new statement to theRegisterBundles()method as follows:bundles.Add(new ScriptBundle("~/bundles/customjs"). Include("~/Scripts/myJavaScript.js")); - The preceding code assumes that you have added a JavaScript file to your project using the name shown in bold (
myJavaScript.js). - Now is a good time for a checkpoint. Rebuild the solution, switch over to your browser, and perform a full page refresh (that is, press Ctrl + F5 in Internet Explorer). Assuming that the Network tab is still open in the developer tools, you should see that everything is still operating as expected.
- While you have defined the bundles, they still aren't actually being bundled or minified. Switch back to Visual Studio, and find and open the
Global.asax.csfile in Solution Explorer. In theApplication_Start()method, add the following highlighted line of code to enable optimizations, as shown in the following image:
Tip
The
EnableOptimizationsproperty forces bundling to occur. Without this call, bundling only occurs when running the site in the Release mode. In other words, when the debug =trueattribute of thesystem.web.compilationtag of theweb.configfile is specified, bundling optimizations are disabled. - Rebuild the application, switch over to the browser, and perform a full page refresh again. The network trace will now show that JavaScript bundles are being downloaded instead of individual script files, and that the download size of the bundle files is less than the download size of the original JavaScript files, as shown in the following screenshot:
- It's worth confirming that the scripts are not only bundled, but also minified. Navigate to the Debugger tab (Ctrl + 3) in the browser developer tools, and select the
bootstrapfile from the script's' drop-down list, as shown in the following screenshot:
Once the file is open, as you can see in the following screenshot, not only has the whitespace been removed, but the variable names have also been shortened, and the code optimized. Exactly what you should expect minification to do:
Inside the ASP.NET runtime, when a browser requests a page with a bundle in it, ASP.NET will either render the names of the individual files in the bundle or the bundle name itself, depending on whether optimizations are turned on or not. When optimizations are on, browsers will request bundles by their name, and ASP.NET will group the individual bundled files into a single larger file before minifying them and sending the result back to the browser. The resulting minified file is cached by ASP.NET so that future requests do not impact site performance.
You can create your own custom bundle types by subclassing the Bundle class. This allows you to provide your own minification rules and bundling mechanisms, which is useful if you want to support web technologies such as LESS, Sass, or CoffeeScript.