UmbraCare LOGO

Optimizing ASP.NET with Bundling and Minification

In this guide, we'll explore ASP.NET's built-in script optimization tools and detail the steps to bundle and minify your website scripts effectively.

Published on: , by:
Piotr Bach picture
Piotr Bach
Wojciech Tengler picture
Wojciech Tengler
.NET Core

Jump to Section

Getting Started: Setting Up Your Project#

Before you begin, ensure your web project includes Microsoft.AspNet.Web.Optimization package. 

If it’s missing, install it using NuGet:

Install-Package Microsoft.AspNet.Web.Optimization

Once installed, you’re ready to set up your bundles.

Step 1: Create the BundleConfig#

In the App_Start folder, create a BundleConfig.cs file if it doesn’t already exist.

This file serves as the central hub for managing your bundles.

public class BundleConfig
{
   public static void RegisterBundles(BundleCollection bundles)
   {
      // Define your bundles here
   }
}
BundleConfig file in ASP .NET project structure

BundleConfig file in ASP .NET project structure

Step 2: Design Your Bundles#

Group your CSS and JavaScript files into logical bundles.

For example:

  • Home Page Scripts: Include libraries and custom scripts for the homepage.
  • Global Styles: Combine all global stylesheets into a single bundle.

Here’s an example setup:

public class BundleConfig
{
   public static void RegisterBundles(BundleCollection bundles)
   {
      ScriptBundle scriptBundle = new ScriptBundle("~/bundles/master/js");

      scriptBundle
         .Include("~/assets/js/jquery.js")
         .Include("~/assets/js/plugins.js")
         .Include("~/assets/js/functions.js");

      bundles.Add(scriptBundle);

      StyleBundle styleBundle = new StyleBundle("~/bundles/master/css");

      styleBundle
         .Include("~/assets/css/plugins.css")
         .Include("~/assets/css/style.css")
         .Include("~/assets/css/custom.css");

      bundles.Add(styleBundle);

      BundleTable.EnableOptimizations = true; // Enable optimization
   }
}

💡Why Bundling Works: Bundling reduces HTTP requests, while minification shrinks file sizes, speeding up page loads.

Step 3: Enable Optimization for BundleTable#

To activate bundling and minification, disable debug mode in your Web.config file:

<system.web>
     <compilation debug="false" />
</system.web>
BundleTable.EnableOptimizations = true

This ensures the bundling engine optimizes your scripts and styles.

Step 4: Implement Bundles in Razor Views#

Use the @Scripts.Render and @Styles.Render helpers in your Razor views to include the bundles.

Add the required namespace in ~/Views/Web.config:

<add namespace="System.Web.Optimization"/>

In your Razor views, reference the bundles like this:

@using System.Web.Optimization;

<!DOCTYPE html>
<html lang="en-US">
<head>
    @Styles.Render("~/bundles/master/css")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/master/js")
</body>
</html>

Step 5: Fix Browser Caching Issues#

Have users reported outdated CSS or JavaScript after updates?

Browser caching might be the issue.

Fix this by appending unique version tokens to your bundle URLs.

Here’s a C# extension method to add a "last modified" token automatically:

internal static class BundleExtensions
{
	public static Bundle WithLastModifiedToken(this Bundle sb)
	{
		sb.Transforms.Add(new LastModifiedBundleTransform());

		return sb;
	}

	public class LastModifiedBundleTransform : IBundleTransform
	{
		public void Process(BundleContext context, BundleResponse response)
		{
			foreach (var file in response.Files)
			{
				var lastWrite = File.GetLastWriteTime(HostingEnvironment.MapPath(file.IncludedVirtualPath)).Ticks.ToString();
				file.IncludedVirtualPath = string.Concat(file.IncludedVirtualPath, "?v=", lastWrite);
			}
		}
	}
}

This great C# extension was found on StackOverflow.

All credit goes to author Ranjeet patil (thanks)!

Update your BundleConfig.cs file to use this extension:

bundles.Add(scriptBundle.WithLastModifiedToken());
bundles.Add(styleBundle.WithLastModifiedToken());

This ensures every build generates a unique version, forcing browsers to load the latest files.

You will get a unique extra parameter in your script URL:

<link href="/bundles/master/css?v=rJwD8GQBqCoQ6sc6KrlHuWYflkjwRDAm2RK3fPv7aOk1" rel="stylesheet"/>
public class BundleConfig
{
	public static void RegisterBundles(BundleCollection bundles)
	{
		ScriptBundle scriptBundle = new ScriptBundle("~/bundles/master/js");

		scriptBundle
			.Include("~/assets/js/jquery.js")
			.Include("~/assets/js/plugins.js")
			.Include("~/assets/js/functions.js");

		bundles.Add(scriptBundle.WithLastModifiedToken());

		StyleBundle styleBundle = new StyleBundle("~/bundles/master/css");

		styleBundle
			.Include("~/assets/css/plugins.css")
			.Include("~/assets/css/style.css")
			.Include("~/assets/css/custom.css");

		bundles.Add(styleBundle.WithLastModifiedToken());

		BundleTable.EnableOptimizations = true;
	}
}

Step 6: Initialize Bundling in Global.asax#

Finally, initialize bundling during application startup in Global.asax:

protected void Application_Start(Object sender, EventArgs e)  
{  
    BundleConfig.RegisterBundle(BundleTable.Bundles);  
}

Celebrating Your Optimized HTML Output#

After completing the bundling and minification process, your HTML will look like this:

Before Bundling:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <!-- Individual CSS files -->
    <link href="/assets/css/plugins.css" rel="stylesheet">
    <link href="/assets/css/style.css" rel="stylesheet">
    <link href="/assets/css/custom.css" rel="stylesheet">
</head>
<body>
    <!-- Individual JS files -->
    <script src="/assets/js/jquery.js"></script>
    <script src="/assets/js/plugins.js"></script>
    <script src="/assets/js/functions.js"></script>
</body>
</html>

After Bundling and Minification:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <!-- Combined and minified CSS bundle -->
    <link href="/bundles/master/css?v=unique-version" rel="stylesheet">
</head>
<body>
    <!-- Combined and minified JS bundle -->
    <script src="/bundles/master/js?v=unique-version"></script>
</body>
</html>

Key Benefits:

  1. Reduced Requests: Bundling combines multiple files into one for both CSS and JS.
  2. Cache Busting: The ?v=unique-version ensures browsers fetch the latest files whenever changes occur.
  3. Simplified Code: Cleaner and more maintainable HTML.

Conclusion: Fast, Efficient, and Ready for Action#

Following these steps, your ASP.NET website is optimized for speed and efficiency.

Reasonable bundling and minification will reduce load times and enhance user experience.

What’s Next?

Explore our blog for advanced ASP.NET and Umbraco CMS techniques.

EDITOR'S PICK

↑ Top ↑