ASP.NET 번들 축소를 비활성화하는 방법


185

내가 가진 debug="true"내 모두 의 Web.config (들) , 그리고 난 그냥 내 번들이 축소 된 싶지는 않지만 내가 아무것도 사용하지 않도록 것 같다. 시도했습니다 enableoptimisations=false, 여기 내 코드가 있습니다 :

//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 요청은 최소화를 비활성화하면서 번들링을 활성화하는 방법입니다. web.config debug = true / false 또는 EnableOptimizations를 사용하면 둘 다 켜거나 끌 수 있습니다. Martin Devillers의 답변에 따르면 축소가 비활성화 된 상태에서 번들링을 활성화 할 수 있습니다
guymid

2
또한 나를 위해 .... 번들의 파일 'x.js'의 경우 폴더에 'x.min.js'파일이 없는지 확인하십시오. 그렇지 않으면 축소 변환을 제거했지만 .. 번들링은 'pre'축소 파일 예 : 'angular.js'가 있으면 DELETE 'angular.min.js';-)
stooboo

답변:


137

당신이 가지고 있다면 debug="true"Web.config를 하고 사용하는 Scripts/Styles.Render페이지의 번들을 참조하려면, 그 번들 및 축소를 모두 해제해야합니다. BundleTable.EnableOptimizations = false디버그 참 / 거짓 플래그와 상관없이 항상 번들링과 축소를 모두 해제합니다.

Scripts/Styles.Render헬퍼를 사용하지 않습니까? 를 통해 번들에 대한 참조를 직접 렌더링하는 경우BundleTable.Bundles.ResolveBundleUrl() 항상 축소 / 번들 된 컨텐츠가 제공됩니다.


12
이 답변에서, 나는 확인하는 방법을 끄지 않을거야 단지 축약을 제자리에 묶어두고 -이 가능합니까?
Adam Tuliper-MSFT

33
이를 위해 가장 쉬운 방법은 기본적으로 Transform이 설정되어 있지 않은 일반 번들에 대해 Script / StyleBundles를 변경하는 것입니다. 이렇게하면 축소가 해제되지만 여전히 번들이됩니다. 번들링이 발생하려면 EnableOptimizations를 true로 설정해야합니다.
Hao Kung

2
또한 나를 위해 .... 번들의 파일 'x.js'의 경우 폴더에 'x.min.js'파일이 없는지 확인하십시오. 그렇지 않으면 축소 변환을 제거했지만 .. 번들링은 'pre'축소 된 파일. 예를 들어 'angular.js'가 있으면 DELETE 'angular.min.js';-)
stooboo

1
@stooboo 이것은 나를 위해 고쳐진 것이지만 아무것도 삭제할 필요가 없습니다. 비 최소 파일 만 포함하십시오.
OneHoopyFrood

2
EnableOptimizations = false-이 코드는 어디에 속합니까?
alex

158

조건부 컴파일 지시문은 친구입니다.

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

16
실제로 나는 그가 못 박았다고 생각합니다-축소를 끄려면 Hao에 따라 번들을 사용하십시오. 그렇지 않으면 번들로 만들고 축소하는 ScriptBundle을 사용하십시오.
Adam Tuliper-MSFT 2009 년

1
이것은 RequireJS 자체 번들링 / 축소 시스템을 사용하지 않고 RequireJS를 통한로드와 같은 것을 위해 번들 참조 URI로 번들을 참조하려는 경우 훌륭한 솔루션입니다.
Norman H

1
나는 Adam과 같은 것을보고, ScriptBundle을 향상된 번들로 이해하므로 기본 참조 (특정 사후 작업 없음)를 추가하고 싶기 때문에 번들은 특정 번들에서 축소를 비활성화하는 좋은 방법 인 것 같습니다.
Charles HETIER

6
@ RickAnd-MSFT이 코드의 목적을 이해하지 못하고 디버그 모드에서 번들링 + 축소를 해제하고 릴리스 모드에서 번들링 + 축소를 허용한다고 생각합니다. web.config debug = true / false 또는 EnableOptimizations를 사용하면 둘 다 켜거나 끌 수 있습니다. 귀하의 의견을 읽고이 Martin의 솔루션을 무시했습니다. 실제로 이것이 축소없이 번들링하는 매우 좋은 방법이라는 것을
알기 위해서

-1이 "솔루션"은 최고입니다. 실제로는 작동하지만 유지 관리가 불가능한 코드로 이어집니다. 그러나 그것이 최악의 것은 아닙니다. "번들"을 사용하면 "text / javascript"대신 mime-type이 "text / html"로 설정된 서버에서 자산을 인계 받게됩니다. CSS 파일을 번들로 묶기 위해이 방법을 적용하면 디버그 모드에있을 때 실행됩니다. 하지마 하지마 프로덕션 빌드에서 작동하는보다 건강한 접근 방식에 대한 내 대답을 참조하십시오.
XDS

89

비활성화 번들 및 축소를 위해 그냥이 당신 넣어 에서 .aspx 파일 (이 뜻을 비활성화 최적화를하더라도 debug=true에서 의 Web.config )

vb.net :

System.Web.Optimization.BundleTable.EnableOptimizations = false

c # .net

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

당신이 넣을 경우 EnableOptimizations = true이 번들 및 축소하세요 않더라도 debug=true에서 의 Web.config


2
이것이 나를 위해 문제를 해결 한 유일한 것입니다. 나는 가지고 있었고 debug="true"권리는 Script.Render있지만 여전히 작동하지 않았습니다. 또한 이것은 .min.js 파일을 서버하지 않으므로 종속성 코드의 축소되지 않은 사본을 포함해야합니다.
OneHoopyFrood

2
@ TCC : vb.net 구문에 대문자가 있어야한다고 생각하는 것이 잘못 False되었습니까?
jeremysawesome 2016 년

@jeremysawesome 아 그래, 맞습니다, 좋은 지적 :-) 나는 VB 프로그래머가 아니기 때문에 자주 눈치 채지 못했습니다 ...
TCC

1
첫 번째 줄은 "... debug = false"라도 아니어야합니까?
UnionP

2
vb.Net은 .tostring () = .toString ()과 같은 대소 문자 False = false를 신경 쓰지 않습니다
manuel

67

변환을 지우면 번들에서 축소를 끌 수 있습니다.

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

개인적으로 모든 스크립트를 단일 파일로 묶고 싶지만 디버깅 단계에서 가독성이 필요하다는 것을 개인적으로 알았습니다.


1
-1 여기에 용이 있습니다. JsMinifier / CssMinifier를 추출하면 mime 유형을 "text / css"또는 "text / javascript"로 설정하는 내부 메커니즘도 제거됩니다. 이것은 디버그 / 릴리스 모드에서 문제를 일으키지 않지만 게시 된 빌드 (일명 라이브 배포) 컨텍스트에서 CSS 번들에 혼란을 초래합니다 .Chrome과 파이어 폭스는 해당 MMS 유형이로 설정되어 있음을 나타내는 CSS 번들을로드하지 않습니다. "text / css"대신 "text / html" js-bundles를 사용하면 어떻게 든 운동이되지만 js-bundle을 "text / html"(<-심각하게?)로 넘겨주는 것이 비린내가 좋습니다. 올바른 접근 방법은 내 대답을 참조하십시오.
XDS

28

나는 이러한 제안을 많이 시도했지만 작동하지 않는 것 같습니다. 나는 이것이 내 실수라는 것을 알기 위해 꽤 많은 시간을 낭비했습니다.

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

내가 시도한 것이 무엇이든 항상 자바 스크립트를 축소하고 번들로 묶었습니다. 대신, 나는 이것을 사용해야했다 :

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

여분의 '~'가 해냈습니다. 한 번만 다시 제거하여 실제로 있는지 확인했습니다. 내가 바라던 시간에 적어도 한 사람을 구할 수 있었으면 좋겠다.


와우,
이걸로

24

여러 답변을 결합하면 ASP.NET MVC 4에서 작동합니다.

        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

축소 (및 기타 기능)를 수동으로 제어하는 ​​간단한 방법도 있습니다. 다음 과 같이 사용하는 새로운 CssMinify () 변환기입니다 .

// 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();

번들 일부 특수 부분을 축소하기를 원할 때 편리합니다. 예를 들어, 과도한 브라우저 요청을 많이받는 표준 (jQuery) 스타일을 사용하고 있지만 자신의 스타일 시트를 단순화하지 않으려 고합니다. (자바 스크립트와 동일).


13

이 질문에서 다른 사람들이 제공 한 몇 가지 답변을 결합하여 다른 대안 솔루션을 제시했습니다.

목표 : 파일을 항상 번들로 제공하여 다음과 같은 경우에 JS 및 CSS 축소를 비활성화합니다.<compilation debug="true" ... /> 항상 CSS 번들에 사용자 지정 변환을 적용합니다.

내 해결책 :

1) web.config에서 : <compilation debug="true" ... />

2) Global.asax Application_Start () 메소드에서 :

 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

다음 속성을 false로 설정하면 번들링과 축소가 모두 비활성화됩니다.

에서 Global.asax.cs의 아래에 언급 한 바와 같이 파일의 줄을 추가

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

이 기능을 해제했을 때 왜 적은 파일이 CSS로 변환되는지 이해하지 못합니까? 최적화를 활성화하면 더 적은 파일을 묶으면 더 이상 작동하지 않습니다.
FrenkyB

5

번들별로 축소를 비활성화하는 방법은 다음과 같습니다.

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

참고 : 번들에 사용 된 경로는 게시 된 빌드의 실제 경로와 일치하지 않아야합니다. 그렇지 않으면 아무 것도 작동하지 않습니다. 또한 .js, .css 및 / 또는 '.'을 사용하지 마십시오. 번들 이름의 아무 곳이나 '_'. 위의 예에서와 같이 이름을 가능한 단순하고 간단하게 유지하십시오.

도우미 클래스는 다음과 같습니다. 이러한 클래스를 미래에 대비하기 위해 .clear ()를 사용하는 대신 js / css 축소 인스턴스를 외과 적으로 제거하고 특히 프로덕션 빌드가 문제를 일으키지 않는 MIME 유형 설정 기 변환을 삽입합니다. CSS 번들을 올바르게 넘겨줍니다 (파이어 폭스와 크롬은 mime 유형이 "text / html"로 설정된 CSS 번들을 기본값으로 거부합니다) :

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

이 모든 것이 작동하게하려면 (nuget을 통해) 설치해야합니다.

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

그리고 web.config는 다음과 같이 풍부해야합니다.

<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 번들이 글꼴 등의 측면에서 작동하게하려면 추가 단계를 수행해야 할 수도 있습니다. 그러나 이것은 다른 이야기입니다.


4

이미 제공된 답변을 보완하기 위해 다른 파일에 대한 전체 번들링 및 축소를 허용하면서 일부 파일을 축소 / 난독 화 / 연결하지 않으려 는 경우 가장 좋은 방법은 특정 번들의 내용을 읽는 사용자 정의 렌더러를 사용하는 것입니다 번들의 가상 경로를 렌더링하는 대신 페이지에서 파일을 렌더링합니다. IE 9는 CSS 파일이 축소를 끈 상태에서도 번들로 묶을 때 침대에서 $ * % @ ing했기 때문에 개인적으로 이것을 필요 로했습니다 .

이 기사 덕분 에 CSS 용 파일을 렌더링하지만 CSS 파일을 번들 / 축소 / 난독 화 된 시스템으로 렌더링 할 수있는 CSS 렌더러를 만드는 데 사용 된 코드의 시작 점이되었습니다.

정적 도우미 클래스를 만들었습니다.

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);
    }
  }

}

그런 다음 면도기 레이아웃 파일에서 :

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

표준 대신 :

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

자바 스크립트 파일에 대한 선택적 렌더러를 만들면이 도우미로 업데이트 할 필요가 거의 없습니다.


1
잘 작동합니다. 파일을 업데이트 할 때 URL을 변경 CssTemplate하려면 다음과 같이 "<link href=\"{0}?f={1}\" rel=\"stylesheet\" type=\"text/css\" />"변경하고 sb.AppendFormat행을 다음과 같이 변경할 수 있습니다.sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath), System.IO.File.GetLastWriteTimeUtc(HttpContext.Current.Server.MapPath(file.IncludedVirtualPath)).Ticks);
franzo

사실, 우리는 직장에서 그런 일을 많이했습니다. JSVersion이라는 공개 정적 문자열을 사용하여 Global.asax 클래스에 넣고 실행중인 어셈블리의 maj / min / build / rev를 가져 왔습니다. <script type = "text / javascript"src = "Scripts / jsfile_name.js <% = Global.JSVersion %>"> </ script>
James Eby

3

EnableOptimizations프로젝트에서 키워드 검색

그래서 당신이 찾으면

BundleTable.EnableOptimizations = true;

켭니다 false.


2
이것은 축소를 비활성화하지만 번들링을 완전히 비활성화합니다. 적어도 주목해야한다고 생각합니다.
John Pavek

1

LESS / SASS CSS 변환 useNativeMinification을 사용하는 경우 (web.config에서) 축소를 비활성화하기 위해 false로 설정할 수 있는 옵션 이 있습니다. 내 목적을 위해 필요할 때 여기에서 변경하지만 web.config 변환을 사용하여 릴리스 빌드에서 항상 활성화하거나 코드에서 수정하는 방법을 찾을 수 있습니다.

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

팁 : 이것 의 핵심은 브라우저 검사 도구에서 또는 파일을 열어 CSS를 볼 수 있다는 것입니다. 번들링이 활성화되면 모든 컴파일에서 파일 이름이 변경되므로 페이지 상단에 다음을 배치하여 컴파일 된 CSS를 변경할 때마다 새 브라우저 창에서 쉽게 볼 수 있습니다.

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

이것은 다음과 같은 동적 URL입니다. https://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1


업데이트 : 배포 / 릴리스 빌드 중에 web.config 변환을 작성하여 true로 설정했습니다.

  <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
컴파일 할 때마다 파일 이름이 변경되지는 않습니다. 파일 내용을 기반으로하므로 파일이 변경 될 때마다 변경됩니다.
Jim Raden

1

이것은 VS 통해 설정이 디폴트를 얻을 때 새로운 프레임 워크로 미래에 누군가에게 도움이 될 수 있습니다 web.config, web.Debug.config그리고 web.Release.config. 에서 web.release.config이 라인을 찾을 수 있습니다 :

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

이것은 내가 만든 인라인 변경을 무시하는 것처럼 보였습니다. 이 줄을 주석 처리하고 우리는 그레이비를 사용했습니다 ( "릴리스"빌드에서 축소되지 않은 코드를 보는 관점에서)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.