BundleCollection 사용시 bundle에 설정한대로 파일 로딩시키기

닷넷 프레임워크에서는 BundleCollection 을 사용하여 css나 js파일들을 쉽게 로딩할 수 있다.

css나 js파일의 경우 플러그인이 많이 있는 경우에는 로딩되는 순서가 굉장히 중요한데

이게 로딩되는순서가 꼬이거나 지정한 순서로 로딩되지않으면 적용해놓은 설정이나 스크립트가 적용되지않는 문제가 발생한다.

BundleCollection 에서는 default 설정은 알파벳순으로 로딩된다.

이러한 경우를 방지하기 위해 Bundle 을 설정하는 Config cs파일에 아래 코드를 추가해서 내가 Bundle을 설정한 순서대로 로딩되도록 할 수 있다.

class NonOrderingBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
          return files;
    }
}

위 코드를 적용한 사용 예는

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        //Jquery 번들을 만들어보겠다.
        var jqueryJs = new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery.js"
                            ,"~/Scripts/jquery-ui.js");
 
        jqueryJs.Orderer = new NonOrderingBundleOrderer();
        bundles.Add(jqueryJs);
    }
}
 
class NonOrderingBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
          return files;
    }
}

이처럼 사용하면 된다.

View 나 Layout 파일에서 번들을 로딩하여 사용하면 된다.

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

번들사용시 정렬은 굉장히 중요하다.

참고 : http://stackoverflow.com/questions/19323409/asp-net-mvc-bundle-config-order