Bundling and Minification

Modified on Tue, 27 Feb 2024 at 10:22 AM

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:


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


<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.


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

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article