使用CDN在单个捆绑包中添加多个脚本/样式

Question

我正在尝试利用Azure CDN尽快加载我的捆绑包。

我正在尝试在每个捆绑包中添加多个不同的文件，在网络选项卡中我可以看到它只加载'cdnAddress'而不是其中的不同文件，因此每个捆绑包只会加载包含在' cdnAddress'。

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

上面的示例显示我正在尝试将两个不同的CSS文件放入同一个包中，因此我只能在使用这两个包的页面上发出1个请求。但是，CDN路径只能提交一次。

我想将'cdnAddress'设置为我的CDN的根网址，这可能吗？如果没有，我如何在不制作两个不同的包的情况下实现我的目标。

由于我有很多捆绑包，我正在寻找一个易于维护的解决方案，我可以告诉它我的CDN在哪里，让它找出文件的CDN路径，因为它们是我网站的镜像。当我在CMS上工作时，也可能没有配置CDN，因此CDN路径将为空。

Answer 1

  

我想将'cdnAddress'设置为我的CDN的根网址，这可能吗？如果没有，我如何在不制作两个不同的包的情况下实现我的目标。

AFAIK，您无法在单个捆绑中提供多个CDN路径。 ScriptBundle.Include可以包含多个本地虚拟路径。

您可以按照以下方法实现目标：

• 为每个CDN路径定义捆绑包;

• 您可以手动合并所有相关文件并将其上传到您的cdn路径，并将此cdn路径与多个本地虚拟路径一起使用。

<强>示例：

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/bootstrap", "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;