How to specify file ordering for bundling in ASP.NET MVC?
There are times when the application needs to instruct the framework about the order in which a bundle should be created for styles and scripts in the application. In simple words, there can be some resource(s) that must be loaded first before others in the browser.
For example, jQuery library must be included before any custom scripts or libraries or plugins that requires it as a dependency. For styles, there are some reset CSS files that needs to be included before any other styles so that file can first apply the same styles across all the browsers and only then include other CSS files.
Let us learn about the ordering by some code examples below.
The code above instructs the framework to load all the files with
.js extension to be included in the bundle. In this case, the framework will create a bundle to include the files on the basis of alphabetical order by going through the file names. So, if we have
jquery.js files in the directory, with no file ordering, this bundle will first load
app.js and then
jquery.js which may break the application if the scripts in
app.js file depends on
jquery.js. However, this can be resolved by adding file ordering so that bundle includes the files in the correct order.
Default File Ordering
The optimization framework already has default file ordering defined for us. It knows about some of the most commonly used libraries that must be loaded first if found in the bundle’s definition. You can see this default file order in
method defined in
/// Adds default file order specifications to use with bundles in the collection.
/// <param name="list">The list to populate with default values.</param>
public static void AddDefaultFileOrderings(IList<BundleFileSetOrdering> list)
if (list == null)
throw new ArgumentNullException("list");
BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("css");
BundleFileSetOrdering bundleFileSetOrdering2 = new BundleFileSetOrdering("jquery");
BundleFileSetOrdering bundleFileSetOrdering3 = new BundleFileSetOrdering("modernizr");
BundleFileSetOrdering bundleFileSetOrdering4 = new BundleFileSetOrdering("dojo");
BundleFileSetOrdering bundleFileSetOrdering5 = new BundleFileSetOrdering("moo");
BundleFileSetOrdering bundleFileSetOrdering6 = new BundleFileSetOrdering("prototype");
BundleFileSetOrdering bundleFileSetOrdering7 = new BundleFileSetOrdering("ext");
As you can see there are two default orders for styles and rest are for scripts. So, if a bundle has any of the above file in the definition, those files are included first irrespective of the order where that file is included in the bundle definition. The ordering above is defined logically for CSS reset files, jQuery library (with plugins), Modernizr, Dojo, etc.
Custom File Ordering
Similar to the default file ordering, we can add our own custom file ordering. Use
BundleFileSetOrdering type with a unique ordering name to add patterns or name of the file(s) to include first in any given bundle. This order object then needs to be added to
FileSetOrderList – a list object accessible via
bundles object of type
BundlesCollection as shown below:
internal static void RegisterBundles(BundleCollection bundles, string areaName)
var appModuleOrder = new BundleFileSetOrdering("angularModules");
In the code snippet above, I’ve added a file order so that the framework will include all of my custom Angular modules first, if, such an entry is found in the bundle definition or when a pattern is used to search for say *.js files in a directory.
It is very useful to add custom file ordering sets in your application like the one above. It can ensure less error when creating a bundle.
The other useful object is
FileSetOrderList above which is an
IList of type
BundleFileSetOrdering. As such this is a list, it can be manipulated like any list and we can also clear any or all of the registered order sets, if needed. It can also be used to modify existing file set orders just like how you insert an item at specific location/index in a list using
C#. This can be handy in cases when you don’t want to modify the ordering set and also want to run script before some scripts like
jquery.js which exists in default file ordering set. See the code snippet below where we would like to add
console.js file before
jquery.js file for a bundle.
bundles.FileSetOrderList.First(f => f.Name.Equals("jquery")).Files.Insert(0, "console.js");
This sums up my post that explains how to specify file ordering for bundling in ASP.NET MVC app. Using default or custom file ordering will ensure that the file order will be maintained even when optimization is enabled or disabled. Read the official documentation to explore more about this feature.