MVC Script Bundling and the Wildcard

Bundling & Minification

Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time.  Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)

Wildcard Gotcha

A recent gotcha has been uncovered as a result of the our Change Management Process.  Our standard Change Management creates a backup file and appends the release number to the end of the filename.

Original Script Bundle

The original Script Bundle was created as follows:

bundles.Add(new ScriptBundle("~/bundles/shopping-cart").Include(
                        "~/Scripts/mps/shopping-cart.*"));

This worked great locally, DEV & UAT.  When deployed to production, all of the sudden JavaScript errors started occurring.  Why were we seeing errors?  The wildcard was picking up the shopping-cart.js.C11.19.2013 file and the script being loaded twice was throwing JavaScript Exceptions.

Updated Script Bundle

Removing the wildcard was the best choice for the given situation, so all scripts are explicitly called out in the Script Bundle:

bundles.Add(new ScriptBundle("~/bundles/shopping-cart").Include(
                        "~/Scripts/mps/shopping-cart.js",
                        "~/Scripts/mps/shopping-cart.dataservice.js"
                        ));

Further Reading

ASP.NET has an in-depth tutorial and explanation of bundling & minification.  For the purposes of this blog post, the sections on the “Wildcard” from ASP.NET Bundling and Minification have been added below.  For complete details see entire tutorial:

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Using the “*” Wildcard Character to Select Files

The virtual path specified in the Include method  and  the search pattern in the IncludeDirectory method can accept one “*” wildcard character as a  prefix or suffix to in the last path segment. The search string is case insensitive. The IncludeDirectory method has the option of searching subdirectories.

Consider a project with the following JavaScript files:

  • Scripts\Common\AddAltToImg.js
  • Scripts\Common\ToggleDiv.js
  • Scripts\Common\ToggleImg.js
  • Scripts\Common\Sub1\ToggleLinks.js

The following table shows the files added to a bundle using the wildcard as shown:

Call Files Added or Exception Raised
Include(“~/Scripts/Common/*.js”) AddAltToImg.js, ToggleDiv.js, ToggleImg.js
Include(“~/Scripts/Common/T*.js”) Invalid   pattern exception. The wildcard character is only allowed on the prefix or   suffix.
Include(“~/Scripts/Common/*og.*”) Invalid   pattern exception. Only one wildcard character is allowed.
“Include(“~/Scripts/Common/T*”) ToggleDiv.js, ToggleImg.js
“Include(“~/Scripts/Common/*”) Invalid   pattern exception. A pure wildcard segment is not valid.
IncludeDirectory(“~/Scripts/Common”,   “T*”) ToggleDiv.js, ToggleImg.js
IncludeDirectory(“~/Scripts/Common”,   “T*”,true) ToggleDiv.js, ToggleImg.js, ToggleLinks.js

Use Wildcard with Caution

Explicitly adding each file to a bundle is generally the preferred over wildcard loading of files for the following reasons:

  • Adding      scripts by wildcard defaults to loading them in alphabetical order,      which is typically not what you want. CSS and JavaScript files frequently      need to be added in a specific (non-alphabetic) order.
  • View      specific files added to a directory using wild card loading can be      included in all views referencing that bundle. If the view specific script      is added to a bundle, you may get a JavaScript error on other views      that reference the bundle.

CSS files that import other files result in the imported files loaded twice

Nate Bunton

Nate Bunton is a Lead Software Engineer at Meta Payment Systems. He has over 10 years developing software and leading teams. He works with the Microsoft technology stack focusing in ASP.NET, MVC, HTML, JavaScript, CSS and Web Security. Nate also focuses on Application Lifecycle Management (ALM) engaging his teams with key stakeholders using a variety of agile principals. At Meta Payment Systems, Nate has been a leader in driving technology in the enterprise from new Web Technology to Service Oriented Architecture using WCF and NServiceBus. Nate’s greatest passion is for User Experience, Web Technology and Engaging Teams. He is driven by his desire for continuous learning & improvement.

Posted in Web Development Tagged with: , , ,