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.

  1. Install the nuget package Microsoft ASP.NET Web Optimization Framework
  2. Add a new class inside the App_Start folder > BundleConfig.cs
  3. Register/group your CSS and JS files the way you want it
    public class BundleConfig
       public static void RegisterBundles(BundleCollection bundles)
          bundles.Add(new StyleBundle("~/bundles/abovethefoldcss").Include(
          bundles.Add(new StyleBundle("~/bundles/belowthefoldcss").Include(
          bundles.Add(new ScriptBundle("~/bundles/js").Include(
  4. Call your RegisterBundles method from the Global.asax.cs
    void Application_Start(object sender, EventArgs e)
  5. Render your bundles inside your view
    <!DOCTYPE html>
    <html lang="en">

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.

%d bloggers like this: