Exercise 4: Bundling and Minification

How many times do your websites include more than one JavaScript or CSS file? This is a very common scenario where bundling and minification can help to reduce the file size and make the site perform faster. The new bundling feature in ASP.NET 4.5 packs a set of JS or CSS files into a single element, and reduces its size by minifying the content (i.e. removing not required blank spaces, removing comments, reducing identifiers).

Bundling and minification in ASP.NET 4.5 is performed at runtime, so that the process can identify the user agent (for example IE, Mozilla, etc.), and thus, improve the compression by targeting the user browser (for instance, removing stuff that is Mozilla specific when the request comes from IE).

In this exercise, you will learn how to enable and use the different types of bundling and minification in ASP.NET 4.5.

Task 1 – Installing the Bundling and Minification Package from NuGet

  1. Open Visual Studio 11 if not already opened.
  2. If not already opened, start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.
  3. Open the NuGet Package Manager Console. To do this, use the menu View | Other Windows | Package Manager Console.

    Figure 39

    Opening the package manager console

  4. In the Package Manager Console, type Install-Package Microsoft.Web.Optimization

Task 2 – Default Bundles

The simplest way to use bundling and minification is to enable the default bundles. This method uses conventions to let you reference the bundled and minified version for the JS and CSS files in a folder.

In this task, you will learn how to enable and reference the bundled and minified JS and CSS files and view the resulting output.

  1. If not already opened, start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.
  2. In the Solution Explorer, expand the Styles, Scripts\custom and Scripts\bundle folders.

    Notice that the application is using more than one CSS and JS file.

    Figure 40

    Multiple Stylesheets and JavaScript files in the application

  3. Open the Global.asax.cs file.

    Notice that the new Microsoft.Web.Optimization namespace is commented out at the beginning of the file. Uncomment the using directive to include the bundling and minification features.

    C#

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; using System.Web.SessionState; using Microsoft.Web.Optimization;

  4. Locate the Application_Start method.

    In this method, you are enabling the default bundling. This enables us to reference a bundled collection of CSS files in a folder by using the path to that folder, plus the “CSS” or the “JS” suffix.

    C#

    void Application_Start(object sender, EventArgs e) { // Default behavior // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js BundleTable.Bundles.EnableDefaultBundles(); ... }

  5. Open the Optimization.aspx file and locate the Content control for HeadContent.

    Notice the CSS files and the JS files are have a single referenced tag.

    HTML

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    FakePre-622cefeca6c149108751f65372c29a43-0e548f7418674b92ac90ce06b40b50eeFakePre-95b61d53512148f9a9da71f73b43d682-21499885c67a44e3a2d426d59b7b71c4FakePre-402857a483a040cf93d3c1ed78f1895d-9d19699a939d438d9a64ec18057732ed

    Note:
    This code is for demo purposes. Ideally, you will reference the bundles in the Site.Master file. In this sample code, you will find that some of the bundled files are also being referenced by the Site.Master file, making this last reference redundant.

  6. Notice that the links are using the bundling conventions in the href attribute to get all the CSS or JS files from the Styles and Scripts\custom folder respectively.

    You can use the path Scripts/{custom}/JS as shown below to bundle and minify all the JS files inside a Scripts/{custom} folder. This is the default behavior with the default bundles.

    HTML

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    FakePre-7b9bb342e82d43588a5833b5f07def8c-7ca0dda1504c4cda981617e2f5a6ad48FakePre-375e64052b5448f29215ca69ceea318d-e4ecff20a190488d9c033e1e2027bb7b <h2><a href="Styles/CSS">CSS Bundle</a></h2> <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>FakePre-53a93ae2307b469e857ec42d0326167d-202d5d1a6dee4a119cc028ad4511425fFakePre-c37bd7fab89245638b5086aec4319678-09deba7ae2fe417f9e1fd98b3b4fd24b <h2><a href="Styles/CSS">CSS Bundle</a></h2> <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>FakePre-f7ba861285114a6b8edc00064bc8ee97-b5517aac8c8d49f8a622fa85a267e429

  7. Open the Styles\Site.css file.

    Notice that the original CSS file contains indented code, blank spaces and comments that enlarge the file. (Also the JavaScript file contains blank spaces and comments).

    Figure 41

    One of the original CSS files in the Scripts folder

  8. Press F5 to run the application and navigate to the Optimization page.
  9. Click on the CSS Bundle link to download and open the file.

    Check out the minified bundled file. You will notice that all the blank spaces, comments and indentation characters have been removed, generating a smaller file.

    Figure 42

    Bundled CSS files

  10. Now click the JS Bundle link and open the downloaded file with Notepad. You can safely disregard the explorer warning. Notice the JavaScript files under the custom folder are also bundled and minified.

    Figure 43

    Bundled JavaScript files

    Enabling compression for CSS or JS files was much more complicated in previous ASP.NET version. Now, as you have seen, you just need to add one line in the Global.asax file to enable bundling, and then reference the bundled files from your site.

Task 3 – Static Bundles

The static bundle approach allows you to customize the set of files to bundle, the reference and the minification method that will be used.

In this task, you will configure a static bundle to define a specific set of files to bundle and minify.

  1. Close the browser.
  2. Open the Global.asax.cs file and locate the Application_Start method.
  3. Uncomment the static bundle code as shown in the code below.

    You are defining a static bundle that will be referenced with the “~/StaticBundle” virtual path and use JsMinify for minification for all the specified files with the AddFile method. Finally, you are adding the static bundle to the BundleTable and enabling it.

    Notice that the files are not located in the same place; this is another advantage over the default bundling.

    C#

    void Application_Start(object sender, EventArgs e)
    FakePre-d0fbd8e7eb244ea69db234f07246d011-dfe4388a48cc43498c2f019a10769ab2FakePre-0bcb5c03f0ff4f5ab50fb74e65d01a50-72ebaf79067c47a8a88606d46ea63d33FakePre-6a08bbed610c49d884d2b0361494bb9a-cdc4b2233a9c436fb6bcffa209a89a96FakePre-c85afb7c3d96496b8eea3585ddc6c6d2-7b42d34432ce4c059f875d11b1e9e0f4FakePre-01c9d90e958f4024b6f1d8cf69ffe3fd-803a169253ad45549e1535669bd41f67 // Static bundle. // Access on url http://localhosthost:54716/StaticBundle Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify)); b.AddFile("~/scripts/custom/ECMAScript5.js"); b.AddFile("~/scripts/custom/GoToDefinition.js"); b.AddFile("~/scripts/bundle/JScript1.js"); b.AddFile("~/scripts/bundle/JScript2.js"); BundleTable.Bundles.Add(b);FakePre-14e5781de2064de6b2f9d263af5f14a0-f1b29d3af0c644159b5f89040f86a0d4FakePre-3dfb2579b9c248d7a9641b685d7b3a8b-de4f377662ca432fa8f98bd008e29f73FakePre-de8732d2be86444eac5c1d4501f2ff73-59c1ab41b33f47cc87208b30cda39e87FakePre-694421cc601548718ec1e14e8aadad0d-43e7a0b58ee049138cfdff3b7cd45eb7FakePre-84f38eafcc854e6099f96ed2cb7fd9a4-926afcd7d118449fbb68971c7008b5caFakePre-a83b1a1793174a50a071f0b98264ea4f-ae523feff2ca4e1cb4283bfafbc19b0bFakePre-07828d7881b2447e851b291c7a950fb4-779ff57cf79e4810aac0f46a06ab4b09

  4. Open the Optimization.aspx file.

    Notice that the link to Static JS Bundle is using the path you have declared when you configured the static bundle in the Global.asax.cs file: /StaticBundle.

    HTML

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    FakePre-babc9011c42f450eaca6197025a26875-cd5e316345b44fb9808662c8ec2bfdcaFakePre-8a62fbeaa70541398deaa589621b8ec0-b6596b0569954292b62b74c545f065eeFakePre-0c50049c79bd428e9331e826d5628712-784ede444897429ca6cf37fb6b1939dbFakePre-855e3bcd2f1240de869491d9d393e24a-ded983d5f3a94fc18e141df0a092cfcfFakePre-b3ec84a7c0b243b9849c3a47788607a4-ab97f1f7187441c69cfd0ed448ea00c6FakePre-c9b1a8c5fd904f08b1c221ca0d616712-44e5ced46e3c4178b89ad5dfa7a1711eFakePre-4cd633406cb44347949108946fb79f12-4419445313e34085a61dab7654d384f9FakePre-b102092e00874ee5b170017648ae5331-1945b6fe64654dbaac518daeac101188FakePre-9a70b4d27c6c4c8c9028852a117abcd0-1ce676220dc5483faa1dfd299e9bdc7aFakePre-b0c4559ab0344e9a81f82b21a0239369-08dc984fb2d642fa8e53c31fe6d61af5FakePre-0c83dffc0a7c4849bef7d54eb3739468-03b12b0e549a419d9c33ef48c4b5ff10FakePre-c4c5e67a86fd441b8fa98b6eb14f0920-9a340013d55d4f1b872fb148cc88ca6cFakePre-dedc8c68655045f59132abe4c5221c74-0435cac4d77446b1be7a208d47196fc7FakePre-9c05c89645fa4b0c9009007f4274d5dd-dd268c7c7dca4ef49d7770b04059af36FakePre-ed8a316cd7414d269fb33db1c520cc70-8837ac335b88415a902e0b3d810fbd63

  5. Press F5 to run the application, and then navigate to the Optimization page.
  6. Click on the Static JS Bundle link to download and open the file in Notepad.

    Notice that the minified bundled JavaScript file is the output for all the JavaScript files configured in the static bundle file under the path “/StaticBundle”.

    Figure 44

    Static JavaScript files bundle

  7. Close the browser and return to Visual Studio.

Task 4 – Dynamic Folder Bundles

In this task, you will learn how to configure dynamic folder bundles. The power of dynamic bundling is that you can include static JavaScript, as well as other files in languages that compiles into JavaScript, and thus, require some processing before the bundling is executed.

In this example, you will learn how to use the DynamicFolderBundle class to create a dynamic bundle for files written in CofeeScript. CofeeScript is a programming language that compiles into JavaScript and provides a simpler syntax for writing JavaScript code, enhancing JavaScript's brevity and readability.

  1. Open the Global.asax.cs file and locate the Application_Start method.
  2. Uncomment the dynamic bundle code as shown in the code below.

    You are defining a dynamic folder bundle that will use the CoffeeMinify custom minification processor that will only apply to the files with the “.coffee” extension (CoffeeScript files). Notice that you can use a search pattern to select the files to bundle within a folder, like ‘*.coffee’.

    C#

    void Application_Start(object sender, EventArgs e)
    FakePre-8258e4b76e2645e48846b3423ac5c1e7-2290ff31208e48759849ae2b9fcdd9fcFakePre-387ec69bc4af4df3990b1a06db4287cb-5ab649ed1ab54ad5a96794bf3403fbf5FakePre-e0a5fc23d64f448399a6fa3518fdf2dc-5d4e72166a69414f9115cfd4826d69c2FakePre-13e2dbbeebea46f2a9f3a6a14e461567-2694abfac3c747f6b20635a9b3473b65FakePre-749767e9f7df476dade28bab51140fa7-8ff02877bddc4f5797d6799f53b0d49aFakePre-3efe5115f54e49f486b8b1e54cf9c28d-55427cf05f564d499bcd874922ef6e39FakePre-60d56e8a51c94a5d8ba020907159b9ea-29d44d7d711c4fa68f00a8d70faf98f1FakePre-f01a4ae64bd04dbbaabc3b1c9ad0e4e7-5ae76b9313f24e19be7f4eadf6a4733bFakePre-6814a2f22926499fa336f03e3319f9e9-93b407907493421eb37f98fdf8cf95b2 // Dynamic bundle // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee"); BundleTable.Bundles.Add(fb);FakePre-da360b39875042a18145e78074976311-115eab96a3e543d9b8e7efb19a010b5f

  3. Click the Show All Files button in the Solution Explorer window

    Figure 45

    Showing all files

  4. Right-click the CoffeeMinify.cs file in the Solution Explorer and select Include in Project

    Figure 46

    Include the CoffeeMinify.cs file in the project

  5. Open the CoffeeMinify.cs file.

    This class inherits from JsMinify to minify the JavaScript code. Notice that it is incomplete; ideally, you will call the CoffeeScript compiler to generate the JavaScript code first, and then you will send it to the JsMinify.Process method to minify the resulting code.

    C#

    public class CoffeeMinify : JsMinify { public CoffeeMinify() { } public override void Process(BundleResponse bundle) { //Write coffee compiler calls here //pass bundle.Files to it //replace bundle.Files with the output of Coffee Compiler //now pass it to JS Minify base.Process(bundle); } }

  6. Open the Script1.coffee and Script2.coffee files from the Scripts/bundle folder.

    These files will include the CoffeScript code to be compiled while performing the bundling with the CoffeeMinify class.

    For simplicity purposes, the CoffeeScript files provided are only including JavaScript and CoffeeScript code . The comments are excluded by the JsMinify process.

    Figure 47

    CoffeeScript files

    Note:
    CofeeScript provides a simpler syntax for writing JavaScript code, enhancing JavaScript's brevity and readability, as well as adding other features like array comprehension and pattern matching.

  7. Open the Optimization.aspx file and locate the bundle links.

    Notice that the link to Dynamic JS Bundle is referencing the Scripts/bundle folder by using the /Coffee suffix you configured for the dynamic folder bundle.

    HTML

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    FakePre-8ba4c5699bc14ba69d8abaf23129e06a-43a66ae0e0df47609884eedcf96e5b97FakePre-567e82d088214192a44250eec957fb6c-3b89912bf4614cc799118b11af6cb07fFakePre-a317917a5d2a4f77957e7db70eec8e6f-a47b3820aad54beeb81f844d2f00449eFakePre-e2c391eb15334bdaab44d06bfe824424-44dfafd082c54b71aea05e5e85b7e665FakePre-b5c344c5bbec4ac1b1302c4ab53c8f10-00e1602dbe57487d8199caf3e08270baFakePre-86942c2b7c454fcf88e02d01547e641d-4fb6060eb6a64ffd811c7b66da941835FakePre-32beb9cac70647a2869626cd1b1eefc8-a772c9fd04ac4258935403326808a637FakePre-d21d4b438e5f4dcbba0a5910d6b69cec-5283388156b145a88267fb76190a7975FakePre-4a91d6a681534fc4b64ac9c64884771f-ab7d9d1576b140ee8634a847f82f5dbaFakePre-9a125740b61746a2bb04ab8b883fb035-a3e9a74e59914a818185c42b15a32d7eFakePre-a91d3dbea65c428d931b5fcf4c55afd4-1f4df7c14ec6459d8ff29496ec9af466 <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>FakePre-9081cc7999a644a4ac91ad318b97f7fa-660fd57f98d44da9b7a8234ba81daae8FakePre-3c3f2840c79e45829fc41802ae795903-d5383820cf2c4574b4486dc9a9b39989FakePre-d79f864709474107aff408ad12d20df8-dffb6618e53144af811398aef77f8a1c

  8. Press F5 to run the application, and then navigate to the Optimization page.
  9. Click on the Dynamic JS Bundle link to download and open the file in Notepad.

    Notice that the JavaScript content that was included in this bundle only contains .coffee files. You can also see that the commented-out code has been removed.

    Figure 48

    Dynamic JS files bundle