Geekly Articles each Day
📜 ⬆️ ⬇️

Add Bundling and Minification to an ASP.NET Web Forms Application

I present to you the translation of the article “Adding Bundling and Minification to Web Forms” by Rick Anderson .

My Bundling and Minification tutorial provides a good introduction to the features and main benefits of ASP.NET Bundling and Minification (hereinafter referred to as B / M). You should read this manual to familiarize yourself with the main features of this product. Unlike my B / M tutorial, which is about using B / M in ASP.NET MVC, this article will be about using B / M in conjunction with ASP.NET Web Forms.

Translator's note. ASP.NET Bundling and Minification is also known by other names: Microsoft ASP.NET Web Optimization Framework, System.Web.Optimization, Microsoft.Web.Optimization and ASP.NET Optimization - Bundling.

Create a new .NET Framework 4.5-oriented ASP.NET Web Forms application.

ASP.NET Web Forms 4.5
')
Launch the application and in the opened Internet Explorer window, launch the F12 Developer Tools . Click the Script tab, and then in the list of resources, use the buttons to view the JavaScript files.

Script F12 Developer Tools

You can select one of the javascript files and see its contents in the left pane. Please note that full (not minimized) versions of files are used.

Creating jQuery-bundle `s


Add jQuery, jQuery UI and jQuery Validation to the BundleConfig class, which is located in the App_Start directory. The following code shows the final version of the class:

 using System.Web.Optimization; 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/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include( "~/Scripts/WebForms/WebForms.js", "~/Scripts/WebForms/WebUIValidation.js", "~/Scripts/WebForms/MenuStandards.js", "~/Scripts/WebForms/Focus.js", "~/Scripts/WebForms/GridView.js", "~/Scripts/WebForms/DetailsView.js", "~/Scripts/WebForms/TreeView.js", "~/Scripts/WebForms/WebParts.js")); bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include( "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); } }

Bundle Registration


Visual Studio web application templates automatically generate code that registers Bundles in the Application_Start method of the Global.asax file:

 void Application_Start(object sender, EventArgs e) { BundleConfig.RegisterBundles(BundleTable.Bundles); AuthConfig.RegisterOpenAuth(); }

Adding links to Bundles


Add jQuery-bundles to the <asp:PlaceHolder /> control, as shown in the following code:

 <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jquery") %> <%: Scripts.Render("~/bundles/jqueryui") %> </asp:PlaceHolder>

In the ScriptManager comment out the links to the jQuery scripts, as shown below:

 <body> <form runat="server"> <asp:ScriptManager runat="server"> <Scripts> <%-- <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="jquery.ui.combined" /> --%> </Scripts> </asp:ScriptManager> <header>

CSS bundle


Examine the Bundle.config file, which contains the code for creating CSS bundles (style bundles).

 <?xml version="1.0" encoding="utf-8" ?> <bundles version="1.0"> <styleBundle path="~/Content/css"> <include path="~/Content/Site.css" /> </styleBundle> <styleBundle path="~/Content/themes/base/css"> <include path="~/Content/themes/base/jquery.ui.core.css" /> <include path="~/Content/themes/base/jquery.ui.resizable.css" /> <include path="~/Content/themes/base/jquery.ui.selectable.css" /> <include path="~/Content/themes/base/jquery.ui.accordion.css" /> <include path="~/Content/themes/base/jquery.ui.autocomplete.css" /> <include path="~/Content/themes/base/jquery.ui.button.css" /> <include path="~/Content/themes/base/jquery.ui.dialog.css" /> <include path="~/Content/themes/base/jquery.ui.slider.css" /> <include path="~/Content/themes/base/jquery.ui.tabs.css" /> <include path="~/Content/themes/base/jquery.ui.datepicker.css" /> <include path="~/Content/themes/base/jquery.ui.progressbar.css" /> <include path="~/Content/themes/base/jquery.ui.theme.css" /> </styleBundle> </bundles>

In the Bundle.config file you can add your own style Bundles.
Translator's note. In my opinion, the creation of style Bundles using the Bundle.config file restricts the developer, since the ability to add custom transformations of Bundles (classes that implement the IBundleTransform interface) is IBundleTransform . Now there are whole libraries of such transformations (for example, Bundle Transformer ) that allow to translate LESS-, Sass-, SCSS- and CoffeeScript-code, as well as use other code minimization algorithms (by default B / M uses some modification of Microsoft Ajax Minifier ) . Therefore, it is better to create style bundles in the BundleConfig class (as in ASP.NET MVC). In order for the settings specified in the BundleConfig class to work correctly you need to comment out the contents of the bundles element in the Bundle.config file.

The following code shows how to add links to CSS and JavaScript bundles in the markup of an ASP.NET page:

 <%: Styles.Render("~/Content/themes/base/css", "~/Content/css") %> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui") %>

Note that you can specify multiple bundles in one call to the Render method.
Translator's note. The author did not mention anything about the <webopt:BundleReference /> control, with which you can also add links to style Bundles in the markup of an ASP.NET page. Since this control does not support adding references to script Bundles and makes confusion, I recommend finding all the places where it is used and replacing it with calls to the Styles.Render method.

UPD: After watching Howard Dierking’s “Build high-performing HTML 5 applications with ASP.NET 4.5” performance, it turned out what the <webopt:BundleReference /> control and the Bundle.config file are Bundle.config . Since the Bundle` created in the BundleConfig class become available only in the run mode, the styles specified in them are not applied in the Visual Studio designer window ( Design and Split display modes). This problem is exactly solved by the above tools. It seems that now you have to duplicate styles in the BundleConfig class and in the BundleConfig file, and comment out the contents of the bundles element in the Bundle.config file before deployment. Unfortunately, it is not yet clear what should be done when using LESS, Sass or SCSS in a project (most likely, you will have to use translation (compilation) of the code during project building or do without a designer).

Source: https://habr.com/ru/post/150863/

More articles:


All Articles