Having a well-optimized website should be the aim for anyone reading this. To figure out how optimized your website is you can use tools such as GT Metrix to run a Pagespeed, or, Y Slow test to see where the bottlenecks within your pages are.
There are a few ways to get bundling and minification. You can get to use more frontend tools like grunt/gulp, however, there's also a C# way. As I'm a C# guy, you can guess the way I'm going.
First, you'll need to install the Microsoft.AspNet.Web.Optimization NuGet package. You can do this by typing in the following in the package manager console.
PM> Install-Package Microsoft.AspNet.Web.Optimization
Next, you need to create a new class and call it BundleConfig.cs. This class is where we'll add the code to minify the scripts and styles. An example of the bundle.config I use on this site is shown below:
public class BundleConfig
public static void RegisterBundles(BundleCollection bundles)
The code is pretty self-explanatory. You can use the 'StyleBundle' to process CSS and you can use ScriptBundle to process JS. When you create a Bundle, you give it a route, in my example "~/bundles/css". This route can be anything you want. It has to be unique though. Also, as we use Umbraco we need to create a separate rule for Umbraco to ignore the path, so it's best to keep with the 'bundle' prefix if you are following this tutorial. Also, as we're minimising the code, you don't need to use the min versions of any libraries you use. From my experience, if you use the min versions, you'll likely get JS errors, as it tries to minify a minified file :P
To ensure that Umbraco uses this new config file, you need to register it within your OnApplicationStarted method in your global.ascx, like this:
public class MvcApplication : Umbraco.Web.UmbracoApplication
protected override void OnApplicationStarted(object sender, EventArgs e)
Next, you need to add the tags into your layout, like this:
All you do is use either the scripts or styles helpers render method and pass in the bundle you want to display, via the route name. In a normal MVC website, this would be it, however, when we use Umbraco, the Umbraco router will try and route your new bundles to an Umbraco page and 404. To get around this, within your web.config, you'll need to add a route exception, within your UmbracoReservedUrls setting, like so:
<add key="umbracoReservedUrls" value="~/config/splashes/booting.aspx,~/install/default.aspx,~/config/splashes/noNodes.aspx,~/VSEnterpriseHelper.axd, ~/bundles"/>
Now everything is set-up, what should happen is that if you run the site with debugging enabled within your web.config, then your CSS and JS will render as normal. When you publish to your live site, you need to make sure that the debug is enabled = false. When this happens the bundling will kick in and minify everything. You can see what it should look like here.
That's all you have to it, the bundling and minification process is pretty much the same as a normal MVC site. When you use Umbraco you just need to remember to add in an exception within the umbracoReservedUrls
Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge