How to enable bundling and minification of CSS/JS in ASP.NET

This is a pretty neat way to bundle and optimize your CSS and Javascript files within your ASP.NET application.

Install the nuget package Microsoft ASP.NET Web Optimization Framework
Add a new class inside the App_Start folder > BundleConfig.cs

public class BundleConfig
{
   public static void RegisterBundles(BundleCollection bundles)
   {
      bundles.Add(new StyleBundle("~/bundles/abovethefoldcss").Include(
         "~/Content/css/somecss.css", 
         "~/Content/css/anothercss.css"));
      bundles.Add(new StyleBundle("~/bundles/belowthefoldcss").Include(
         "~/Content/css/bootstrap.css", 
         "~/Content/css/font-awesome.css"));
      bundles.Add(new ScriptBundle("~/bundles/js").Include(
         "~/Scripts/js/jquery.js", 
         "~/Scripts/js/bootstrap.js"));
   }
}

Call your RegisterBundles method from the Global.asax.cs

void Application_Start(object sender, EventArgs e)
{
   BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Render your bundles inside your view

<!DOCTYPE html>
<html lang="en">
<head>   
   @Styles.Render("~/bundles/abovethefoldcss")
</head>
<body>

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

Please note if you are running on debug mode, it will load the files separately. Bundling and minification occurs for when compilation is on release mode.

How to enable bundling and minification of CSS/JS in ASP.NET

Share this:

Like this:

Discover more from Nicola Ayan