Bundler: Javascript client optimization in ASP.NET

Today, when developing applications on the Internet, the question of client optimization is becoming more common. If earlier, the page sent to the client contained only information, then today very often this page contains a lot of JavaScript code. To achieve the best performance and reduce server load, client optimization rules are applied.

This article will discuss Bundler, a convenient JavaScript client optimization tool for .net projects.

Introduction

Client optimization regarding JavaScript involves the following actions:

minimizing javascript code using the appropriate tools: YUI Minifier , Microsoft JsMin , Google Closure , etc .;
reducing the number of requests to static files (including JavaScript) by reducing their number, combining several files into one;
caching of static files (including JavaScript) on the client side;
GZip-compression of traffic between the client and the server.

The first rule reduces the size required for transfer from the server to the client, which reduces the load on the server and relieves communication channels. The second rule reduces the number of requests to the server, which allows the user's browser to reduce the time required to render the page.

Caching JavaScript files (like any other static files) allows the browser not to request data from the server using previously downloaded files from its own cache.
')
Using GZip-compression to transfer data between the client and the server can significantly reduce the amount of transmitted traffic, which will be compressed by the server and unpacked on the client's browser. GZip compression can be enabled on the IIS server (Figure 1).

clip_image001

Fig. 1. Enable compression on IIS 7.5

This article will focus on applying the first two rules in ASP.NET using the new Bundler tool. The organization of caching JavaScript files on the client side and the fine tuning of traffic compression on IIS are beyond the scope of this article and will not be considered.

Bundler

Bundler is a solution that allows you to simply and transparently apply the rules of minimizing and combining JavaScript files. In addition, the Bundler contains a number of useful functions that can make it easier for you to work with client-side JavaScript optimization.

Bundler is written by Justin Etheredge, the author of the blog CodeThinked , here and here you can read the author's articles on his utility. To start using the Bundler, you need to download the source package from the page on GitHub . After downloading the downloaded project in Visual Studio, you need to compile the Bundler.Framework project. As a result, we get the build Bundler.Framework.dll , the use of which will be discussed further.

Application Bundler

To demonstrate the use of the Bundler, I will use the ASP.NET MVC project (in Visual Studio 2010 RC), which is created by default (RC version). By default, the project does not use client validation. Add it to the registration form by specifying <% Html.EnableClientValidation () before the form ; %> (Fig. 2).

clip_image002

Fig. 2. Registration form with client validation included

To validate the form on the client to work, you need to include several JavaScript files. Add the necessary files to Site.Master (Fig. 3)

clip_image003

Fig. 3. Adding scripts to Site.Master

Run and verify that client validation works as expected. However, we are confronted with several questions: first, we have connected the scripts for the release and will not be comfortable using them at the debugging stage. And secondly, based on the rules of client optimization, we would not want to force the client to request as many as three scripts at once. Instead of looking for your own solutions, use Bundler .

By connecting the Bundler.Framework.dll assembly to our project, we can immediately use all the features of the Bundler. Let's rewrite the code for using scripts using the Bundler functional (Fig. 4).

Fig. 4. Enabling Scripts in the Bundler

Run the project and see what happened in the end. Looking at the source code of the page in the browser, we will see that the scripts are still rendered separately (Fig. 5).

Fig. 5. Result of Bundler in Debug mode

This behavior is actually one of the useful features of the Bundler. When you build a project in Debug mode, the Bundler does not process the scripts and allows them to be output unchanged. We will use this and send him debug-versions of the scripts, and at the same time turn off debugging for our project by setting debug = "false" in the web.config. Compile and run, re-see the resulting markup (Fig. 6).

Fig. 6. Bundler Result Without Debugging

For the sake of interest, let's look at the result code AjaxBundle.js (Fig. 7).

Fig. 7. Bundler Result

As you can be sure, even though we used debug-versions of the scripts for client validation, Bundler independently not only combined them into one file, but also squeezed the contents, getting rid of extra spaces and comments.

Note that for a query on the generated file, the Bundler uses the internal parameter r, which is assigned the string value of the current time. This parameter is used to specifically set the versionedness of the generated script assembly. Without versioning, the browser can cache the same-name script of the old version without important changes and the updated functionality on the client will not be available.

Conclusion

In the article, we reviewed the work of Bundler, a mechanism that helps flexibly implement several useful client optimization practices. First, the Bundler compresses JavaScript files, and second, combines them into one common file.

Bundler supports automatic generation and versioning of output JavaScript files. In addition, the Bundler takes into account the current build mode of the project and, in the case of the debug version, allows you to work with the original scripts without changing them.

Bundler seems to be a very useful tool that is worth paying attention to. The project is distributed with open source code and you can add it on your own by adding the necessary functionality.

If you are looking for a solution to optimize the work with many JavaScript files in your project, then Bundler will be a good choice.

Bundler: Javascript client optimization in ASP.NET

Introduction

Bundler

Application Bundler

Conclusion

Links

More articles: