[样式捆绑包的MVC CDN后备

Question

MVC是否有一种内置方式为样式表指定CDN后备？我正在尝试为jQuery Mobile Structure样式表设置一个备用。这是我在RegisterBundles方法中的代码：

var JQMstyleSheet = new StyleBundle("~/JQMstyle", "http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css").Include("~/theme/jquery.mobile.structure-1.3.1.css");
JQMstyleSheet.CdnFallbackExpression = "window.jQuery.mobile";
bundles.Add(JQMstyleSheet);

页面呈现时将其输出到html：

<script>
(window.jQuery.mobile)||document.write('<script src="/JQMstyle"><\/script>');
</script>

当CDN失败时，它不会像对我的javascript文件那样完美地动态添加样式表。我认为问题在于，当它应该是一种样式时，它正在尝试呈现脚本。除了CdnFallbackExpression以外，还有其他后备属性吗？

更新

System.Web.Optimization.StyleBundle的Microsoft文档将CdnFallbackExpression显示为可用属性，但是在说明中说：“获取由Scripts帮助器类呈现的脚本扩展...”http://msdn.microsoft.com/en-us/library/system.web.optimization.stylebundle(v=vs.110).aspx这是System.Web.Optimization.StyleBundle中的错误吗？该属性是否不应该通过引用Styles helper类？

Answer 1

TLDR;

检查我的解决方案，它提供了StyleBundle扩展方法来解决此问题。

Style Bundle Fallback

也

是，Microsoft ASP.NET优化框架中有一个错误，已记录在here中。

解决方案是将CdnFallbackExpression修改为一个javascript函数，该函数既检查样式表又加载回退，从而忽略Optimization Framework中的错误脚本。

有几个棘手的部分，尤其是检查样式表是否来自另一个域时，例如大多数CDN来源。

我在GitHub上有一个解决方案，在框架中解决该问题之前，您可以使用该解决方案；但是，我仍然要注意确定何时实际加载样式表的棘手部分。

Answer 2

这是我的RegisterBundles方法，它可以完美地工作。如果CDN失败，它会自动退回到本地脚本和样式。看看是否有帮助。

using System.Web;
using System.Web.Optimization;

    public static void RegisterBundles(BundleCollection bundles)
    {
        var jQueryCdn = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js";
        var jQueryUICdn = "https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js";
        var jQueryUICss = "https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/blitzer/jquery-ui.css";
        var jQueryValidateCdn = "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.min.js";
        var jQueryValidateUnobtrusiveCdn = "https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js";
        var modernizrCdn = "https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-3.5.0.js";
        var respondCdn = "https://ajax.aspnetcdn.com/ajax/respond/1.4.2/respond.min.js";
        var bootstrapCdn = "https://ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/bootstrap.min.js";
        var bootstrapCSSCdn = "https://ajax.aspnetcdn.com/ajax/bootstrap/4.3.1/css/bootstrap.min.css";

        bundles.UseCdn = true;

        bundles.Add(new ScriptBundle("~/bundles/jquery", jQueryCdn).Include(
                    "~/Scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryui", jQueryUICdn).Include(
                    "~/Scripts/jquery-ui-1.12.1.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval", jQueryValidateCdn).Include(
                    "~/Scripts/jquery.validate*"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryUnobtrusive", jQueryValidateUnobtrusiveCdn));

        bundles.Add(new ScriptBundle("~/bundles/modernizr", modernizrCdn).Include(
                    "~/Scripts/modernizr-*"));
        bundles.Add(new ScriptBundle("~/bundles/bootstrap", bootstrapCdn).Include(
                    "~/Scripts/bootstrap.js"));
        bundles.Add(new ScriptBundle("~/bundles/respond", respondCdn).Include(
                    "~/Scripts/respond.js"));
        //Styles
        bundles.Add(new StyleBundle("~/Content/bootstrapcss", bootstrapCSSCdn).Include(
                    "~/Content/bootstrap.css"));
        bundles.Add(new StyleBundle("~/Content/jqueryuicss",jQueryUICss).Include(
                    "~/Scripts/jquery-ui.css"));
        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/site.css"));
        //set to true before deployment to use CDN files
        BundleTable.EnableOptimizations = true;
    }