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帮助程序类来获取该属性吗？

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

Style Bundle的MVC CDN后备版

2 个答案: