Force ASP.Net MVC Bundle to render the javascript files in a certain order

Question

I am working on an ASP.Net MVC 4 application and using Bundling and minifiction to render styles and script files.

I have a script file (File A) that call function in another file (File B) , when I am using
@Scripts.Render() method it render link tag for File A before File B so it fire an error and the script not work correctly.

Is there any way to force @Script.Render() to render link tags in certain order without using separate bundle for each file????

EDIT

I am using IncludeDirectory method to include all script files in that folder

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js",
                    "*.js"));
    }
}

Please show how you are adding the scripts to your page and bundle. You can create your own bundles and add the scripts in the order you want. stackoverflow.com/questions/14544277/… — MikeSmithDev
– MikeSmithDev, Commented Jan 28, 2013 at 13:50
@MikeSmithDev thanks, the post you provided is helpful but I am greedy :) and want to know if there is another approach to do that — Amir Ismail
– Amir Ismail, Commented Jan 28, 2013 at 14:03
From www.asp.net: "Adding scripts by wildcard defaults to loading them in alphabetical order, which is typically not what you want. CSS and JavaScript files frequently need to be added in a specific (non-alphabetic) order. You can mitigate this risk by adding a custom IBundleOrderer implementation, but explicitly adding each file is less error prone." — MikeSmithDev
– MikeSmithDev, Commented Jan 29, 2013 at 13:59
@MikeSmithDev even with not using * I still get the downloads in random order — Nikos
– Nikos, Commented Mar 1, 2013 at 11:47
@Nikos without seeing your code, IDK. Both methods I showed work to specify the order. Note that even if you specify an order, it will move certain known scripts to the front (like jquery), so that could be it. Otherwise, I haven't had problems setting what scripts go where. — MikeSmithDev
– MikeSmithDev, Commented Mar 1, 2013 at 14:20

TotPeRo · Accepted Answer · 2019-05-06 08:24:12Z

Bundling by default will add the scripts alphabetically. It will move around known libraries and add them in the correct order (it will put jQuery in first, and then jQuery-ui, for example).

The easiest way is to order the scripts yourself. One way is to move off your custom scripts to a different folder, and then add all the scripts into their own bundle in the order you want:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js","*.js"));

        bundles.Add(new ScriptBundle("~/bundles/myScripts").Include(
            "~/Scripts/custom/scriptB.js",
            "~/Scripts/custom/scriptA.js"));
    }
}

One other option is wildcards. This option still includes moving your custom scripts to their own folder, but only having one bundle (source):*

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {       
        bundles.Add(new ScriptBundle("~/bundles/js").Include(
            "~/Scripts/*.js",
            "~/Scripts/custom/scriptB.js",
            "~/Scripts/custom/scriptA.js"));
    }
}

Also concerning your comment "Is there any way to force @Script.Render() to render link tags in certain order without using separate bundle for each file" -- note that separate link tags is only happening in debug mode. Once you do deploy in release mode, there will only be one link tag and one file.

Community · Accepted Answer · 2017-05-23 10:28:15Z

6

Write your own orderer as Darin Dimitrov answer in this question: How can I specify an explicit ScriptBundle include order?

public class MyBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        //any ordering logic here

        return files;
    }
}

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 28, 2013 at 14:15

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

1 Comment

HaveThunk Over a year ago

I took my custom IBundleOrderer a step further and had it process each file and determine the dependency chain. A bit late, but it might help future searchers.

Arne H. Bitubekk · Accepted Answer · 2013-06-17 10:22:07Z

Have a look at BundleCollection.FileSetOrderList for ordering of bundeled files. I found this blog post about it: http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx which explains it pretty good.

Example code for JQuery ordering:

BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("jquery");
bundleFileSetOrdering1.Files.Add("jquery.js");
bundleFileSetOrdering1.Files.Add("jquery-min.js");
bundleFileSetOrdering1.Files.Add("jquery-*");
bundleFileSetOrdering1.Files.Add("jquery-ui*");
bundleFileSetOrdering1.Files.Add("jquery.ui*");
bundleFileSetOrdering1.Files.Add("jquery.unobtrusive*");
bundleFileSetOrdering1.Files.Add("jquery.validate*");
bundles.FileSetOrderList.Add(bundleFileSetOrdering1);

Ori Calvo · Accepted Answer · 2013-12-27 21:40:22Z

0

You should consider using Cassette http://getcassette.net/ It supports auto detection of script dependencies based on script references found inside each file.

If you prefer sticking to MS Web Optimization solution but like the idea of arranging scripts based on script references you should read my post blog at http://blogs.microsoft.co.il/oric/2013/12/27/building-single-page-application-bundle-orderer/

answered Dec 27, 2013 at 21:40

Ori Calvo

5265 silver badges6 bronze badges

Collectives™ on Stack Overflow

Force ASP.Net MVC Bundle to render the javascript files in a certain order

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related