How Bundling and Minification Work in an MVC Application

Introduction

Bundling and Minifying in ASP.NET are two powerful features by which you can improve request load time. ASP.NET MVC provides bundling and minification of CSS and JavaScript, which reduces the number of HTTP Requests and payload size, resulting in faster and better performing ASP.NET MVC Web sites. The System.Web.Optimization namespace offers the bundling and minification techniques that exist in the Microsoft.Web.Optimization assembly. To apply bundling and minification, you have to add this DLL as a reference in your project.

Benefits of Bundling and Minification

Bundling and Minification are useful in a production environment. It can significantly improve first page hit download time. Bundling helps you to download files of same type by using one request instead of multiple requests. Minifying helps you make files smaller by removing unnecessary whitespace. The data analysis shows that bundling and minification can result in significant savings in terms of bytes exchanged and requests executed, leading to faster page render times. Such small advantages in a production environment improves the performance of a Web site.

Creating a Bundle in MVC

The bundle is a logical group of physical files. Bundling can create separate requests for CSS and JavaScript files. For example, if an application uses both the bootstrap and site CSS for UI design, we can create a common bundle for them.

In an ASP.NET MVC Web Application, you can find the BundleConfig.cs file under the App_Start folder. This file contains the BundleConfig class that has only one method—RegisterBundles(). In this method, we have to add files those must be downloaded with one request. Refer to the following example:

using System.Web;
using System.Web.Optimization;

namespace Bundling
{
   public class BundleConfig
   {
      // For more information on bundling, visit
      // http://go.microsoft.com/fwlink/?LinkId=301862
      public static void RegisterBundles(BundleCollection bundles)
      {
         bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));
         bundles.Add(new ScriptBundle("~/bundles/jqueryval")
               .Include(
            "~/Scripts/jquery.validate*"));
         // Use the development version of Modernizr to develop
         // with and learn from. Then, when you're ready for
         // production, use the build tool at http://modernizr.com
         // to pick only the tests you need.
         bundles.Add(new ScriptBundle("~/bundles/modernizr")
               .Include(
            "~/Scripts/modernizr-*"));
         bundles.Add(new ScriptBundle("~/bundles/bootstrap")
               .Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/respond.js"));

         // CSS bundling
         bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/site.css"));
         bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.css",
            "~/Content/themes/base/jquery.ui.tabs.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.progressbar.css",
            "~/Content/themes/base/jquery.ui.theme.css"));
      }
   }
}

After Bundling, we need to register this bundle in the Application. We call this method in the Application_Start method of the global.asax.cs file and register this bundle module to bundle config.

protected void Application_Start()
{
   AreaRegistration.RegisterAllAreas();
   FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
   RouteConfig.RegisterRoutes(RouteTable.Routes);
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

A developer can add the previously created CSS and JavaScript bundles to the layout page by using the following code snippet:

@System.Web.Optimization.Styles.Render("~/Content/css")
@System.Web.Optimization.Scripts.Render("~/bundles/bootstrap")

To add the bundles in the Master page, use the following code snippet:

<%: Styles.Render("~/Content/css") %>
<%: Scripts.Render("~/bundles/ bootstrap")%>

Creating Minified Files in MVC

Minification is technique for removing unnecessary characters and comments from JavaScript and CSS files to reduce the size; this will cause improved load times of a Web page. In a production environment, it’s suggested to use Minification for every Web site to improve their load times. A developer can download the Visual Studio Web essential extension to minify JS and CSS files.

Bundling and Minification in Debug Mode

Bundling and Minification doesn’t work in debug mode by default. A developer has to enable this features by adding the following lines of code within the Application_Start event of Global.asax.

protected void Application_Start()
{
   BundleConfig.RegisterBundles(BundleTable.Bundles);
   // Enabling Bundling and Minification
   BundleTable.EnableOptimizations = true;
}

How Performance Is Improved

ASP.NET MVC Application performance can be improved with the help of Bundling and Minification. Bundling and Minification are two separate techniques to reduce load time. Bundling reduces the number of requests to the Server, whereas Minification reduces the size of the requested assets.

All browsers cache resources based on request URLs. When a user requests a Web page, the browser first checks its cache to fetch if a resource with the matched URL exists in the cache instead of fetching it from the server. If content of CSS and JS files are changed in the server, it still will not reflect on the browser. Bundles automatically take care of this problem by adding a hashcode to each bundle as a query parameter to the URL. Whenever you change the content of CSS and JS files, a new hash code will be generated and rendered to the page automatically.

Both Bundling and Minification can be applied together, but each has a separate process.

Conclusion

Bundling and Minifying are powerful features that help developers optimize Web pages. Almost all ASP.NET MVC templates use bundles. I hope you have learned about Bundling and Minification by reading this article. I would like to have your valuable feedback, questions, or comments about this article. Happy Reading!

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read