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
- Open Visual Studio 11 if not already opened.
- If not already opened, start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.
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
- 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.
- If not already opened, start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.
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
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.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Security; using System.Web.SessionState; using Microsoft.Web.Optimization;
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.
void Application_Start(object sender, EventArgs e) { // Default behavior // Bundles all .js files in folders such as "scripts" if URL pointed to it: https://localhost:54716/scripts/custom/js BundleTable.Bundles.EnableDefaultBundles(); ... }
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.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
FakePre-622cefeca6c149108751f65372c29a43-0e548f7418674b92ac90ce06b40b50eeFakePre-95b61d53512148f9a9da71f73b43d682-21499885c67a44e3a2d426d59b7b71c4FakePre-402857a483a040cf93d3c1ed78f1895d-9d19699a939d438d9a64ec18057732ed
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.
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.
<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
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
- Press F5 to run the application and navigate to the Optimization page.
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
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.
- Close the browser.
- Open the Global.asax.cs file and locate the Application_Start method.
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.
void Application_Start(object sender, EventArgs e)
FakePre-d0fbd8e7eb244ea69db234f07246d011-dfe4388a48cc43498c2f019a10769ab2FakePre-0bcb5c03f0ff4f5ab50fb74e65d01a50-72ebaf79067c47a8a88606d46ea63d33FakePre-6a08bbed610c49d884d2b0361494bb9a-cdc4b2233a9c436fb6bcffa209a89a96FakePre-c85afb7c3d96496b8eea3585ddc6c6d2-7b42d34432ce4c059f875d11b1e9e0f4FakePre-01c9d90e958f4024b6f1d8cf69ffe3fd-803a169253ad45549e1535669bd41f67 // Static bundle. // Access on url https://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
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.
<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
- Press F5 to run the application, and then navigate to the Optimization page.
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
- 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.
- Open the Global.asax.cs file and locate the Application_Start method.
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’.
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: https://localhost:54716/scripts/coffee DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee"); BundleTable.Bundles.Add(fb);FakePre-da360b39875042a18145e78074976311-115eab96a3e543d9b8e7efb19a010b5f
Click the Show All Files button in the Solution Explorer window
Figure 45
Showing all files
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
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.
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); } }
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
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.
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.
<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
- Press F5 to run the application, and then navigate to the Optimization page.
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