ASP.NET paketleri küçültmeyi devre dışı bırakma


185

Her debug="true"iki web.config (s) dosyamda da var ve paketlerimin küçültülmesini istemiyorum, ancak yaptığım hiçbir şey devre dışı bırakmıyor gibi görünüyor. Denedim enableoptimisations=false, İşte benim kod:

//Javascript
bundles.Add(new ScriptBundle("~/bundles/MainJS")
            .Include("~/Scripts/regular/lib/mvc/jquery.validate.unobtrusive.js*")
            .Include("~/Scripts/regular/lib/mvc/jquery.validate*")
            .Include("~/Scripts/regular/lib/bootstrap.js")
            .IncludeDirectory("~/Scripts/regular/modules", "*.js", true)
            .IncludeDirectory("~/Scripts/regular/pages", "*.js", true)
            .IncludeDirectory("~/Scripts/regular/misc", "*.js", true));

//CSS
bundles.Add(new StyleBundle("~/bundles/MainCSS")
            .Include("~/Content/css/regular/lib/bootstrap.css*")
            .IncludeDirectory("~/Content/css/regular/modules", "*.css", true)
            .IncludeDirectory("~/Content/css/regular/pages", "*.css", true))

2
@ RickAnd-MSFT İstek, küçültme devre dışı bırakılırken gruplamanın nasıl etkinleştirileceği. Web.config kullanarak debug = true / false veya EnableOptimizations yalnızca her ikisini de açar veya kapatır. Martin Devillers'ın cevabı, küçültme devre dışı bırakıldığında paketlemenin etkinleştirilmesine izin veriyor
guymid

2
Ayrıca benim için .... paketindeki 'x.js' dosyası için minimasyon dönüşümünü kaldırmış olsanız da klasörde 'x.min.js' dosyası OLMADIĞINDAN emin olun. 'ön' küçültülmüş dosya, örneğin 'angular.js' varsa DELETE '
angular.min.js

Yanıtlar:


137

Eğer varsa debug="true"içinde Web.config ve kullandığınız Scripts/Styles.Rendersayfalarınıza paketlerini başvurmak için, bu sunumları, minification hem kapatmanız gerekir. BundleTable.EnableOptimizations = falseher zaman gruplama ve küçültmeyi de kapatır (hata ayıklama doğru / yanlış bayrağı ne olursa olsun).

Belki de Scripts/Styles.Renderyardımcıları kullanmıyor musunuz? Paket üzerinden doğrudan referanslar oluşturuyorsanız BundleTable.Bundles.ResolveBundleUrl(), her zaman küçültülmüş / paketlenmiş içeriği alırsınız.


12
Bu cevaptan, sadece küçültmeyi nasıl kapatacağımı ve gruplamayı yerinde bırakacağımdan emin değilim - bu mümkün mü?
Adam Tuliper - MSFT

33
Bunu yapmak için, en kolayı, varsayılan olarak Transform ayarlanmamış düz Paketler için Script / StyleBundles'ı değiştirmek olacaktır, bu minimasyonu kapatır, ancak yine de paket olur. Paketlemenin gerçekleşmesi için EnableOptimizations ayarının true değerine ayarlanması gerektiğini unutmayın.
Hao Kung

2
Ayrıca benim için .... paketindeki 'x.js' dosyası için minimasyon dönüşümünü kaldırmış olsanız da klasörde 'x.min.js' dosyası OLMADIĞINDAN emin olun. 'ön' küçültülmüş dosya, örneğin 'angular.js' varsa DELETE '
angular.min.js

1
@stooboo Bunu benim için düzelttiğim şeydi, ancak hiçbir şeyi silmenize gerek yok. Yalnızca min olmayan dosyayı ekleyin.
OneHoopyFrood

2
EnableOptimizations = false- bu kod nereye ait?
alex

158

Koşullu derleme yönergeleri arkadaşınızdır:

#if DEBUG
            var jsBundle = new Bundle("~/Scripts/js");
#else
            var jsBundle = new ScriptBundle("~/Scripts/js");
#endif

16
Aslında çivilenmiş olduğunu düşünüyorum - sadece minyatürü kapatmak için Hao'ya göre bir Paket kullanın, aksi takdirde demetleri ve minimize eden ScriptBundle kullanın, hayır?
Adam Tuliper - MSFT

1
RequireJS'nin kendi paketleme / küçültme sistemini kullanmadan RequireJS üzerinden yükleme gibi şeyler için pakete paket referans URI'sine başvurmak istediğinizde bu harika bir çözümdür.
Norman H

1
Adam gibi şeyler görüyorum, ScriptBundle'ı gelişmiş bir Paket olarak anlıyorum, bu yüzden temel bir referans eklemek istediğinizden (belirli bir işlem sonrası yok), Bundle bana belirli bir paket üzerindeki minyatürü devre dışı bırakmanın iyi bir yolu gibi görünüyor.
Charles HETIER

6
@ RickAnd-MSFT Bence bu kodun paketleme + hata ayıklama modunda hiçbir küçültme ve paket + serbest bırakma modunda küçültme sağlayan amacını yanlış anlıyorsunuz. Web.config kullanıldığında debug = true / false veya EnableOptimizations yalnızca her ikisini de açar veya kapatır.
Yorumunuzu

-1 bu "çözelti" en iyi ihtimalle bir durma boşluğudur. Gerçekte, çalışmasına rağmen çok anlaşılmaz bir koda yol açar. Ama bu en kötü şey değil. "Paket" kullanıldığında, sunucu tarafından mime türü "metin / javascript" yerine "metin / html" olarak ayarlanmış varlıklar devredilir. Hata ayıklama modundayken ateşle oynadığınız css dosyalarını paketlemek için bu yaklaşımı uygularsanız. Yapma. Sadece yapma. Üretim yapılarında çalışan daha sağlıklı bir yaklaşım için cevabımı görün.
XDS

89

Devre dışı bohçalama ve küçültme için sadece bu sizin koymak Aspx dosyası (bu irade devre dışı optimizasyon bile debug=trueiçinde web.config )

vb.net:

System.Web.Optimization.BundleTable.EnableOptimizations = false

c # .net

System.Web.Optimization.BundleTable.EnableOptimizations = false;

Bunu koyarsanız , web.config dosyasındaEnableOptimizations = true bile paketlenir ve küçülürdebug=true


2
Sorunu benim için düzelten tek şey bu. Ben vardı debug="true"ve doğru Script.Renderama hala çalışmıyor. Ayrıca bunun herhangi bir .min.js dosyasını sunucuya eklemeyeceğini unutmayın, bu nedenle bağımlılık kodunun küçük kopyalarını eklediğinizden emin olun.
OneHoopyFrood

2
@TCC: vb.net sözdiziminin büyük sermayesi olması gerektiğini düşünüyor Falsemuyum?
jeremysawesome

@jeremysawesome oh evet doğru olduğunu düşünüyorum, iyi bir nokta :-) Ben bir VB programcısı değilim bu yüzden fark bile etmedim ...
TCC

1
İlk satır "... debug = false" olsa bile hayır?
UnionP

2
vb.Net hakkında umurunda değil, False = false, like .tostring () = .toString ()
manuel

67

Sadece dönüşümlerinizi temizleyerek paketlerinizdeki küçültmeyi kapatabilirsiniz.

var scriptBundle = new ScriptBundle("~/bundles/scriptBundle");
...
scriptBundle.Transforms.Clear();

Kişisel olarak tüm komut dosyalarımı tek bir dosyada paketlemek istediğinizde yararlı buldum, ancak hata ayıklama aşamalarında okunabilirliğe ihtiyaç duydum.


1
-1 İşte ejderhalar: JsMinifier / CssMinifier öğesinin kopyalanması, mime türünü "text / css" veya "text / javascript" olarak ayarlayan dahili mekanizmayı da koparır. Bu, hata ayıklama / bırakma modunda sorunlara neden olmaz, ancak yayınlanmış derlemeler bağlamında css paketlerinde tahribat yaratır (canlı dağıtımlar olarak da bilinir): Chrome ve firefox, mime türlerinin ayarlandığını belirten söz konusu css paketlerini yüklemeyi reddediyor "text / css" yerine "text / html". Js-bundles şeyler bir şekilde egzersiz ama en iyi "js-bundle" text / html "(<- ciddi?) Olarak teslim olması için balık. Doğru yaklaşım için cevabımı görün.
XDS

28

Bu önerilerin çoğunu denedim ama dikkat çekiyor gibi görünüyordu. Sadece bunun benim hatam olduğunu öğrenmek için birkaç saat harcadım:

@Scripts.Render("/bundles/foundation")

Ne denediğim önemli değil. Bunun yerine, bunu kullanmalıydım:

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

Ekstra '~' başardı. Hatta gerçekten bu olup olmadığını görmek için tek bir örnekte tekrar kaldırdım. Umarım bu iş için harcadığım saatler boyunca en az bir kişiyi kurtarabilirim.


Vay be bu son 3 saat boyunca
çıldırıyorum

24

Birkaç cevabı birleştirin, bu benim için ASP.NET MVC 4'te çalışır.

        bundles.Add(new ScriptBundle("~/Scripts/Common/js")
            .Include("~/Scripts/jquery-1.8.3.js")
            .Include("~/Scripts/zizhujy.com.js")
            .Include("~/Scripts/Globalize.js")
            .Include("~/Scripts/common.js")
            .Include("~/Scripts/requireLite/requireLite.js"));

        bundles.Add(new StyleBundle("~/Content/appLayoutStyles")
            .Include("~/Content/AppLayout.css"));

        bundles.Add(new StyleBundle("~/Content/css/App/FunGrapherStyles")
            .Include("~/Content/css/Apps/FunGrapher.css")
            .Include("~/Content/css/tables.css"));

#if DEBUG
        foreach (var bundle in BundleTable.Bundles)
        {
            bundle.Transforms.Clear();
        }
#endif

21

Minimasyonu (ve diğer özellikleri) manuel olarak kontrol etmenin basit bir yolu da vardır. Bunun gibi yeni CssMinify () trafosu :

// this is in case when BundleTable.EnableOptimizations = false;
var myBundle = new StyleBundle("~/Content/themes/base/css")
    .Include("~/Content/themes/base/jquery.ui.core.css" /* , ... and so on */);
myBundle.Transforms.Add(new CssMinify());
bundles.Add(myBundle);

// or you can remove that transformer in opposite situation
myBundle.Transforms.Clear();

Bazı paketlerin yalnızca küçültülmesi için özel bir parçaya sahip olmak istediğinizde bu uygundur. Diyelim ki, ayaklarınızın altına giren (onlara çok fazla tarayıcı isteği alan) bazı standart (jQuery) stilleri kullanıyorsunuz, ancak kendi stil sayfanızı değiştirmeden tutmak istiyorsunuz. (Aynı - javascript ile).


13

Başka bir alternatif çözüm bulmak için bu soruda başkaları tarafından verilen birkaç cevabı birleştirdim.

Amaç: Dosyaları her zaman paketlemek, olayda JS ve CSS minimize etmeyi devre dışı bırakmak <compilation debug="true" ... />ve her zaman CSS paketine özel bir dönüşüm uygulamak.

Benim çözümüm :

1) web.config dosyasında : <compilation debug="true" ... />

2) Global.asax Application_Start () yönteminde:

 protected void Application_Start() {
     ...
     BundleTable.EnableOptimizations = true; // Force bundling to occur

     // If the compilation node in web.config indicates debugging mode is enabled
     // then clear all transforms. I.e. disable Js and CSS minification.
     if (HttpContext.Current.IsDebuggingEnabled) {
         BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear());
     }

      // Add a custom CSS bundle transformer. In my case the transformer replaces a
      // token in the CSS file with an AppConfig value representing the website URL
      // in the current environment. E.g. www.mydevwebsite in Dev and
      // www.myprodwebsite.com in Production.
      BundleTable.Bundles.ToList()
          .FindAll(x => x.GetType() == typeof(StyleBundle))
          .ForEach(b => b.Transforms.Add(new MyStyleBundleTransformer()));
     ...
}

7

Aşağıdaki özelliği false değerine ayarlarsanız, grup oluşturma ve küçültmeyi devre dışı bırakır.

In Global.asax.cs aşağıda belirtildiği gibi dosya satırı ekleyin

protected void Application_Start()
{
    System.Web.Optimization.BundleTable.EnableOptimizations = false;
}

Bu özelliği kapattığımda neden daha az dosyamın css'ye dönüştürüldüğünü anlamıyorum? Optimizasyonu etkinleştirdiğimde, daha az dosya paketlemek artık işe yaramıyor.
FrenkyB

5

Paket başına temelde küçültmeyi nasıl devre dışı bırakacağınız aşağıda açıklanmıştır:

bundles.Add(new StyleBundleRaw("~/Content/foobarcss").Include("/some/path/foobar.css"));
bundles.Add(new ScriptBundleRaw("~/Bundles/foobarjs").Include("/some/path/foobar.js"));

Sidenote: Paketler için kullanılan yollar, yayınlanan yapılarınızdaki gerçek yollarla çakışmamalıdır, aksi takdirde hiçbir şey işe yaramaz. Ayrıca .js, .css ve / veya 'kullanmaktan kaçının. ve paket adının herhangi bir yerinde '_'. Yukarıdaki örnekte olduğu gibi adı olabildiğince basit ve açık tutun.

Yardımcı sınıflar aşağıda gösterilmiştir. Bu sınıfları geleceğe dönük yapmak için .clear () kullanmak yerine js / css küçültme örneklerini cerrahi olarak kaldırdığımızı ve ayrıca üretim yapılarının özellikle css-bundles'ı düzgün bir şekilde teslim etmeye gelir (varsayılan olarak "text / html" olarak ayarlanmış mime tipi ile firefox ve chrome redded css demetleri):

internal sealed class StyleBundleRaw : StyleBundle
{
        private static readonly BundleMimeType CssContentMimeType = new BundleMimeType("text/css");

        public StyleBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
        {
        }

        public StyleBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
        {
                 Transforms.Add(CssContentMimeType); //0 vital
                 Transforms.Remove(Transforms.FirstOrDefault(x => x is CssMinify)); //0
        }
        //0 the guys at redmond in their infinite wisdom plugged the mimetype "text/css" right into cssminify    upon unwiring the minifier we
        //  need to somehow reenable the cssbundle to specify its mimetype otherwise it will advertise itself as html and wont load
}

internal sealed class ScriptBundleRaw : ScriptBundle
{
        private static readonly BundleMimeType JsContentMimeType = new BundleMimeType("text/javascript");

        public ScriptBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
        {
        }

        public ScriptBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
        {
                 Transforms.Add(JsContentMimeType); //0 vital
                 Transforms.Remove(Transforms.FirstOrDefault(x => x is JsMinify)); //0
        }
        //0 the guys at redmond in their infinite wisdom plugged the mimetype "text/javascript" right into jsminify   upon unwiring the minifier we need
        //  to somehow reenable the jsbundle to specify its mimetype otherwise it will advertise itself as html causing it to be become unloadable by the browsers in published production builds
}

internal sealed class BundleMimeType : IBundleTransform
{
        private readonly string _mimeType;

        public BundleMimeType(string mimeType) { _mimeType = mimeType; }

        public void Process(BundleContext context, BundleResponse response)
        {
                 if (context == null)
                          throw new ArgumentNullException(nameof(context));
                 if (response == null)
                          throw new ArgumentNullException(nameof(response));

         response.ContentType = _mimeType;
        }
}

Tüm bunları çalıştırmak için yüklemeniz gerekir (nuget aracılığıyla):

WebGrease 1.6.0+ Microsoft.AspNet.Web.Optimization 1.1.3+

Ve web.config dosyanız şu şekilde zenginleştirilmelidir:

<runtime>
       [...]
       <dependentAssembly>
        <assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
       </dependentAssembly>
       <dependentAssembly>
              <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
       </dependentAssembly>
        [...]
</runtime>

<!-- setting mimetypes like we do right below is absolutely vital for published builds because for some reason the -->
<!-- iis servers in production environments somehow dont know how to handle otf eot and other font related files   -->
</system.webServer>
        [...]
        <staticContent>
      <!-- in case iis already has these mime types -->
      <remove fileExtension=".otf" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />

      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>

      <!-- also vital otherwise published builds wont work  https://stackoverflow.com/a/13597128/863651  -->
      <modules runAllManagedModulesForAllRequests="true">
         <remove name="BundleModule" />
         <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
      </modules>
      [...]
</system.webServer>

Css-bundles'ınızı yazı tipleri vb. Açısından çalışmak için fazladan adımlar atmanız gerekebileceğini unutmayın. Ancak bu farklı bir hikaye.


4

SOME dosyalarını küçültmek / gizlemek / birleştirmek istemiyorsanız, diğer dosyalar için hala tam paketlemeye ve minyatürlere izin vermek istiyorsanız, en iyi seçenek belirli bir paketin içeriğini okuyacak özel bir oluşturucu ile gitmek. paketin sanal yolunu oluşturmak yerine sayfadaki dosyaları işleyin. Şahsen bunu gerekli çünkü IE 9 $ *% @ ing yatakta CSS dosyaları bile minyatür ile kapalı paketleniyor .

Bana CSS için dosyaları işleyecek ama yine de sistem benim javascript dosyaları paketlenmiş / küçültülmüş / şaşırttı oluşturmak için izin veren bir CSS Renderer oluşturmak için kullandığım kod için başlangıç ​​noktası verdi bu yazı için çok teşekkürler .

Statik yardımcı sınıfı oluşturuldu:

using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;

namespace Helpers
{
  public static class OptionalCssBundler
  {
    const string CssTemplate = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";

    public static MvcHtmlString ResolveBundleUrl(string bundleUrl, bool bundle)
    {
      return bundle ? BundledFiles(BundleTable.Bundles.ResolveBundleUrl(bundleUrl)) : UnbundledFiles(bundleUrl);
    }

    private static MvcHtmlString BundledFiles(string bundleVirtualPath)
    {
      return new MvcHtmlString(string.Format(CssTemplate, bundleVirtualPath));
    }

    private static MvcHtmlString UnbundledFiles(string bundleUrl)
    {
      var bundle = BundleTable.Bundles.GetBundleFor(bundleUrl);

      StringBuilder sb = new StringBuilder();
      var urlHelper = new UrlHelper(HttpContext.Current.Request.RequestContext);

      foreach (BundleFile file in bundle.EnumerateFiles(new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, bundleUrl)))
      {
        sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath));
      }

      return new MvcHtmlString(sb.ToString());
    }

    public static MvcHtmlString Render(string bundleUrl, bool bundle)
    {
      return ResolveBundleUrl(bundleUrl, bundle);
    }
  }

}

Sonra ustura yerleşim dosyasında:

@OptionalCssBundler.Render("~/Content/css", false)

standart yerine:

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

Javascript dosyaları için isteğe bağlı bir oluşturucu oluşturma eminim de bu yardımcı güncellemek için çok az gerekir.


1
İyi çalışıyor. Dosyalar güncellendiğinde URL'lerin değişmesini istiyorsanız, CssTemplatebenzer bir şeye geçebilir "<link href=\"{0}?f={1}\" rel=\"stylesheet\" type=\"text/css\" />"ve sb.AppendFormatsatırı aşağıdaki gibi değiştirebilirsinizsb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath), System.IO.File.GetLastWriteTimeUtc(HttpContext.Current.Server.MapPath(file.IncludedVirtualPath)).Ticks);
franzo

Doğru, işte böyle bir şey yaptık. JS.Version adlı genel bir statik dizgimiz vardı. Daha sonra bu şekilde referans verdik: <script type = "text / javascript" src = "Scripts / jsfile_name.js <% = Global.JSVersion%>"> </script>
James Eby

3

EnableOptimizationsProjenizde anahtar kelime arayın

Yani bulursan

BundleTable.EnableOptimizations = true;

çevir false.


2
Bu, küçültmeyi devre dışı bırakır, ancak en azından not edilmesi gerektiğini düşündüğüm paketlemeyi de tamamen devre dışı bırakır.
John Pavek

1

LESS / SASS CSS dönüşümü kullanıyorsanız useNativeMinification, küçültmeyi devre dışı bırakmak için false olarak ayarlanabilen bir seçenek vardır (web.config dosyasında). Benim amacım için sadece gerektiğinde burada değiştirmek, ancak her zaman yayın derleme etkinleştirmek için web.config dönüşümleri kullanabilirsiniz veya belki de kodda değiştirmek için bir yol bulmak.

<less useNativeMinification="false" ieCompat="true" strictMath="false"
      strictUnits="false" dumpLineNumbers="None">

İpucu: Bütün mesele, tarayıcı inceleme araçlarında veya sadece dosyayı açarak yapabileceğiniz CSS'nizi görüntülemek. Paketleme etkinleştirildiğinde, dosya adı her derlemede değişir, böylece sayfamın üstüne aşağıdakileri koyarım, böylece derlediğim CSS'mi her değiştiğinde yeni bir tarayıcı penceresinde kolayca görüntüleyebilirim.

@if (Debugger.IsAttached) 
{
    <a href="@Styles.Url(ViewBag.CSS)" target="css">View CSS</a>
}

bu gibi dinamik bir URL olacak https://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1


Güncelleme: Dağıtım / sürüm oluşturma sırasında benim için true olarak ayarlamak için bir web.config dönüşümü oluşturdum

  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <less xdt:Transform="Replace" useNativeMinification="true" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">
      <jsEngine name="MsieJsEngine" />
    </less>
  </bundleTransformer>

1
Dosya adı her derlemede DEĞİLDİR. Dosya içeriğini temel alır, bu nedenle dosya her değiştiğinde değişir.
Jim Raden

1

Bu VS aracılığıyla kurulum, varsayılan aldığında yeni bir çerçeve gibi gelecekte birine yararlı olabilir web.config, web.Debug.configve web.Release.config. In web.release.configBu çizgiyi bulacaksınız:

<compilation xdt:Transform="RemoveAttributes(debug)" />

yaptığım satır içi değişiklikleri geçersiz kılıyor gibiydi. Ben bu satır dışarı yorum ve biz sos (bir "sürüm" derleme küçültülmüş kodu görmek açısından)

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.