10.0.x
541 201 9965 Email Website
Contents
:
Search:

Home > Development Notes > Bundling and Minification

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.

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

Now you need to force the site to restart. You can accompish this by "touching" the /web.config file or recycling your website's app pool.

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.

Version 10.0.0 and 10.0.1

Version 10.0.0 and 10.0.1 of AspDotNetStorefront do not have the Client Resource Manger so must use the older syntax to bundle CSS and JavaScript:

CSS

@AspDotNetStorefront.Optimization.AdnsfBundler.RenderStyleBundle(
    bundlePath: Url.SkinUrl("css/bundled"),
    filePaths: new []
    {
        Url.AppRelativeSkinUrl("css/bootstrap.css"),
        Url.AppRelativeSkinUrl("css/font-awesome.css"),
        Url.AppRelativeSkinUrl("css/base.css"),
        Url.AppRelativeSkinUrl("css/style.css"),
    }
)

JavaScript

@* Bundle and minify JavaScript. *@
@AspDotNetStorefront.Optimization.AdnsfBundler.RenderScriptBundle(
    bundlePath: "~/scripts/bundled",
    filePaths: new[]
    {
        Url.AppRelativeSkinUrl("scripts/bootstrap.js"),
        "~/scripts/addtocart.js",
        ...
    }
)


Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo