How to specify file ordering for bundling in ASP.NET MVC?

I’ve been working on a ASP.NET MVC based application to add bundling and minification for the web resources like CSS, JavaScript files. If you would like to learn the basics of this feature, you may read my post where I explain how to bundle, minify web resources in your application. The concept explained in that post is same that applies to an application with or without Areas. In this post, I’ll explain you how to specify file ordering for bundling in ASP.NET MVC app.

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 app.js and 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 AddDefaultFileOrderings method defined in System.Web.Optimization` namespace.

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:

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.

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.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger