javascript - ASP.NET MVC Bundle 不在登台服务器上呈现脚本文件。它适用于开发服务器

Question

在我们的 ASP.NET MVC 4 网络应用程序中，我们的 BundleConfig.cs 包括以下内容:

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

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

当我们在开发服务器上查看主页的 html 时，我们可以看到以下脚本标记，即使 web.config 中的 Debug模式设置为 true 为 <compilation debug="true" targetFramework="4.0" /> :

<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/AFR/Scripts/modernizr-2.5.3.js"></script>
<script src="/AFR/Scripts/jquery-1.7.1.js"></script>
<script src="/AFR/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/AFR/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/AFR/Scripts/jquery.validate.js"></script>
<script src="/AFR/Scripts/jquery.validate.unobtrusive.js"></script>

但是当我们在暂存服务器上部署应用程序并查看主页的 html(查看源代码)时，上面所有的脚本标签都没有 <script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script> 除外。缺失。我们已验证这些标记中提到的所有文件都在脚本文件夹中。文件夹结构与开发机器上的完全相同。在暂存服务器上，web.config fie 有 <compilation targetFramework="4.0" />这意味着，默认情况下，debug="false"。

因此，一些 JavaScript 函数在登台服务器上失败。暂存和开发机器都是 Windows 2012。

请帮忙。谢谢。

Answer 1

根据您的评论，我们需要复习一下 Bundling 机制在 MVC 中的工作原理。

编辑:基于VSDev 下方的评论, 你需要确保 WebGrease已安装到您的项目中。 NuGet最简单的方法是安装这个包。

当你设置一个 bundle configuration 时(上面的例子不是为了说明)

bundles.Add(new ScriptBundle("~/bundles/mainJs")
      .Include("~/Scripts/mainSite.js")
      .Include("~/Scripts/helperStuff.js"));

然后，在您的 View 中，调用类似 @Scripts.Render("~/bundles/mainJs") 的内容。当您的 web.config 设置为调试编译时或您使用BundleConfig.cs 文件中的以下行显式关闭捆绑

BundleTable.EnableOptimizations = false;

然后，在你的 View 中，你会看到如下渲染出来的

<script src="/Scripts/mainSite.js" type="text/javascript"></script>
<script src="/Scripts/helperStuff.js" type="text/javascript"></script>

这些是组成我们的 bundle 的单独项目，未压缩并单独列出。这些在 Debug模式下单独列出的原因是您可以调试脚本并在编写脚本时查看它们(实际变量名称等)。

现在，当我们不在调试编译中并且没有关闭 EnableOptimizations 功能时，MVC 会将这些文件合并到我们的包中，压缩(缩小)它们并仅输出一个脚本标签.

<script src="/bundles/mainJs?v=someBigLongNumber" type="text/javascript"></script>

请注意，来源与 bundle 配置中的 bundle 名称相同。此外，?v= 之后的数字将在您更改该包中的文件时随时更改。这是为了帮助防止客户端浏览器缓存旧的 js 和 css 文件。

您的脚本仍然存在并正在输出，但它们正在被压缩并合并到一个名为 /bundles/mainJs 的文件中。此功能呈现给

A) 压缩文件并减少传输的信息，

B) 减少调用网站以检索呈现页面所需内容的次数。

没有遗漏任何东西，听起来一切都在按预期工作。在生产站点中，缩小使得这些文件几乎无法读取，因此缩小在调试时不生效。

至于为什么 jQuery UI 仍然是单个 JS 文件，请确保有人没有将其硬编码到您的布局 View 中。至于 JS 错误，它可能是您的开发箱中存在的错误，或者可能是某些东西没有正确压缩(但是，在我所有的 MVC 开发中，由于缩小效果不佳，我没有看到 JS 错误)。