Bundling and Minification

Bundling and minifcation are two separate concepts that work together to allow you to deliver JavaScript and CSS to your users faster. This is increasingly important as more and more traffic to your website begins to be from mobile devices with limited bandwidth.

Bundling allows you to group several different files into one file so that only one request is required to get your JavaScript or CSS.

Minification takes a file and makes its contents as small as possible to minimize download time.

Turn on Bundling and Minification

To enable bundling and minification set the EnableBundlingAndMinification key in the /AppSettings.config file to true. My default, this should already be enabled. 

<add key="EnableBundlingAndMinification" value="true" />

Now you need to force the site to restart. You can accomplish this by "touching" the /web.config file or recycling your website's app pool. By default, you won't have access to this file but you can submit a ticket to our support team to help restart your site. 

Test it out

After your site restarts you should be able to view source code in your browser and notice that your CSS and javascript files have been bundled together into one file like this:

CSS

<link href="/skins/default/css/_skin_bundle?v=DdOwK9UuYy_tJfVen6ZU3oXZqrWxigZsRr6UtfLtYOA1" rel="stylesheet"/>

Javascript

<script src="/scripts/_skin_bundle_93bc87ad5af5c7fcfad9fa126ad55b81?v=qo1UpN_jTR6toDUFUZEDaPIc7GTD4e79nk-B9xn6oxE1"></script>

If you click through to look at the bundled file in your browser you should see that all of the contents are on one really long line.

Troubleshooting

If the bundling and minification does not work make sure that your skin CSS and Javascript are included using the Client Resource Manager.

If you notice one file that is not being bundled and minified make sure to add it to the appropriate bundle.

If you notice minification errors when viewing the output of the minified file there is likely something about your CSS file that .Net minification is failing on. There should be a human readable error in the top of the minified CSS file. @import for example will not minify properly.