Microsoft ASP.NET Web Optimization Framework | ASP.NET

ASP.NET Web Optimization Framework facilitates a new way to bundle css and js files.

In order to utilize the features of ASP.NET Web Optimization Framework in our project, we need to do the following steps.

First, install the package of ASP.NET Web Optimization Framework from nuget by running the below command

Install-Package Microsoft.AspNet.Web.Optimization

Create and configure bundle(s) in App_Start\BundleConfig.cs as below

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles) {
        bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
            "~/Scripts/Lib/jquery/jquery-{version}.js",
            "~/Scripts/Lib/jquery/jquery.*",
            "~/Scripts/Lib/jquery/jquery-ui-{version}.js")
        );

        bundles.Add(new ScriptBundle("~/Scripts/knockout").Include(
             "~/Scripts/Lib/knockout/knockout-{version}.js",
             "~/Scripts/Lib/knockout/knockout-deferred-updates.js")
        );
    }
}

Call the RegisterBundles() function from Application_Start() in your global.asax.cs as below

using System.Web.Optimization;

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

Include the Optimization namespace and render the bundle(s) in your view.cshtml as below

@using System.Web.Optimization

@Scripts.Render("~/Scripts/jquery")
@Styles.Render("~/Content/themes/base/css", "~/Content/css")