21

Let's suppose I have these two script bundles configured:

bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").Include(
        "~/Content/Scripts/jQuery/jquery-2.1.1.js",
        "~/Content/Scripts/Bootstrap/bootstrap.js"));

bundles.Add(new ScriptBundle("~/Scripts/jQuery").Include(
        "~/Content/Scripts/jQuery/jquery-2.1.1.js"));

As you can see, ~/Scripts/Boostrap uses a jQuery JavaScript file and a Bootstrap one. This is because the Bootstrap one requires jQuery to work.

On the other hand, ~/Scripts/jQuery is composed of only the jQuery file.

I want to have two bundles in case a view only needs jQuery and not Bootstrap.

However, I am replicating code here, I am defining the jQuery JavaScript file path twice.

Is there a way to tell the ~/Scripts/Boostrap bundle to use or "inject" another bundle?

Something like this:

bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").UseBundle("~/Scripts/jQuery").Include(
        "~/Content/Scripts/Bootstrap/bootstrap.js"));
4
  • Why not just have the jQuery bundle be only jQuery and the bootstrap bundle be only bootstrap. On your view, include jQuery and if necessary, bring in the bootstrap bundle. I don't see what including jquery in two separate bundles would really buy you other than saving one script tag in your HTML.
    – Tommy
    Dec 18, 2014 at 18:41
  • @Tommy I could do that, and the work of the client doing one more request is barely noticeable, but if there's a more optimal way to accomplish what I want, and still making the client just send one single request for both scripts, it would be great Dec 18, 2014 at 18:44
  • Unfortunately, there's nothing that can be said here other than, no, it's not possible. There's no way to reference a bundle in another bundle. Dec 18, 2014 at 19:19
  • From a programmers point of view I want to have two bundles in case a view only needs jQuery and not Bootstrap sounds perfectly logical from a world where we are uninformed about caching. As soon as caching is involved, the idea of bundles per view is actually worse in performance than multiple scripts per view beyond the first request (more often than not). Dec 18, 2014 at 20:53

2 Answers 2

13

Make a script bundle include another script bundle

Not directly using the Bundling class.

Let say in your scenario that the business decides to only send a single bundle to the client for every request. You've decided to bundle all the scripts needed for each controller (in this magical world). You might start off with something like this:

bundles.Add(new ScriptBundle("~/Scripts/Home")
                .Include("~/Content/Scripts/jQuery/jquery-2.1.1.js",
                         "~/Content/Scripts/Bootstrap/bootstrap.js"
                         "~/Content/Scripts/Home.js"));

bundles.Add(new ScriptBundle("~/Scripts/Account")
                .Include("~/Content/Scripts/jQuery/jquery-2.1.1.js",
                         "~/Content/Scripts/Bootstrap/bootstrap.js"
                         "~/Content/Scripts/Account.js"));

Then realizing that .Include(string[]) simply takes an array of string, you could DRY your code into something like:

var commonScripts = new List<string>()
{
    "~/Content/Scripts/jQuery/jquery-2.1.1.js",
    "~/Content/Scripts/Bootstrap/bootstrap.js"
};

var homeScripts = new List<string>()
{
  "~/Content/Scripts/Home.js"
};

bundles.Add(new ScriptBundle("~/bundles/home/")
                .Include(commonScripts.Concat(homeScripts).ToArray()));

var accountScripts = new List<string>()
{
  "~/Content/Scripts/Account.js"
};

bundles.Add(new ScriptBundle("~/bundles/account/")
                .Include(commonScripts.Concat(accountScripts).ToArray()));

I don't recommend the business reasons behind this solution, but I think the logic that solves it could be used similarly to solve your problem.

If you think you're going to possibly have duplicates you could also:

                .Include(commonScripts.Concat(accountScripts)
                                      .Distinct()
                                      .ToArray()));

Personally I wouldn't include jQuery or BootStrap in bundles, as they are available from many CDNs online for free which; A means I use less of my bandwidth, and B the client may have already downloaded the scripts I need (The reasons CDNs exist for common scripts/styles anyway).

11

You could also consider creating a ComposableBundle wrapper class that allows you to compose bundles with the .UseBundle(someBundle) syntax.

For example the following class and extensions methods:

public class ComposableBundle<T> where T : Bundle
{
    private T _bundle;
    private List<string> _virtualPaths = new List<string>();

    public ComposableBundle(T bundle)
    {
        _bundle = bundle;
    }

    public string[] VirtualPaths
    {
        get { return _virtualPaths.ToArray(); }
    }

    public T Bundle
    {
        get { return _bundle; }
    }

    public ComposableBundle<T> Include(params string[] virtualPaths)
    {
        _virtualPaths.AddRange(virtualPaths);
        _bundle.Include(virtualPaths);
        return this;
    }

    public ComposableBundle<T> UseBundle(ComposableBundle<T> bundle)
    {
        _bundle.Include(bundle.VirtualPaths.ToArray());
        return this;
    }
}

public static class BundleExtensions
{
    public static ComposableBundle<T> AsComposable<T>(this T bundle) where T : Bundle
    {
        return new ComposableBundle<T>(bundle);
    }

    public static ComposableBundle<T> Add<T>(this BundleCollection bundles, ComposableBundle<T> bundle) where T: Bundle
    {
        bundles.Add(bundle.Bundle);
        return bundle;
    }
}

Would allow you to configure your bundles like this:

var jQueryBundle = bundles.Add(new ScriptBundle("~/bundles/jquery").AsComposable()
                            .Include("~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").AsComposable()
                .UseBundle(jQueryBundle)
                .Include("~/Scripts/jquery-ui-{version}.js"));
6
  • The wrapper is good, now i also want to order the bundle files using this post , how can mix both ?
    – Shaiju T
    Apr 5, 2017 at 14:49
  • 1
    Its been a while since i wrote this, but I think you should be able to add another fluent method UseOrderer(orderer) where you set _bundle.orderer. I would suggest give that a try and open a new question if it doesn't work. Apr 5, 2017 at 15:16
  • Thanks for responding , I tried but I am getting error, here is the question.
    – Shaiju T
    Apr 6, 2017 at 11:07
  • What was your reasoning behind UseBundle rather than IncludeBundle? I presume you could chain UseBundle, which to me means you'd want to continue using the existing phrasing (Include).
    – Sinjai
    Feb 12, 2018 at 1:11
  • Also, not that it matters much, ComposableBundle<T>.UseBundle() calls .ToArray() on an array.
    – Sinjai
    Feb 12, 2018 at 2:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.