1. Home
2. asp.net mvc
3. Improving Performance with StyleBundle in ASP.NET MVC

Improving Performance with StyleBundle in ASP.NET MVC

Category > ASP.NET MVC || Published on : Wednesday, March 22, 2023 || Views: 1488 || ASP.NET MVC StyleBundle Performance Optimization Bundling Minification

---

This article discusses the use of StyleBundle, a class in ASP.NET MVC that bundles and minifies multiple CSS files into a single file to improve the performance of web applications. The article explains the steps to use StyleBundle and the benefits of using it in ASP.NET MVC applications.

Introduction:

In ASP.NET MVC, the concept of bundling and minification is very important to improve the performance of web applications. Bundling is a process of combining multiple CSS or JavaScript files into a single file to reduce the number of HTTP requests required to render a web page. In this article, we will discuss one of the bundling features of ASP.NET MVC, which is StyleBundle.

What is StyleBundle?

StyleBundle is a class in ASP.NET MVC that bundles multiple CSS files into a single file and minifies them. It is a part of the System.Web.Optimization namespace, which is used to optimize the performance of web applications. With StyleBundle, we can combine multiple CSS files and minify them into a single file to reduce the number of HTTP requests required to render a web page. This can significantly improve the performance of web applications.

How to use StyleBundle?

To use StyleBundle in an ASP.NET MVC application, we need to follow the below steps:

Step 1: Add System.Web.Optimization namespace

To use StyleBundle, we need to add the System.Web.Optimization namespace to our ASP.NET MVC application. We can add this namespace by adding the following line of code to the web.config file in the <system.web> section.

<compilation debug="true" targetFramework="4.7.2">
   <assemblies>
      <add assembly="System.Web.Optimization, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
   </assemblies>
</compilation>

Step 2: Create a bundle

After adding the System.Web.Optimization namespace, we can create a StyleBundle by using the Bundle class. To create a bundle, we need to specify the virtual path of the bundle, which is the URL that will be used to access the bundled CSS file. We can also specify the physical paths of the CSS files that need to be bundled.

using System.Web.Optimization;

public class BundleConfig
{
   public static void RegisterBundles(BundleCollection bundles)
   {
      bundles.Add(new StyleBundle("~/Content/css").Include(
         "~/Content/site.css",
         "~/Content/themes/base/jquery-ui.css"
      ));
   }
}

In the above code, we have created a bundle named "~/Content/css" that includes two CSS files, "site.css" and "jquery-ui.css" located in the Content folder of the ASP.NET MVC application.

Step 3: Register the bundle

After creating a bundle, we need to register it in the Application_Start method of the Global.asax.cs file.

using System.Web.Optimization;

protected void Application_Start()
{
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

In the above code, we are registering the bundle created in the previous step by calling the RegisterBundles method of the BundleConfig class.

Step 4: Use the bundle

After registering the bundle, we can use it in our HTML code by using the @Styles.Render method. This method will render the bundled CSS file in the HTML code.

@Styles.Render("~/Content/css")

In the above code, we are using the @Styles.Render method to render the bundled CSS file named "~/Content/css" in the HTML code.

Benefits of using StyleBundle

Using StyleBundle in ASP.NET MVC applications provides several benefits:

1. Reduced number of HTTP requests: By bundling multiple CSS files into a single file, we can reduce the number of HTTP requests required to render a web page. This can significantly improve the performance of web applications.

2. Minification: StyleBundle not only bundles multiple CSS files but also minifies them. Minification reduces

---

You might also like