Right underneath that file we have bootstrap.min.js. This is known as a minified version of the same file. It’s functionally equivalent to the first file, but white space and line breaks have been removed, and variable names have been shortened usually to a single letter if possible. Up in the content folder we have several CSS files. If we look at bootstrap.css, and then bootstrap.min.css we see the same kind of transformation.
It won’t be quite as dramatic with CSS files since we can’t actually change selector names or properties, but by using this and other minified files we’ll get a performance benefit by being able to serve fewer bytes. In general, we’ll want to use non-minified files for development and minified files during production to improve performance. In the layout file we see several calls to styles.render, and scripts.render at the top and the bottom.
Each of these will render the link tags or the script tags for a set containing one or more files known as a bundle. The path parameter here is a virtual request path for each bundle. These bundles are defined inside the bundle config class which is in the app start folder. This class contains the registered bundles method. Inside we have multiple calls to bundles.add which each take an instance of script bundle or style bundle, and these are initialized with a virtual path for the bundle.
Running in debug mode this will create a bundle including jquery.validate.js and jquery.validate.unobtrusive.js. Files that include vsdoc, intellesense, or have the map extension are for debugging purposes only, and generally won’t be referenced on our webpages. Now the reason we want to use bundles is not just to group files together and use wildcards, they’re also going to allow us to easily switch between minified and non-minified versions of files depending on whether we’re running in debug mode or release mode.
Currently in web.config under system.web in the compilation element we have debug set to true. If we turn that off, and we’re running in release mode, bundles will also allow us to combine multiple files in a bundle into a single file, in order to decrease the total number of requests that the client has to make. This behavior can also be overridden in the bundle config class by setting bundletable.enableoptimizations to true, which is there in our project template already.
Let’s start off by setting it to false, to disable minification, and combining of files, and we’ll take two examples from our layout file. The first is the style bundle that’s being rendered here with the virtual path content/css. According to our bundle config setup this bundle contains two files, bootstrap.css and site.css. With debug set to true and enable optimization set to false, we should expect to see two link elements rendered that correspond to these two CSS files, and although bootstrap.css has a minified version we won’t see that until we set enable optimizations to true.
Let’s also pay attention to the jquery bundle. This should just give us a single non-minified file containing whatever version of jquery appears in this folder. Let’s start this site with control F5, and take a look at the source for the homepage now. At the bottom we have the jquery file from the jquery bundle, and at the top we have two link elements referencing the style sheets from the content/css bundle.
Now let’s go ahead and set enable optimizations to true, and we’ll do a build which we can do with control shift b, or from the solution explorer build, and then we’ll refresh in Firefox, and take a look at the source again. Now we see a single style sheet element, and if we click that we can see that it’s minified, and what actually happened was because site.css didn’t have a minified version it just went ahead and created one, and combined it with bootstraps minified CSS file.
Note that when a minified file exists it will be used, and the non-minified file will be ignored, but the minified version will be further minified if possible and will have any comments removed. At the bottom we have the jquery bundle which just contains the one file again but a minified version. Notice that there are also version IDs appended to these paths. Those will change when the underlying files change forcing clients to fetch them from the server instead of going to their caches.
Developers who are new to these tools often ask about content delivery networks. For example, if you want to get your jquery script from Google instead of the local server. Click on this parameter for the script bundle, and do control, shift, space, and then look at the second overload which takes a CDN path. We could add a URL for the minified jquery script on Google CDN here, and one other thing we’ll have to do is set bundles.ucdn to true.
Now if I build with control, shift, b, refresh Firefox, and view the source again, down here I should see Google and I do, but it will still serve it locally when optimizations are disabled. That should give you some very useful tools to work with when managing scripts in CSS files that will save you some time, and improve the performance of your application.
- Exploring ASP.NET routing
- Applying action selectors
- Working with layouts
- Employing HTML helpers
- Displaying and validating model properties
- Generating database objects with Entity Framework
- Adding transactions
- Authenticating users
- Unit testing
- Performing partial page updates with Ajax and jQuery
- Deploying ASP.NET MVC applications