Bundling and Minification (AngularJS + ASP.NET MVC)

Purpose

Improve the performance when loading the web page

Central Idea

To reduce the number and size of HTTP requests

Bundle:

make multiple stylesheets or scripts to one file

Minification:

1.        Remove the unused parts of code such as comments, or whitespace

2.       Renaming the variables of JS

Example

Before:          After:

How to do it?

Step 1:

Install the Package (VS - > NuGet)

Install-Package Microsoft.AspNet.Web.Optimization

Step 2:

Create a new file called “BundleConfig.cs” under the folder App_Start

Step 3:

Paste the following sample code

using System.Web.Optimization; public class BundleConfig {     public static void RegisterBundles(BundleCollection bundles)     {         bundles.Add(new ScriptBundle("~/bundles/jquery").Include(             "~/Scripts/jQuery-3.3.1/jquery-3.3.1.slim.js"));         bundles.Add(new ScriptBundle("~/bundles/popper").Include(             "~/Scripts/popper-1.12.9/popper.min.js"));         bundles.Add(new StyleBundle("~/Content/css").Include(             "~/Styles/styles.css"));         bundles.Add(new ScriptBundle("~/bundles/app")             .Include("~/App/app.js")             .IncludeDirectory("~/App/", "*.js", searchSubdirectories: true));         // Code removed for clarity.         BundleTable.EnableOptimizations = true;     } }