We know bundling and Minification provides dramatic performance gain, Bundling simply means adding script or CSS files into a bundle so that instead of n request to the server only a single request goes to the server, whereas minification means compressing the CSS and Javascript file by removing the whitespaces, comments and converting multiple lines of code to single line if possible.
Please go through my article Bundling and Minification for the details.
But, most often we don't use the local copy of script or CSS, for example, for bootstrap, font-awesome, jquery, or any jquery plugins we use the CDN path for faster loading, but beginners always find it difficult to bundle CDNs in Bundle config.
Bundling CDNs is as easy as bundling local copies of script or CSS files
Go to the App_Start folder and open BundleConfig.cs class, and inside the RegisterBundles() method create one script bundle and style bundle as shown below.
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.UseCdn = true;
var jqueryBundle= new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js")
.Include( ~/Scripts/jquery-{version}.js");
jqueryBundle.CdnFallbackExpression = "window.jQuery";
bundles.Add(jqueryBundle);
BundleTable.EnableOptimizations = true;
//for CSS CDN use
bundles.UseCdn = true;
var StyleBundle = new StyleBundle("~/bundles/Styles","https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")
.Include( ~/Content/bootstrap.min.css");
StyleBundle .CdnFallbackExpression = "window.Styles";
bundles.Add(StyleBundle );
BundleTable.EnableOptimizations = true;
));
}
Note in order to make it work we set the UseCdn property of BundleCollection class to true.