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

  • Move Over, Stack Overflow: Microsoft Launches Q&A for .NET

    Stack Overflow probably isn't worried, but Microsoft has launched its own Q&A site for all things .NET, seeking to provide a one-stop-shop for getting .NET technical questions answered by the community.

  • Developer Decries WinForms-to-Blazor Performance Degradation

    Since shipping .NET 5, Visual Studio 2019 v16.8 and more goodies recently, Microsoft has been touting speed improvements in many components -- including the red-hot Blazor project -- but some real-world developers are finding different results.

  • Google Cloud Functions Supports .NET Core 3.1 (but not .NET 5)

    Google Cloud Functions -- often used for serverless, event-driven projects -- now supports .NET, but the new support is a release behind Microsoft's latest .NET offering.

  • Binary Classification Using PyTorch: Model Accuracy

    In the final article of a four-part series on binary classification using PyTorch, Dr. James McCaffrey of Microsoft Research shows how to evaluate the accuracy of a trained model, save a model to file, and use a model to make predictions.

  • Visual Basic in .NET 5: Ready for WinForms Apps

    With the milestone .NET 5 and Visual Studio 2019 v16.8 releases now out, Microsoft is reminding Visual Basic coders that their favorite programming language enjoys full support and the troublesome Windows Forms Designer is even complete -- almost.

Upcoming Events