• 10.0.0 - 10.0.26
    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

    NOTE: Version 10.0.0 and 10.0.1 of AspDotNetStorefront do not have the Client Resource Manager 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