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/.

comments powered by Disqus

Featured

  • Microsoft Details Native Integration of Elastic on Azure

    Microsoft detailed the native integration of Elastic tech with its Azure cloud computing platform, increasing application observability.

  • Java on Visual Studio Code Going Cloud Native

    Cloud-native development figures prominently in a new roadmap published by Microsoft's Java on Visual Studio Code dev team.

  • Speed Lines Graphic

    Quantum-Inspired Annealing Using C# or Python

    Dr. James McCaffrey of Microsoft Research explains a new idea that slightly modifies standard simulated annealing by borrowing ideas from quantum mechanics.

  • Visual Studio 2022 v17.1 Preview 3 Improves Web Tools

    Microsoft quietly shipped Visual Studio 2022 v17.1 Preview 3 with enhancements to web tools.

Upcoming Events