Combine Script Files using ScriptBundle in ASP.NET MVC

Here, you will learn how to combine multiple JavaScript files and create a script bundle that can be returned in a single HTTP request in ASP.NET MVC.

The ScriptBundle class represents a bundle that does JavaScript minification and bundling. You can create style or script bundles in BundleConfig class under App_Start folder in an ASP.NET MVC project. (you can create your own custom class instead of using BundleConfig class, but it is recommended to follow standard practice.)

The following example demonstrates how to create a script bundle.

Example: Create Script Bundle

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

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {   
        bundles.Add(new ScriptBundle("~/bundles/bs-jq-bundle").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/jquery-3.3.1.js"));

        //the following creates bundles in debug mode;
        //BundleTable.EnableOptimizations = true;
    }
}

In the above example, we created a new bundle by creating an instance of the ScriptBundle class and specified the virtual path and bundle name in the constructor. The ~/bundles/ is a virtual path and bs-jq-bundle is a bundle name. Then, we added two js files, bootstrap.js, and jquery-3.3.1.js in this bundle. The bundles.Add() method is used to add new bundles into the BundleCollection. By default, the above bs-jq-bundle bundle will be created in the release mode. Use BundleTable.EnableOptimizations = true if you want to see bundles in the debug mode.

Now, to include the above bs-jq-bundle in your webpage, use Scripts.Render() method in the layout view, as shown below.

Example: Use Script Bundle

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<meta property="og:title" content="@ViewBag.Title" />
<b>@Scripts.Render("~/bundles/bootstrap")</b>
</head>
<body>
    @
</body>
</html>

Now, when you run the application in the release mode, you will see the bundle is created and loaded in a single request.

Include a Directory in Bundle

Use the IncludeDirectory method to add all the files under a particular directory in a bundle, as shown below.

ScriptBundle Example:

public static void RegisterBundles(BundleCollection bundles)
{            
    bundles.Add(new ScriptBundle("~/bundles/scripts")
                    .IncludeDirectory("~/Scripts/","*.js", true));
}

Using Wildcards

Most third party JavaScript files include a version in the name of the script file. For example, jQuery includes the version in the file name. The wildcard {version} will automatically pick up an available version file.

Example: Wildcard with bundle

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

Using CDN

You can also create a bundle of the files from the Content Delivery Network (CDN), as shown below.

Example: Load files from CDN

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {            
        var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

        bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)
               .Include( "~/Scripts/jquery-{version}.js"));
    }
}

ASP.NET MVC framework calls the BundleConfig.RegisterBundle() from the Application_Start event in the Global.asax.cs file. So, all the bundles are added into the BundleCollection at the starting of an application.