MVC4 - 最適化がtrueに設定されている場合バンドルが機能しない

Question

私はここで正しいことをしていないのだろうか。私はASP.NET C＃MVC4を使用しています。新しいCSS/js最適化機能を利用したいと思います。

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

私がコメントを解除しかしBundleTable.EnableOptimizations = true; html出力は次のようになります。ここでは

は私のHTML部分ここ

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

は私BunduleConfig.cs一部

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

// BundleTable.EnableOptimizations = true; 

出力（作品）であります

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

これはもちろんですが、私はどこに間違いがあったのか分かりません。初めてMVC4を使って作業してください。

Answer 1

実際に存在する仮想URLにバンドルを置くのは問題だと思いますが、ディレクトリです。

MVCはバンドルから仮想ファイルを作成し、バンドルパスとして指定したパスから提供しています。

この問題の正しい解決策は、既存のディレクトリに直接マッピングされないバンドルパスを使用し、そのディレクトリ内の仮想ファイル名（実際のファイル名にもマッピングされない）を使用することです。

例：

あなたのサイトには、次のようにCSSのバンドルを作る、/コンテンツ/ cssの名前のフォルダを持っている場合：

BundleConfig.csで：

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

、ページ上：

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

これは、あなたのcssファイルにAllMyCss.cssという名前のファイルがないことを前提としていますより古い。

Answer 2

それは私に見えます。最適化が有効になっている場合は、単一のrefのみがあり、StyleBundle（/ content/css）で指定した名前になります。デバッグモード（またはWeb設定でdebug = falseを指定）では、最適化されていないファイルが通常通り取得されます。あなたが見ると、あなたが入力したときにそれらが単純なテキストであることがわかります。しかし、最適化がオンになっていると（通常はリリースモードで実行すると）、代わりに見た目が奇妙なURLが表示されます。

出力を見ると、それは縮小されます。クエリ文字列？v = 5KLoJ ....は、バンドル内のファイルのハッシュに基づいています。これは、参照を安全にHTTPキャッシュすることができるようにするためです。永遠にあなたが空想の場合、私はと思うデフォルトは年です。ただし、スタイルシートを変更すると、新しいハッシュが生成され、それが「キャッシュ・バスト処理」なので、ブラウザに新しいコピーが作成されます。

これまで述べてきたように、私はなぜあなたが404を手に入れているのかよくわかりません。あなたのルーティング設定やIIS設定と関係があると思われます。 IISExpressでVisual Studioを実行していますか？

Answer 3

Web最適化かWebGreaseがかっこいいですが、その1つ（または両方）があり、非常に注意する必要があるかどうかはわかりません。

まず第一に、あなたのコードでは何の問題もありません。実際には

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

これはMicrosoftがまったく同じものです。彼らの主な理由は、を使用してください~/bundlesのCSSのは、相対パスは、画像のために台無しになるということです。ブラウザにバンドルがどのように表示されるかを考えてみましょう。他のURLと全く同じ方法で、通常のパス関連のルールはすべて、相対パスに対して適用されます。あなたのCSSが../images/bullet.pngへの画像パスを持っていたとします。 ~/bundlesを使用していた場合、ブラウザは実際には存在しないbundlesより上のディレクトリを探しています。おそらく~/content/imagesには~/imagesがあります。 FYI

• ：

  私は実際にそれを破ると、404エラーが発生する可能性がありますカップルの事を見つけた私のディレクトリ構造は、CSS画像のimagesフォルダが含まれていContent/CSSです。

• 私は、あなたがすべきテスト
• まず最初は、[ソース]である一方、バンドルの使用を強制するEnableOptimizations=trueを持っており、ちょうど彼らが

は、我々が開発しているとしましょう働くかどうかを確認するために、CSSのリンクをクリックしてください猫についてのサイト。あなたはこれがあなたのHTML内でこのパスへのCSSリンクを生成し、この

@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")); 

を持っていることがあります。

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

しかし、これは404を与えるだろう、私は延長の.cssを入れて、IIS（と思うが）を取得しますので、混乱している。

私はこれに変更した場合、それは正常に動作します：

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

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

もう一つの問題は、すでに他の人が指摘したが（あなたがCSSディレクトリやファイルがある場合は

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

をしない必要がありますあなたのContentディレクトリにcssという名前のファイルはありません。

追加のトリックは、あなたの生成されたHTMLは、それがないと、このように見える場合、あなたはおそらく完全に一致していないバージョン番号

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

を持っていることを確認する必要があるということですBundleテーブルとcshtmlファイルの間のバンドル名。

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

Answer 4

私はちょうど同様の問題を解決しました。問題は次のとおりです。私はNuGetで「選択」をインストールしました。

BundleTable.EnableOptimizations = true; 

修正は2を組み合わせることだった：私はこのラインを持っていたダウンそのクラスの

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

一部： はまた、BundleConfigクラスで、CSSファイルが含まれて行はこのように見えましたbundles.Add()ように：

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

それは私のためにそれを固定しました。

Answer 5

HttpModuleがバンドルされていることを忘れないでください。

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

これは初めて私を傷つけました。必要な設定がNuGetパッケージによって追加されるべきかどうかはわかりませんが、私の場合はそうではありませんでした。

Answer 6

何らかの理由でbundleconfig.jsonをサーバーにデプロイしていない可能性もあります。