Practical .NET
Setting the Order of Your Script Files
Script bundling speeds up your application by reducing the time it takes to download all of your JavaScript code. But you'll need another object to get your files added to the page in the order you want.
In ASP.NET MVC, if you're not using ScriptBundles, then you should start.
If you create a ScriptBundle, then ASP.NET MVC automatically creates a .zip file containing all of your scripts and inserts a script tag into your page that will cause the browser to download that .zip file. This reduces the number of trips to the server from one trip for every script file to just one trip for the .zip file and reduces the amount of text to download by zipping it. There may still be browsers out there that don't support downloading .zip files but, when one of those browsers request your page, ASP.NET MVC just deals with it by writing out a separate script tag for each file in the bundle.
However, the order that your scripts are added to the page isn't necessarily the order that you add them to the ScriptBundle. Instead, the ScriptBundle imposes an order on the scripts that (among other things) ensures that all the tags for your jQuery files are added to the page first. If that's not what you want, you can alter that order by adding a BundleFileSetOrdering collection to the FileSetOrderList collection of the BundleTable Bundles collection.
This example creates an order where a script tag for the file named bootstrap.min.js is added to the page before any file whose name begins with jquery:
Dim phvOrder As BundleFileSetOrder = New BundleFileSetOrdering("phv")
phvOrder.Files.Add("bootstrap.min.js")
phvOrder.Files.Add("jquery*.js")
BundleTable.Bundles.FileSetOrderList.Clear
BundleTable.Bundles.FileSetOrderList.Add(phvOrder)
In this example, I used Clear to eliminate the BundleFileSetOrders installed by default -- if I hadn't, then ASP.NET MVC would've used its default ordering and, effectively, ignored my new ordering.
But, instead of those last two lines, I could've used this single line:
BundleTable.Bundles.FileSetOrderList.Add(0, phvOrder)
to install my custom BundleFileSetOrder ahead of the default ones to ensure that my order would be used.
About the Author
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.