Explain Bundling and minification.

Solution

Bundling and minification provide 2 basic functionality in order to improve the performance of page load.

Bundling - Bundle all the multiple scripts/ CSS files in one file for script bundle and one file for CSS bundle so that only browser need to load fewer files instead of multiple files.

System.Web.Optimization assembly is required in order to support bundling and minification.

BundleConfig.cs file defines the bundle for scripts and CSS. Below is sample code to create a bundle in MVC.

public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            //Script bundles
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));          

            //Style bundle
            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/site.css",
                "~/Content/jquery-ui.css"
                ,"~/Content/SyntaxHighlighter.css"));
        }
    }

Minification - Minification process generates a minified file by removing comments, extra white spaces and renames the variable names. So this reduces the file size and results in the faster download.

This video explains core concepts of Bundling and Minification and how to implement bundling and minification in ASP.Net MVC.

Share this thread

Comments

Comments
comments powered by Disqus

Navigation

Social Media