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

  • VS Code Now Has Apple Silicon Builds for Native Mac Development

    Goodbye Rosetta, hello M1. Visual Studio Code has been updated with new builds that let it run natively on machines with Apple Silicon (M1), the company's own ARM64 chips.

  • Visual Studio 2019 for Mac v8.9 Ships with .NET 6 Preview 1 Support

    During its Ignite 2021 online event for IT pros and developers this week, Microsoft shipped Visual Studio 2019 for Mac v8.9, arriving with out-of-the-box support for .NET 6 Preview 1, which the company also released recently.

  • Analyst: TypeScript Now Firmly in Top 10 Echelon (Ruby, Not So Much)

    RedMonk analyst Stephen O'Grady believes TypeScript has achieved the rare feat of firmly ensconcing itself into the top 10 echelon of his ranking, now questioning how high it might go.

  • Black White Wave IMage

    Neural Regression Using PyTorch: Training

    The goal of a regression problem is to predict a single numeric value, for example, predicting the annual revenue of a new restaurant based on variables such as menu prices, number of tables, location and so on.

Upcoming Events