1.

What are Bundling and Minification

Answer»

Bundling and Modification is used to improve the request load time, In this, we can store many static files from the server in a single request, It is created in BundleConfig.cs in the App_Start folder, This file is creating Bundles by associating multiple files to routes. For example, the "~/bundles/bootstrap" route will correspond to both the bootstrap.js file and the respond.js file, and the browser will only need one HTTP request to retrieve both files

Eg.

using System. Web; using System.Web.Optimization; namespace BundlingExample {    public class BundleConfig    {        public static void RegisterBundles(BundleCollection bundles)        {            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(                        "~/Scripts/jquery-{VERSION}.js"));            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(                        "~/Scripts/modernizr-*"));            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(                      "~/Scripts/bootstrap.js",                      "~/Scripts/respond.js"));            bundles.Add(new StyleBundle("~/Content/css").Include(                      "~/Content/bootstrap.css",                      "~/Content/site.css"));            BundleTable.EnableOptimizations = false;        }    } }
  • Minification : Minification is used to remove the white space, text, short comments from the files such as JavaScript and CSS files WITHOUT expecting to alter functionality to reduce the size, which causes improved load times of a Webpage.

Eg.

sayHello = function(name) { //this is comment var msg = "Hello" + name; alert(msg); } Minified Javascript is sayHello=function(n){var t="Hello"+n;alert(t)}

it has removed unnecessary white space, comments and also shortening VARIABLE NAMES to reduce the characters which in turn will reduce the size of JavaScript file., It increases the loading effects of a page by minimizing the number of request and size of the files.

There are different types of bundles used in MVC which is defined under the System.web.Optimization namespace

  • ScriptBundle: ScriptBundle is responsible for JavaScript minification of single or multiple script files.
  • StyleBundle: StyleBundle is responsible for CSS minification of single or multiple STYLE sheet files.

DynamicFolderBundle: it represents a Bundle object that ASP.NET creates from a folder that contains files of the same type.

Bundling and Minification It Reduces the request and size of the js and css resource file and thereby improving the responsiveness of our apps.



Discussion

No Comment Found