Add Multiple Scripts / Styles in a Single Bundle Using a CDN

Question

I am trying to utilise Azure CDN to make my bundles load as quickly as possible.

I am trying to add multiple different files in each bundle and in the network tab I can see it is only loading the 'cdnAddress' not the distinct files inside it, so each bundle will only load the file which is included in 'cdnAddress'.

bundles.Add(new StyleBundle("~/Resources/CSS/Plugins/Effects", cdnAddress).Include("~/Content/Styles/Animate/animate.min.css").Include("~/Content/Styles/Hover/hover-min.css"));

The example above shows that I am trying to put two different CSS files into the same bundle so I can only make 1 request on pages that use both bundles. However the CDN path can only be submitted once.

I want to set 'cdnAddress' to be the root url of my CDN, is that possible? If not, how can I achieve my goal without making two different bundles.

As I have a lot of bundles I am looking for an easy to maintain solution where I can tell it where my CDN is and let it figure out the CDN paths for the files, as they are a mirror of my website. As I am working on a CMS, it is also possible for a CDN to not be configured, and therefore the CDN path would be null.

Answer 1

I want to set 'cdnAddress' to be the root url of my CDN, is that possible? If not, how can I achieve my goal without making two different bundles.

AFAIK, you could not serve multiple CDN paths in a single bundle. And ScriptBundle.Include could contain several local virtual paths.

You could follow the approaches below to achieve your purpose:

• Define the bundle for each CDN path;

• You could combine all related files manually and upload them to your cdn path and use this cdn path with several local virtual paths.

Sample:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/respond.js"));
//TO

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/bootstrap", "http://yourCdnSite/Scripts/bootstrap.js").Include(
            "~/Scripts/bootstrap.js"));

bundles.Add(new ScriptBundle("~/bundles/respond", "http://yourCdnSite/Scripts/respond.js").Include(
            "~/Scripts/respond.js"));
BundleTable.EnableOptimizations = true;

//OR

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/bootstrap", "http://yourCdnSite/Scripts/<the-combination-of-bootstrap.js-and-respond.js>.js").Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/respond.js"));
BundleTable.EnableOptimizations = true;