如何管理多个Cdn文件及其CdnFallBackExpression?

时间:2015-04-01 20:55:29

标签: .net asp.net-mvc kendo-ui bundle cdn

如果我想通过bundleconfig.vb文件管理我的Cdn文件并从Cdn加载Kendo-ui,我需要创建2个这样的包:

    Dim kendoWebBundle = New ScriptBundle("~/bundles/kendo", kendoCndWeb).Include("~/Scripts/kendo/kendo.web.min.js")
    kendoWebBundle.CdnFallbackExpression = "typeof kendo"
    bundles.Add(kendoWebBundle)

    Dim kendoAspBundle = New ScriptBundle("~/bundles/kendoMvc", kendoCndAsp).Include("~/Scripts/kendo/kendo.aspnetmvc.min.js")
    kendoAspBundle.CdnFallbackExpression = "typeof kendo"
    bundles.Add(kendoAspBundle)

然而,我的第二个后备表达式不起作用,因为kendo将被定义:

输出:

<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.web.min.js"></script>
<script>(typeof kendo)||document.write('<script src="/Gabarit.Web/bundles/kendo"><\/script>');</script>

<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.aspnetmvc.min.js"></script>
<script>(typeof kendo)||document.write('<script src="/Gabarit.Web/bundles/kendoMvc"><\/script>');</script>

是否有一些kendo.aspnetmvc回退表达式或者我是否需要同时管理我的Cdnfallback(在bundleconfig中没有fallbackExpression,手动验证kendo类型,如果未定义,则在本地加载所有kendo文件)?

如果我使用第二个选项,如果我的CDN发送kendo.web.min.js而不是kendo.aspnetmvc.min.js会发生什么?我觉得kendo会定义,不会发生本地回退......

2 个答案:

答案 0 :(得分:2)

通过本地脚本回退从CDN推荐Kendo UI

这是你应该做的Telerik suggests

只测试单个脚本,如果失败则在本地加载所有内容。所以不要测试kendo.all.min.js,然后测试一下kendo.aspnetmvc.min.js,如果CDN有问题,你可能没有得到任何一个。

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script>
    if (typeof kendo == "undefined") {
        // checking for loaded CSS files is cumbersome,
        // that's why we assume that if the scripts have failed, so have the stylesheets

        // fallback to local Kendo UI stylesheets
        document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/path/to/local/kendo.common.min.css" %3C/%3E'));
        document.write(decodeURIComponent('%3Clink rel="stylesheet" href="/path/to/local/kendo.blueopal.min.css" %3C/%3E'));

        // fallback to local Kendo UI scripts
        document.write(decodeURIComponent('%3Cscript src="/path/to/local/kendo.all.min.js" %3E%3C/script%3E'));
        // also add kendo.aspnetmvc.min.js or kendo.timezones.min.js, if needed
    }
</script>

ASP.NET Web优化框架

就像你现在正在做的那样,对不起下面的C#。只需将您的Kendo UI脚本放在单独的包中,并指定typeof kendo == undefined后备表达式。

以相同的方式测试CSS,如果CDN没有提供脚本,那么你的CSS也不会在那里。

从NuGet获取Microsoft.AspNet.Web.Optimization包。 现在,在BundleConfig中,您可以设置捆绑包,不仅包括CdnPath,还包括CdnFallbackExpression:

public static void RegisterBundles(BundleCollection bundles)
{        
    bundles.UseCdn = true;
    var kendo = new ScriptBundle("~/bundles/scripts/kendo", "http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js").Include("~/Scripts/kendo/kendo.all.min.js");
    kendo.CdnFallbackExpression = "typeof kendo == undefined";
    bundles.Add(kendo);

    var kendoMvc = new ScriptBundle("~/bundles/scripts/kendoMvc", "http://cdn.kendostatic.com/2015.1.318/js/kendo.aspnetmvc.min.js").Include("~/Scripts/kendo/kendo.aspnetmvc.min.js");
    kendoMvc.CdnFallbackExpression = "typeof kendo == undefined";
    bundles.Add(kendoMvc);      

    BundleTable.EnableOptimizations = true;
}

答案 1 :(得分:0)

将后备表达式设置为“ kendo”将导致使用本地资源。

我已经修改了@Nicholas代码以反映这一点:

public static void RegisterBundles(BundleCollection bundles)
{        
    bundles.UseCdn = true;
    var kendo = new ScriptBundle("~/bundles/scripts/kendo", "http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js").Include("~/Scripts/kendo/kendo.all.min.js");
    kendo.CdnFallbackExpression = "kendo";
    bundles.Add(kendo);

    var kendoMvc = new ScriptBundle("~/bundles/scripts/kendoMvc", "http://cdn.kendostatic.com/2015.1.318/js/kendo.aspnetmvc.min.js").Include("~/Scripts/kendo/kendo.aspnetmvc.min.js");
    kendoMvc.CdnFallbackExpression = "kendo";
    bundles.Add(kendoMvc);      

    BundleTable.EnableOptimizations = true;
}