在 MVC 脚本包中使用 CDN。我错过了什么？答案

【问题标题】：Using CDN in MVC script bundle. What am I missing?在 MVC 脚本包中使用 CDN。我错过了什么？
【发布时间】：2013-03-02 08:04:42
【问题描述】：

我正在尝试使用 CDN 加载 jquery。我已经阅读了this 的文章，这似乎应该非常简单。

我的脚本包定义如下。

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js").Include(
                        "~/Scripts/jquery-{version}.js"));

我将它包含在页面中如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

但是当我查看 firebug 时，似乎 jquery 是从 localhost 加载的。

我已经尝试过发布和调试版本。我错过了什么？我认为这应该很简单。谢谢。

【问题讨论】：

查看这篇相关且非常有趣的帖子asp.net/mvc/tutorials/mvc-4/bundling-and-minification

标签： c# asp.net-mvc cdn

【解决方案1】：

实际上，当使用最新版本的 ASP.NET MVC 时，您可以更短地编写 @RaviGadag 他的方法。这样您就不必自己在布局中编写回退：

public static void RegisterBundles(BundleCollection bundles)
{

  bundles.UseCdn = true;

  var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js";
  var jqueryBundle = new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-{version}.min.js");
  jqueryBundle.CdnFallbackExpression = "window.jQuery";
  bundles.Add(jqueryBundle);

  // ...

  BundleTable.EnableOptimizations = true;
}

内容交付网络 (CDN) 中可用的 jquery 版本： http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0

【讨论】：

应该是“window.jQuery”，而不是“window.jquery”。 JavaScript 区分大小写。

【解决方案2】：

确保您未处于调试模式。

  bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js")

设置BundleTable.EnableOptimizations = true; //如果你想使用调试模式

在发布模式下会从 CDN 请求 jQuery，并且 jQuery 的调试版本将在调试模式下在本地获取。什么时候使用 CDN，您应该有一个回退机制以防 CDN 请求失败。

如果 CDN 请求失败，您可以提供回调

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

【讨论】：

他们可能投了反对票，因为您的 CDN 后备将脚本引用放在了头部，这通常是不明智的。
您可以在BundleConfig类中指定CDN后备表达式，而不是编写JS代码，如下所示：jquery.CdnFallbackExpression = "window.jQuery";
不应该是BundleTable.EnableOptimizations = false使用调试模式吗？
@MichaelTranchida 我认为 Ravi Gadag 的意思是 EnableOptimizations = true 允许您像处于发布模式一样“调试”捆绑和缩小

【解决方案3】：

以debug="false" 模式运行您的应用程序或使用BundleTable.EnableOptimizations = true;

【讨论】：

FWIW：我不确定有多少人知道这个属性...我在这种情况下使用 if (Debugger.IsAttached) 来通过“调试”脚本和“else”加载我手动触发 BundleTable.EnableOptimizations = true 而不是依赖 web.config。如果您在使用 IIS 与 Asp.net 开发主机的环境中工作，这意味着如果您需要调试脚本，最坏的情况是您必须返回并记住运行 IDE，然后刷新页面以获取返回纯文本详细脚本。希望这对某人有所帮助。
对不起，忘了说。这也确保我永远不会忘记在部署等时打开优化或以正确的方式编译。这通常不是生产问题，但它可能是 QA 站点等的问题，您希望确保您的测试团队是使用缩小版本以确保稳定性。
BundleTable.EnableOptimizations = true; 会一直开启缩小功能
@DaveJellison 我的猜测是大多数开发人员无法直接访问阶段和生产环境中的服务器，尤其是在使用负载平衡时，因此附加调试器并不是一个真正的选择。
对，我的评论自然只适用于您的本地环境。这对 OP 的观点没有帮助，只是你可以在本地开发中使用的一个技巧来测试缩小和“标准”CSS/JS，然后再发布一些不起作用的东西并浪费时间......特别是如果你想要测试您的 CDN，这通常可以直接从您的 localhost...