Bundling and Minifications in ASP.NET

Bundling:

It's a logical group of files referenced by a unique name with a HTTP request. We can create a bundle for StyleSheet (CSS) and Javascript files.

Minification means removing unwanted white space, line break from the code.

You can Google it with these keywords:

• online minification css
• online minification js

You will see so many online minifier sites to do minification jobs freely.



In above image you see inside App_Start folder there is BUNDLECONFIG.CS
file.

Before bundling technique we mention individual CSS / JS file link in our page which means that numbers of HTTPRequest. One budling is equal to one HttpRquest request, thats why bundling improves our applicaiton performance.

Bundle Registration:

Basically all bundles are registered with GLOBAL.ASAX file.



How to Enable / Disable Bundling and Minification?

In Web.Config file.

<system.web>
    <compilation debug="true" />
</system.web>

In Global.Asax.Cs

protected void Application_Start()
{
    //Enable
    System.Web.Optimization.BundleTable.EnableOptimizations = True;

    //Disable
    System.Web.Optimization.BundleTable.EnableOptimizations = false;
}

Default Bundling

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

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

How to use bundling in Layout or view file?

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")