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.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article