MVC Bundling in Umbraco 2

In Part 1 I outlined how to use MVC bundling with an Umbraco install. In this part I will go over some common scenarios and the issues you might encounter when using bundling.

External references

You can reference resources that are external libraries or if you are using a CDN as you would normally. You can also specify fall back local versions should the external file not be available. This can be useful when for example you have subsequent scripts that rely on the previous includes.

bundles.UseCdn = true;
Bundle jquery = new ScriptBundle("~/bundles/jquery",
"//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js").Include(
"~/scripts/jquery.js");
jquery.CdnFallbackExpression = "window.jQuery";
bundles.Add(jquery);

The fallback expression is used to determine if the fallback should be used, if you look at the resulting page output you will see how this expression gets used.

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"><\/script>
<script>
  (window.jQuery)||document.write(
    "<script src=”/scripts/jquery.js"><\/script>")
</script>

Minification issues with third party scripts

You can add transforms to the bundles to automatically minimize script files. This means you can edit scripts and not worry about generating minimized versions prior to deployment.

One issue with this is that the transform can break some third party scripts. In this scenario you may or may not be able to fix the issue. A last resort solution is to simply have a separate scripts bundle that does not minimize the scripts.

The bundling system will try to optimize your bundles wherever possible, this means that even if you specifically include a non minimized version of a file it will always check if a minimized version exists and include that instead. Even if you do not add the minimization transform to the bundle it will still look for minimized versions of the file. The only way to ensure that the non minimized version is included is to completely remove the minimized files from the directory.

Script ordering not maintained in bundle

If you have several script files referenced in your project and the order in which these files is included is important then you may need to force the bundling system to maintain the order of the includes. By default the bundling system does not necessarily add the files in the order you specify. You can implement the IBundleOrderer interface to force the ordering.

    internal class AsIsBundleOrderer : IBundleOrderer
    {
        public virtual IEnumerable OrderFiles(BundleContext context, IEnumerable files)
        {
            return files;
        }
    }

    internal static class BundleExtensions
    {
        public static Bundle ForceOrdered(this Bundle sb)
        {
            sb.Orderer = new AsIsBundleOrderer();
            return sb;
        }
    }

Control over resulting mark-up

By default when you call the render method to output the script or style-sheet references you will get a plain html link or script tag. You may want to control how the mark-up is generated and luckily there is another method that allows you to do that.

@Scripts.RenderFormat(@"<script src="" async></script>", "~/bundles/js")

This will output the tags as you specify

<script src="/bundles/js?v=yJ64W3mzP3IKe5Q4DbSlPT-SaA2nog_3XGkxlN4kCN41" async></script>