C# MVC4 - 当优化设置为 true 时捆绑不起作用

MVC4 - Bundling does not work when optimizations are set to true

提问by Stan

I wonder what I don't do correct here. I am using ASP.NET C# MVC4 and I want to take use of new css/js optimization feature.

我想知道我在这里做错了什么。我正在使用 ASP.NET C# MVC4，我想使用新的 css/js 优化功能。

Here is my HTML part

这是我的 HTML 部分

@Styles.Render("~/content/css")

Here is my BunduleConfig.cspart

这是我的BunduleConfig.cs部分

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

// BundleTable.EnableOptimizations = true;

Output (works):

输出（作品）：

<link href="/content/css/reset.css" rel="stylesheet"/>
<link href="/content/css/bla.css" rel="stylesheet"/>

However when I uncomment BundleTable.EnableOptimizations = true;html output looks like this

但是，当我取消注释BundleTable.EnableOptimizations = true;html 输出时，看起来像这样

<link href="/content/css?v=5LoJebKvQJIN-fKjKYCg_ccvmBC_LF91jBasIpwtUcY1" rel="stylesheet"/>

And this is, of course is 404. I have no idea where I did something wrong, please help, first time working with MVC4.

这当然是 404。我不知道我哪里做错了，请帮忙，第一次使用 MVC4。

采纳答案by dodexahedron

I imagine the problem is you putting the bundle at a virtual URL that actually exists, but is a directory.

我想问题是你把包放在一个实际存在的虚拟 URL 上，但它是一个目录。

MVC is making a virtual file from your bundle and serving it up from the path you specify as the bundle path.

MVC 正在从您的包中创建一个虚拟文件，并从您指定为包路径的路径提供它。

The correct solution for that problem is to use a bundle path that does not directly map to an existing directory, and instead uses a virtual file name (that also does not map to a real file name) inside that directory.

该问题的正确解决方案是使用不直接映射到现有目录的包路径，而是使用该目录内的虚拟文件名（也不映射到真实文件名）。

Example:

例子：

If your site has a folder named /content/css, make your css bundle as follows:

如果您的站点有一个名为 /content/css 的文件夹，请按如下方式制作您的 css 包：

In BundleConfig.cs:

在 BundleConfig.cs 中：

bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

And on the page:

在页面上：

@Styles.Render("~/content/css/AllMyCss.css")

Note that this assumes you do NOT have a file named AllMyCss.css in your css folder.

请注意，这假设您的 css 文件夹中没有名为 AllMyCss.css 的文件。

回答by cirrus

That looks correct to me. When optimizations are enabled you'll only have a single ref and it'll be for the name you specified in your StyleBundle (/content/css). In debug mode (or more specifically with debug=false in your web config) you'll get the non-optimized files as normal. If you look, you'll see they're just plain text as you typed them. However, when optimzations are turned on (usually when you run in release mode) you'll get a wierd looking URL instead.

这对我来说看起来是正确的。启用优化后，您将只有一个 ref，它将用于您在 StyleBundle (/content/css) 中指定的名称。在调试模式下（或者更具体地说，在您的 web 配置中使用 debug=false），您将像往常一样获得未优化的文件。如果您看一下，您会发现它们只是您键入时的纯文本。然而，当优化被打开时（通常当你在发布模式下运行时），你会得到一个看起来很奇怪的 URL。

If you look at the output of that it'll be minified. The Query string ?v=5KLoJ.... is based on a hash taken of the files in the bundle. This is so that the reference can be safely HTTP cached for as long as you want. Forever if you fancy, but I thinkthe default is a year. However, if you modify any of your stylesheets it will generate a new hash and that's "cache-busting" so you'll get a fresh copy on the browser.

如果您查看它的输出，它将被缩小。查询字符串 ?v=5KLoJ.... 基于对包中文件的散列。这样就可以根据需要安全地对引用进行 HTTP 缓存。永远，如果你喜欢，但我认为默认是一年。但是，如果您修改任何样式表，它将生成一个新的哈希值，这就是“缓存破坏”，因此您将在浏览器上获得一个新副本。

Having said all that, I'm not sure why you're getting a 404. I suspect that has something to do with your routing configuration or your IIS setup. Are you running in Visual Studio with IISExpress?

说了这么多，我不确定您为什么会收到 404。我怀疑这与您的路由配置或 IIS 设置有关。您是否使用 IISExpress 在 Visual Studio 中运行？

回答by Simon_Weaver

I'm not sure if it's the web optimization, or WebGrease that is so picky but one (or both) of them is and you need to be extremely careful.

我不确定是网络优化还是 WebGrease 如此挑剔，但其中一个（或两个）是，您需要非常小心。

First of all there is nothing wrong with your code:

首先，您的代码没有任何问题：

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

In fact this is exactly what Microsoft does. The main reason they don'tuse ~/bundlesfor css is that relative paths get screwed up for images. Think about how your browser sees a bundle - exactly the same way as it sees any other URL, and all the normal path related rules still apply with respect to relative paths. Imagine your css had an image path to ../images/bullet.png. If you were using ~/bundlesthe browser would be looking in a directory above bundleswhich doesn't actually exist. It will probably end up looking in ~/imageswhere you probably have it in ~/content/images.

事实上，这正是微软所做的。他们的主要理由不使用~/bundles对CSS是相对路径得到搞砸了的图像。想想你的浏览器如何看待一个包——与它查看任何其他 URL 的方式完全相同，并且所有正常的路径相关规则仍然适用于相对路径。想象一下你的 css 有一个图像路径到../images/bullet.png. 如果您使用的~/bundles是浏览器，则会在上面bundles实际上不存在的目录中查找。它可能最终会查找~/images您可能拥有它的位置~/content/images。

I've found a couple things that can really break it and cause 404 errors:

我发现了一些可以真正破坏它并导致 404 错误的事情：

• FYI: My directory structure is Content/CSSwhich contains an imagesfolder for CSS images.
• I have EnableOptimizations=trueto force use of bundles while testing
• First thing you should do is 'View Source' and just click on the css links to see if they work

• 仅供参考：我的目录结构Content/CSS包含一个images用于存放 CSS 图像的文件夹。
• 我必须EnableOptimizations=true在测试时强制使用捆绑包
• 您应该做的第一件事是“查看源代码”，然后单击 css 链接以查看它们是否有效

Let's say we're developing a site about cats. You may have this

假设我们正在开发一个关于猫的网站。你可能有这个

 @Styles.Render("~/Content/css/cats.css")    // dont do this - see below why

 bundles.Add(new StyleBundle("~/content/css/cats.css").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

This generates a CSS link to this path in your HTML:

这会在 HTML 中生成指向此路径的 CSS 链接：

/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1

However this will give a 404 because I put an extension .css and IIS (I think) gets confused.

但是，这将给出 404，因为我将扩展名 .css 和 IIS（我认为）混淆了。

If I change it to this then it works fine:

如果我将其更改为此，则它可以正常工作：

 @Styles.Render("~/Content/css/cats")

 bundles.Add(new StyleBundle("~/content/css/cats").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

Another problem already pointed out by others is you must not do

别人已经指出的另一个问题是你不能做

 @Styles.Render("~/Content/css")

if you have a css directory or file (unlikely you'd have a file called csswith no extension) in your Contentdirectory.

如果您的目录中有一个 css 目录或文件（不太可能有一个css没有扩展名的文件）Content。

An additional trick is that you need to make sure your generated HTML has a version number

一个额外的技巧是你需要确保你生成的 HTML 有一个版本号

<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>

If it doesn't and looks like this, then you probably don't have an exact match for the bundle name between your Bundle table and in your cshtml file.

如果它没有并且看起来像这样，那么您的 Bundle 表和您的 cshtml 文件中的包名称可能不完全匹配。

<link href="/Content/css/cats" rel="stylesheet"/>

回答by Yustme

I just resolved a similar problem. The problem was as follow, i installed 'chosen' via NuGet. And in the BundleConfigclass, the line that included the CSSfile looked like this:

我刚刚解决了一个类似的问题。问题如下，我通过NuGet. 在BundleConfig类中，包含CSS文件的行如下所示：

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",)); 
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/chosen.css"));

Some where down in that class i had this line:

在那堂课的一些地方，我有这条线：

BundleTable.EnableOptimizations = true;

The fix was to combine the 2 bundles.Add()like so:

解决方法是将这两个组合起来，bundles.Add()如下所示：

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/site.css", 
                            "~/Content/chosen.css"
                        ));

And that fixed it for me.

这为我修复了它。

回答by Andy McCluggage

Don't forget to ensure the bundling HttpModule is there.

不要忘记确保捆绑的 HttpModule 存在。

<modules>  
  <remove name="BundleModule" />  
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />  
</modules>

This stung me first time around. Not sure if the necessary config should be added by the NuGet package, but it wasn't in my case.

这让我第一次感到刺痛。不确定 NuGet 包是否应该添加必要的配置，但在我的情况下不是。

回答by DJA

It also could be because you have not deployed bundleconfig.json to the server for some reason.

也可能是因为您出于某种原因尚未将 bundleconfig.json 部署到服务器。