Question

我正在创建一个asp.net mvc应用程序。我已经为脚本和样式表创建了捆绑软件，并且每个捆绑软件都使用了google cdn。我有两个问题： 1.如果谷歌的jquery和jqueryUI cdn失败，如何创建回退？ 2.是否必须为每个捆绑包创建一个后备广告（即样式捆绑包也是如此）？

这是我的bundleConfig.cs：

bundles.Add(new ScriptBundle("~/bundles/jqueryui", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js").Include(
"~/Scripts/jquery-ui-{version}.js"));


        bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval", "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js").Include(
                  "~/Scripts/bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css").Include(
 "~/Content/themes/base/core.css",
 "~/Content/themes/base/resizable.css",
 "~/Content/themes/base/selectable.css",
 "~/Content/themes/base/accordion.css",
 "~/Content/themes/base/autocomplete.css",
 "~/Content/themes/base/button.css",
 "~/Content/themes/base/dialog.css",
 "~/Content/themes/base/slider.css",
 "~/Content/themes/base/tabs.css",
 "~/Content/themes/base/datepicker.css",
 "~/Content/themes/base/progressbar.css",
 "~/Content/themes/base/theme.css"));



        BundleTable.EnableOptimizations = true;
        bundles.UseCdn = true;
    }

这是我的layout.cshtml

 <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")

    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Answer 1

我认为，将CDN捆绑在see here中没有多大意义。只要确保您使用的是缩小版本即可。

有关添加后备广告的信息，请参见以下示例：

在HTML的<head>中放入引导CSS和Modernizr：

<html>
<head>
    /* Referencing bootstrap CSS from CDN */
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    /* Referencing Modernizr from CDN */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

并在<body>底部添加这些JS引用：

<body>
    .
    .
    .

    /* Modernizer fallback */
    <script>if (typeof Modernizr === 'undefined') { document.write('<script src="/Scripts/modernizr-2.8.3.min.js"><\/script>'); }</script>

    /* jQuery CDN and fallback */
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="/Scripts/jquery-3.3.1.min.js"><\/script>');</script>

    /* jQuery UI CDN and fallback */
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script>if (typeof jQuery.ui === 'undefined') { document.write('<script src="/Scripts/jquery-ui.min.js"><\/script>'); }</script>

    /* popper CDN and fallback, this is only needed for bootstrap 4, remove for bootstrap 3 */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script>if (typeof (Popper) === 'undefined') { document.write('<script src="/Script/umd/popper.min.js"><\/script>') }</script>

    /* bootstrap CDN and fallback */
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>window.jQuery.fn.modal || document.write('<script src="/Scripts/bootstrap.min.js"><\/script>')</script>

    /* fallback for bootstrap stylesheet */
    <script>(function ($) { $(function () { if ($('body').css('color') !== 'rgb(33, 37, 41)') { $('head').prepend('<link rel="stylesheet" href="/Content/bootstrap.min.css">'); } }); })(window.jQuery);</script>

    /* jQuery Validate CDN and fallback */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script>if (typeof $().validate === 'undefined') { document.write('<script src="/Scripts/jquery.validate.min.js"><\/script>'); }</script>
</body>

我还建议您从Bootstrap 3 official page获取引导CDN，因为这些CDN具有integrity和crossorigin属性，可验证CDN文件的可靠性...（以及相同用于您的jQuery和jQuery.ui），see this for more info。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

更新

如果您想将CDN放在一个捆绑包中（不确定为什么吗？），这是从MS Documentation开始的方法：

///在CDN上添加到jquery的链接

var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include(
            "~/Scripts/jquery-{version}.js"));

这是将其添加到页面中的方法：

@Scripts.Render("~/bundles/jquery")

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script>

ASP.NET MVC5捆绑包如果Google jqueryUI使用捆绑包失败，如何退回到我的托管库？

1 个答案:

更新