样式包的 MVC CDN 后备答案

【问题标题】：MVC CDN fallback for Style Bundle样式包的 MVC CDN 后备
【发布时间】：2014-01-27 02:24:24
【问题描述】：

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 辅助类来实现吗？

【问题讨论】：

JQMstyleSheet.CdnFallbackExpression = "window.jQuery.mobile";你为什么放这个？
如果 cdn 失败，我需要加载样式表。检查 window.jQuery.mobile 会告诉我 jquery mobile 的 cdn 下载是否失败，那么我知道样式表 cdn 下载很可能也失败了。我不确定如何使用 CdnFallbackExpression 检查样式表是否存在。

标签： jquery asp.net-mvc-4 cdn bundling-and-minification

【解决方案1】：

这是我的 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;
    }

【讨论】：

【解决方案2】：

TLDR；

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

Style Bundle Fallback

还有

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

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

有几个棘手的部分，尤其是检查来自另一个域的样式表是否正在加载，就像大多数 CDN 源一样。

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

【讨论】：