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

【问题标题】：Add Multiple Scripts / Styles in a Single Bundle Using a CDN使用 CDN 在单个包中添加多个脚本/样式
【发布时间】：2020-02-04 16:05:59
【问题描述】：

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

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

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 的根 url，可以吗？如果没有，我怎样才能在不制作两个不同的捆绑包的情况下实现我的目标。

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

【问题讨论】：

标签： c# asp.net-mvc azure bundle cdn

【解决方案1】：

我想将“cdnAddress”设置为我的 CDN 的根 url，可以吗？如果没有，我怎样才能在不制作两个不同的捆绑包的情况下实现我的目标。

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/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;

【讨论】：