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

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

  • What's New for Python, Java in Visual Studio Code

    Microsoft announced March 2024 updates to its Python and Java extensions for Visual Studio Code, the open source-based, cross-platform code editor that has repeatedly been named the No. 1 tool in major development surveys.

Subscribe on YouTube